fix(): Optional next link config via props. (#31)

* fix(): Optional next link config via props. * Allow prop passing of custom component.
CQCL · Oct 7, 2024 · 491626a · 491626a
1 parent de8e3c3
commit 491626a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/src/custom/docs/components/triplecard/index.tsx b/src/custom/docs/components/triplecard/index.tsx
@@ -1,5 +1,6 @@
 import { Card,  CardTitle, CardSubtitle  } from './Card'
 import NextImage from 'next/image'
+import NextLink from 'next/link'
 import { z } from 'zod'
 import { ComponentProps } from 'react'
 
@@ -20,9 +21,9 @@ const cardSchema = z.array(
   }))
 
 
-  const regularLink = (props: ComponentProps<'a'>) => <a {...props}></a>
-
-export const TripleCard = (props: {cards: z.infer<typeof cardSchema>, imageComponent: typeof NextImage | typeof regularLink  }) => {
+  const RegularLink = (props: ComponentProps<'a'>) => <a {...props}></a>
+const RegularImage =  (props: ComponentProps<'img'>) => <img {...props}></img>
+export const TripleCard = (props: {cards: z.infer<typeof cardSchema>, imageComponent: typeof NextImage | typeof RegularImage, linkComponent:  typeof NextLink  | typeof RegularLink }) => {
 
   return (
     <section className="shadow-lg rounded-xl grid grid-cols-1 items-stretch md:grid-cols-3 ">
@@ -65,12 +66,12 @@ export const TripleCard = (props: {cards: z.infer<typeof cardSchema>, imageCompo
                 return (
                   <li key={link.title}>
 
-                    <a
+                    <props.linkComponent
                       className="font-semibold tracking-tight text-blue-600 dark:text-blue-300"
                       href={link.link}
                     >
                       {link.title}
-                    </a>
+                    </props.linkComponent>
                     <div className="my-2"></div>
                     <div className="text-muted-foreground text-xs leading-4">
                       {link.description}

diff --git a/stories/custom/docs-tripleCard.stories.tsx b/stories/custom/docs-tripleCard.stories.tsx
@@ -65,7 +65,7 @@ import { DocsTripleCard } from "src";
 
 
 export function DocsTripleCardDemo() {
-  return <DocsTripleCard cards={tripleCardProps} imageComponent={(props: ComponentProps<'a'>) => <a {...props}></a>} />;
+  return <DocsTripleCard cards={tripleCardProps} linkComponent={(props: ComponentProps<'a'>) => <a {...props}></a>}  imageComponent={(props: ComponentProps<'img'>) => <img {...props}></img>} />;
 }
 
 const meta: Meta<typeof DocsTripleCardDemo> = {