fix: formatting identifier because it cant be camel case

nsdonato · Mar 31, 2024 · 7e32cf5 · 7e32cf5
1 parent de8b8ec
commit 7e32cf5
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git a/app/[menu]/[submenu]/page.tsx b/app/[menu]/[submenu]/page.tsx
@@ -17,11 +17,7 @@ export default async function SubmenuPage({ params }: SubmenuPageProps) {
 
   return (
     <>
-      <Header
-        href={data.title}
-        title={data.title}
-        description={data.description}
-      />
+      <Header 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/components/card/card-information.tsx b/components/card/card-information.tsx
@@ -1,4 +1,5 @@
 import { InfoExtra } from '@/lib/db-types'
+import { getFormattedIdentifier } from '@/lib/utils'
 
 import { getConferenceInfo } from './utils/card-utils'
 
@@ -10,7 +11,9 @@ type CardTitleProps = {
 
 export const CardInformation = ({ title, infoExtra, href }: CardTitleProps) => (
   <p className='py-1 truncate text-sm'>
-    <a className='pointer-events-none' href={`#${href}`}>
+    <a
+      className='pointer-events-none'
+      href={`#${getFormattedIdentifier(href)}`}>
       {infoExtra ? getConferenceInfo(infoExtra) : title}
     </a>
   </p>

diff --git a/components/card/card.tsx b/components/card/card.tsx
@@ -1,4 +1,5 @@
 import { PageItem } from '@/lib/db-types'
+import { getFormattedIdentifier } from '@/lib/utils'
 
 import { Video } from '../video/video'
 import { WebLink } from '../web-link/web-link'
@@ -15,11 +16,13 @@ export const Card = ({ item }: CardProps) => {
   return (
     <div
       className='card p-4 ring-1 bg-base-100 shadow-lg h-auto hover:scale-105 transition-transform'
-      id={imgPlaceholder}>
+      id={getFormattedIdentifier(imgPlaceholder)}>
       <CardBody cover={cover} imgPlaceholder={imgPlaceholder} />
       <>
         <p className='py-1 truncate'>
-          <a className='pointer-events-none' href={`#${imgPlaceholder}`}>
+          <a
+            className='pointer-events-none'
+            href={`#${getFormattedIdentifier(imgPlaceholder)}`}>
             {imgPlaceholder}
           </a>
         </p>

diff --git a/lib/utils.ts b/lib/utils.ts
@@ -4,3 +4,7 @@ import { twMerge } from 'tailwind-merge'
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export const getFormattedIdentifier = (href: string) => {
+  return href.split(' ').join('-').toLowerCase().replace('.', '-')
+}