Allow prop passing of custom component.

CQCL · Oct 7, 2024 · 94ec065 · 94ec065
1 parent 93609fa
commit 94ec065
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/src/custom/docs/components/triplecard/index.tsx b/src/custom/docs/components/triplecard/index.tsx
@@ -21,10 +21,10 @@ const cardSchema = z.array(
   }))
 
 
-  const regularLink = (props: ComponentProps<'a'>) => <a {...props}></a>
+  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 }) => {
 
-export const TripleCard = (props: {cards: z.infer<typeof cardSchema>, imageComponent: typeof NextImage | typeof regularLink, useNextLink?:  boolean }) => {
-  const LinkComponent = props.useNextLink ? NextLink : (props: ComponentProps<'a'>) => <a {...props}></a>
   return (
     <section className="shadow-lg rounded-xl grid grid-cols-1 items-stretch md:grid-cols-3 ">
       {props.cards.map((item, idx, arr) => {
@@ -66,12 +66,12 @@ export const TripleCard = (props: {cards: z.infer<typeof cardSchema>, imageCompo
                 return (
                   <li key={link.title}>
 
-                    <LinkComponent
+                    <props.linkComponent
                       className="font-semibold tracking-tight text-blue-600 dark:text-blue-300"
                       href={link.link}
                     >
                       {link.title}
-                    </LinkComponent>
+                    </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> = {