1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-26 19:28:27 -04:00
jarv.is/components/HeadingAnchor/HeadingAnchor.tsx

23 lines
602 B
TypeScript

import { styled } from "../../lib/styles/stitches.config";
import type { ComponentProps } from "react";
const PoundSignLink = styled("a", {
textDecoration: "none",
"&::before": {
// pound sign `#`, done here to keep content DOM cleaner
content: "\\0023",
},
});
export type HeadingAnchorProps = ComponentProps<typeof PoundSignLink> & {
id: string;
title: string;
};
const HeadingAnchor = ({ id, title, ...rest }: HeadingAnchorProps) => (
<PoundSignLink href={`#${id}`} title={`Jump to "${title}"`} tabIndex={-1} aria-hidden={true} {...rest} />
);
export default HeadingAnchor;