49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import { LinkIcon } from '@heroicons/react/24/solid';
|
|
import { slugify } from '../slugify.utils';
|
|
import Link from 'next/link';
|
|
|
|
export const Heading1 = ({ title }: { title: string }) => (
|
|
<h1
|
|
id={slugify(title)}
|
|
className="group mb-5 text-4xl font-extrabold tracking-tight text-slate-900 dark:text-slate-100"
|
|
>
|
|
<span>{title}</span>
|
|
<Link aria-hidden="true" tabIndex={-1} href={'#' + slugify(title)}>
|
|
<LinkIcon
|
|
role="img"
|
|
className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100"
|
|
/>
|
|
</Link>
|
|
</h1>
|
|
);
|
|
|
|
export const Heading2 = ({ title }: { title: string }) => (
|
|
<h2
|
|
id={slugify(title)}
|
|
className="group mb-5 text-2xl font-bold tracking-tight text-slate-800 dark:text-slate-200"
|
|
>
|
|
<span>{title}</span>
|
|
<Link aria-hidden="true" tabIndex={-1} href={'#' + slugify(title)}>
|
|
<LinkIcon
|
|
role="img"
|
|
className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100"
|
|
/>
|
|
</Link>
|
|
</h2>
|
|
);
|
|
|
|
export const Heading3 = ({ title }: { title: string }) => (
|
|
<h3
|
|
id={slugify(title)}
|
|
className="group text-xl font-semibold tracking-tight text-slate-700 dark:text-slate-300"
|
|
>
|
|
<span>{title}</span>
|
|
<Link aria-hidden="true" tabIndex={-1} href={'#' + slugify(title)}>
|
|
<LinkIcon
|
|
role="img"
|
|
className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100"
|
|
/>
|
|
</Link>
|
|
</h3>
|
|
);
|