From 09883d6ca0e56c65284473319968406e33e93848 Mon Sep 17 00:00:00 2001
From: Noelia <noeliadonato@gmail.com>
Date: Sun, 31 Mar 2024 16:55:01 +0200
Subject: [PATCH] feat: improvement algolia search, anchoring (#114)

---
 app/[menu]/[submenu]/page.tsx        |  6 +++++-
 app/page.tsx                         |  1 +
 components/card/card-information.tsx |  7 +++++--
 components/card/card.tsx             | 16 ++++++++++++----
 components/header/header.tsx         | 11 ++++++++---
 5 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/app/[menu]/[submenu]/page.tsx b/app/[menu]/[submenu]/page.tsx
index 220e32e..d2e9bd1 100644
--- a/app/[menu]/[submenu]/page.tsx
+++ b/app/[menu]/[submenu]/page.tsx
@@ -17,7 +17,11 @@ export default async function SubmenuPage({ params }: SubmenuPageProps) {
 
   return (
     <>
-      <Header title={data.title} description={data.description} />
+      <Header
+        href={data.title}
+        title={data.title}
+        description={data.description}
+      />
       <div className='grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 mt-8'>
         {data.pageItems.map(item => (
           <Card key={item.imgPlaceholder} item={item} />
diff --git a/app/page.tsx b/app/page.tsx
index 95c7e22..f404b9d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -9,6 +9,7 @@ export default async function Home() {
   return (
     <>
       <Header
+        href='Inicio'
         title='Inicio'
         description={['En Internet siempre veo las mismas preguntas:']}
       />
diff --git a/components/card/card-information.tsx b/components/card/card-information.tsx
index a35cb8f..6581579 100644
--- a/components/card/card-information.tsx
+++ b/components/card/card-information.tsx
@@ -5,10 +5,13 @@ import { getConferenceInfo } from './utils/card-utils'
 type CardTitleProps = {
   title?: string
   infoExtra?: InfoExtra
+  href: string
 }
 
-export const CardInformation = ({ title, infoExtra }: CardTitleProps) => (
+export const CardInformation = ({ title, infoExtra, href }: CardTitleProps) => (
   <p className='py-1 truncate text-sm'>
-    {infoExtra ? getConferenceInfo(infoExtra) : title}
+    <a className='pointer-events-none' href={`#${href}`}>
+      {infoExtra ? getConferenceInfo(infoExtra) : title}
+    </a>
   </p>
 )
diff --git a/components/card/card.tsx b/components/card/card.tsx
index 901f9cd..f7fbd92 100644
--- a/components/card/card.tsx
+++ b/components/card/card.tsx
@@ -13,14 +13,22 @@ export const Card = ({ item }: CardProps) => {
   const { cover, imgPlaceholder, titleCard, infoExtra, links, videos } = item
 
   return (
-    <div className='card p-4 ring-1 bg-base-100 shadow-lg h-auto hover:scale-105 transition-transform'>
+    <div
+      className='card p-4 ring-1 bg-base-100 shadow-lg h-auto hover:scale-105 transition-transform'
+      id={imgPlaceholder}>
       <CardBody cover={cover} imgPlaceholder={imgPlaceholder} />
       <>
-        <p id={imgPlaceholder} className='py-1 truncate'>
-          {imgPlaceholder}{' '}
+        <p className='py-1 truncate'>
+          <a className='pointer-events-none' href={`#${imgPlaceholder}`}>
+            {imgPlaceholder}
+          </a>
         </p>
         <div className='divider m-0 p-0'></div>
-        <CardInformation title={titleCard} infoExtra={infoExtra} />
+        <CardInformation
+          href={imgPlaceholder}
+          title={titleCard}
+          infoExtra={infoExtra}
+        />
         <div className='flex flex-wrap gap-2 pt-1'>
           {links?.map(({ url, type }, index) => (
             <WebLink
diff --git a/components/header/header.tsx b/components/header/header.tsx
index 45f6c58..2bd725f 100644
--- a/components/header/header.tsx
+++ b/components/header/header.tsx
@@ -1,13 +1,18 @@
 type HeaderProps = {
   title: string
   description: string[]
+  href?: string
 }
 
-export const Header = ({ title, description }: HeaderProps) => {
+export const Header = ({ title, description, href }: HeaderProps) => {
   return (
     <header>
-      <h1 className='text-5xl font-bold mb-10 underline underline-offset-8 decoration-pink-500'>
-        {title}
+      <h1
+        id={`${href ?? title}`}
+        className='text-5xl font-bold mb-10 underline underline-offset-8 decoration-pink-500 block'>
+        <a className='pointer-events-none' href={`#${href ?? title}`}>
+          {title}
+        </a>
       </h1>
       {description.map((parrafo, index) => (
         <p key={index} className='text-balance last-of-type:pt-4'>