feat: added # button to heading

app/[locale]/academics/departments/[name]/page.tsx

@@ -263,10 +263,11 @@ export default async function Department({
       </nav>
 
       {imageCount !== 0 && (
-        <article className="container" id="gallery">
+        <article className="container">
           <Heading
             glyphDirection="rtl"
             heading="h3"
+            id="gallery"
             text={text.headings.gallery.toUpperCase()}
           />
           <GalleryCarousel className="my-5 w-full">

app/[locale]/institute/administration/(committees)/committee.tsx

@@ -40,7 +40,12 @@ export default async function Committee({
         <Heading glyphDirection="dual" heading="h1" text={text[type]} />
       )}
 
-      <Heading glyphDirection="ltr" heading="h2" text={text.members.title} />
+      <Heading
+        glyphDirection="ltr"
+        heading="h2"
+        id="members"
+        text={text.members.title}
+      />
       <Suspense fallback={<Loading />}>
         <Table>
           <TableHeader>
@@ -60,7 +65,12 @@ export default async function Committee({
         </Table>
       </Suspense>
 
-      <Heading glyphDirection="ltr" heading="h2" text={text.meetings.title} />
+      <Heading
+        glyphDirection="ltr"
+        heading="h2"
+        id="meetings"
+        text={text.meetings.title}
+      />
       <Suspense fallback={<Loading />}>
         <Table>
           <TableHeader>

app/[locale]/institute/sections/[name]/page.tsx

@@ -55,7 +55,7 @@ export default async function Section({
         className="container"
         glyphDirection="ltr"
         heading="h3"
-        href="#about"
+        id="about"
         text={text.about}
       />
       <p className="container">{section.aboutUs}</p>
@@ -66,7 +66,7 @@ export default async function Section({
         className="container"
         glyphDirection="ltr"
         heading="h3"
-        href="#gallery"
+        id="gallery"
         text={text.gallery}
       />
     </>

app/[locale]/notifications.tsx

@@ -32,7 +32,7 @@ export default async function Notifications({
         className="container"
         glyphDirection="rtl"
         heading="h2"
-        href="#notifications"
+        id="notifications"
         text={text.title}
       />
 

app/[locale]/page.tsx

@@ -82,11 +82,11 @@ export default async function Home({
 
       <Notifications category={notificationCategory} locale={locale} />
 
-      <section className="container mb-32 mt-10" id="directors-corner">
+      <section className="container mb-32 mt-10">
         <Heading
           glyphDirection="rtl"
           heading="h2"
-          href="#directors-corner"
+          id="directors-corner"
           text={text.director.title}
         />
         <MessageCard

app/[locale]/student-activities/page.tsx

@@ -38,7 +38,7 @@ export default async function StudentActivities({
         className="container"
         glyphDirection="ltr"
         heading="h3"
-        href="#clubs"
+        id="clubs"
         text={text.sections.clubs.title}
       />
 

components/heading.tsx

@@ -1,9 +1,8 @@
-import { type UrlObject } from 'url';
-
 import Image from 'next/image';
+import Link from 'next/link';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
-import MaybeLink from '~/components/maybe-link';
+import { Button } from '~/components/ui';
 import { cn } from '~/lib/utils';
 
 function Elephants({ direction }: { direction: 'rtl' | 'ltr' }) {
@@ -68,43 +67,44 @@ export default function Heading({
   className,
   glyphDirection,
   heading: Comp,
-  href,
   text,
   ...props
 }: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> & {
   glyphDirection: 'rtl' | 'dual' | 'ltr';
   heading: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  href?: string | UrlObject;
   text: string;
 }) {
-  const styles = 'flex flex-nowrap gap-2 sm:gap-3 md:gap-4';
-
   return (
     <header
       className={cn(
+        'group relative',
         'my-4 sm:my-6 md:my-8 lg:my-10 xl:my-12',
-        !href && styles,
+        'flex flex-nowrap items-center space-x-2 sm:space-x-3 md:space-x-4',
         className
       )}
       {...props}
     >
-      <MaybeLink className={cn(href && styles)} href={href}>
-        {glyphDirection === 'dual' && (
-          <>
-            <Elephants direction="rtl" />
-            <Comp className="my-auto min-w-fit">{text}</Comp>
-            <Elephants direction="ltr" />
-          </>
-        )}
+      {glyphDirection === 'dual' && <Elephants direction="rtl" />}
+      {glyphDirection === 'rtl' && <Horses direction={glyphDirection} />}
+      <Comp className="my-auto min-w-fit">{text}</Comp>
+      {glyphDirection === 'ltr' && <Horses direction={glyphDirection} />}
+      {glyphDirection === 'dual' && <Elephants direction="ltr" />}
 
-        {glyphDirection === 'ltr' && (
-          <Comp className="my-auto min-w-fit">{text}</Comp>
-        )}
-        {glyphDirection !== 'dual' && <Horses direction={glyphDirection} />}
-        {glyphDirection === 'rtl' && (
-          <Comp className="my-auto min-w-fit">{text}</Comp>
-        )}
-      </MaybeLink>
+      {glyphDirection !== 'dual' && (
+        <Button
+          asChild
+          className={cn(
+            '!ml-0 w-0',
+            'hidden animate-in fade-in zoom-in group-hover:inline',
+            // FIXME: First/last ordering
+            glyphDirection === 'ltr' && 'order-first after:md:pr-2',
+            glyphDirection === 'rtl' && 'order-last before:md:pl-2'
+          )}
+          variant="link"
+        >
+          <Link href={`#${props.id}`}>#</Link>
+        </Button>
+      )}
     </header>
   );
 }