Examples: add id to headings

homepage/design-system/src/app/components/atoms/Headings.tsx

@@ -3,11 +3,13 @@ import clsx from "clsx";
 interface HeadingProps {
   children: React.ReactNode;
   className?: string;
+  id?: string;
 }
 
-export function H1({ children, className }: HeadingProps) {
+export function H1({ children, className, id }: HeadingProps) {
   return (
     <h1
+      id={id}
       className={clsx(
         className,
         "font-display",
@@ -23,9 +25,10 @@ export function H1({ children, className }: HeadingProps) {
   );
 }
 
-export function H2({ children, className }: HeadingProps) {
+export function H2({ children, className, id }: HeadingProps) {
   return (
     <h2
+      id={id}
       className={clsx(
         className,
         "font-display",
@@ -41,9 +44,10 @@ export function H2({ children, className }: HeadingProps) {
   );
 }
 
-export function H3({ children, className }: HeadingProps) {
+export function H3({ children, className, id }: HeadingProps) {
   return (
     <h3
+      id={id}
       className={clsx(
         className,
         "font-display",
@@ -59,8 +63,12 @@ export function H3({ children, className }: HeadingProps) {
   );
 }
 
-export function H4({ children, className }: HeadingProps) {
-  return <h4 className={clsx(className, "text-bold")}>{children}</h4>;
+export function H4({ children, className, id }: HeadingProps) {
+  return (
+    <h4 id={id} className={clsx(className, "text-bold")}>
+      {children}
+    </h4>
+  );
 }
 
 export function Kicker({ children, className }: HeadingProps) {

homepage/homepage/app/examples/page.tsx

@@ -361,21 +361,25 @@ const vueExamples: Example[] = [
 const categories = [
   {
     name: "React",
+    id: "react",
     logo: ReactLogo,
     examples: reactExamples,
   },
   {
     name: "Next.js",
+    id: "next",
     logo: NextjsLogo,
     examples: nextExamples,
   },
   {
     name: "React Native",
+    id: "react-native",
     logo: ReactNativeLogo,
     examples: rnExamples,
   },
   {
     name: "Vue",
+    id: "vue",
     logo: VueLogo,
     examples: vueExamples,
   },
@@ -443,7 +447,9 @@ export default function Page() {
           <div key={category.name}>
             <div className="flex items-center gap-3 mb-5">
               <category.logo className="h-8 w-8" />
-              <H2 className="!mb-0">{category.name}</H2>
+              <H2 id={category.id} className="!mb-0">
+                {category.name}
+              </H2>
             </div>
 
             <GappedGrid>