refactor(site): improve component summary usage

vtex · Apr 18, 2024 · 9f33845 · 9f33845
1 parent 94d68ad
commit 9f33845
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 30 deletions.
diff --git a/packages/docs/components/component-summary/component-summary.tsx b/packages/docs/components/component-summary/component-summary.tsx
@@ -1,26 +1,35 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react'
 import React from 'react'
 import NextLink from 'next/link'
+import Image from 'next/image'
 import styles from './component-summary.module.css'
 import { getComponentProps } from '../../utils/get-component-props'
 
+const imageEstimatedWidth = 370
+const imageEstimatedHeight = 218
+
+/**
+ * Renders a component summary
+ */
 export function ComponentSummary(props: ComponentSummaryProps) {
-  const {
-    children,
-    title,
-    description,
-    icon,
-    href,
-    image,
-    name,
-    ...restProps
-  } = props
+  const { href, image, name, ...restProps } = props
 
   const componentProps = getComponentProps(name)
 
   return (
-    <NextLink className={styles.card} href={href} {...restProps}>
-      <div className={styles.imgWrapper}>{image}</div>
+    <NextLink
+      className={styles.card}
+      href={href || `/components/${name}`}
+      {...restProps}
+    >
+      <div className={styles.imgWrapper}>
+        <Image
+          src={`/assets/all-${name}.png`}
+          alt={name}
+          width={imageEstimatedWidth}
+          height={imageEstimatedHeight}
+        />
+      </div>
       <div className={styles.contentWrapper}>
         <h3 className={styles.title}>{componentProps?.name}</h3>
         <p className={styles.description}>{componentProps?.description}</p>
@@ -30,11 +39,13 @@ export function ComponentSummary(props: ComponentSummaryProps) {
 }
 
 interface ComponentSummaryProps extends ComponentPropsWithoutRef<'a'> {
-  children: ReactNode
-  title: string
-  href: string
-  icon: ReactNode
-  description?: string
+  /**
+   * Link href
+   */
+  href?: string
+  /**
+   * Component image
+   */
   image?: ReactNode
   /**
    * Component name

diff --git a/packages/docs/pages/components/index.mdx b/packages/docs/pages/components/index.mdx
@@ -1,6 +1,5 @@
 # Components
 
-import Image from 'next/image'
 import { allComponentsList, allLayoutsList, allPrimitivesList } from '../../utils/all-components-list'
 import { pascalCase } from '@vtex/shoreline'
 
@@ -9,10 +8,6 @@ import { pascalCase } from '@vtex/shoreline'
     <ComponentSummary 
       key={component}
       name={component}
-      image={
-        <Image src={`/assets/all-${component}.png`} alt={component} width={370} height={218} />
-      }
-      href={`/components/${component}`}
     />
   ))}
 </ComponentSummaryGrid>
@@ -24,10 +19,6 @@ import { pascalCase } from '@vtex/shoreline'
     <ComponentSummary 
       key={component}
       name={component}
-      image={
-        <Image src={`/assets/all-${component}.png`} alt={component} width={370} height={218} />
-      }
-      href={`/components/${component}`}
     />
   ))}
 </ComponentSummaryGrid>
@@ -39,10 +30,6 @@ import { pascalCase } from '@vtex/shoreline'
     <ComponentSummary 
       key={component}
       name={component}
-      image={
-        <Image src={`/assets/all-${component}.png`} alt={component} width={370} height={218} />
-      }
-      href={`/components/${component}`}
     />
   ))}
 </ComponentSummaryGrid>