docs: redesign cards (#8671)

* docs: redesign cards

* fix build error

www/apps/ui/src/app/not-found.mdx

@@ -22,26 +22,22 @@ If you think this is a mistake, please [report this issue on GitHub](https://git
     {
       title: "Get Started Docs",
       href: "/",
-      showLinkIcon: false,
-      startIcon: <BookOpen />
+      icon: BookOpen
     },
     {
       title: "Learning Resources",
       href: "!resources!",
-      showLinkIcon: false,
-      startIcon: <AcademicCapSolid />
+      icon: AcademicCapSolid
     },
     {
       title: "Admin API reference",
       href: "!api!/admin",
-      showLinkIcon: false,
-      startIcon: <ComputerDesktopSolid />
+      icon: ComputerDesktopSolid
     },
     {
       title: "Store API reference",
       href: "!api!/store",
-      showLinkIcon: false,
-      startIcon: <BuildingStorefront />
+      icon: BuildingStorefront
     }
   ]}
 />

www/apps/ui/src/app/not-found.tsx

@@ -32,26 +32,22 @@ export default function NotFound() {
           {
             title: "Get Started Docs",
             href: "/",
-            showLinkIcon: false,
-            startIcon: <BookOpen />,
+            icon: BookOpen,
           },
           {
             title: "Learning Resources",
             href: "!resources!",
-            showLinkIcon: false,
-            startIcon: <AcademicCapSolid />,
+            icon: AcademicCapSolid,
           },
           {
             title: "Admin API reference",
             href: "!api!/admin",
-            showLinkIcon: false,
-            startIcon: <ComputerDesktopSolid />,
+            icon: ComputerDesktopSolid,
           },
           {
             title: "Store API reference",
             href: "!api!/store",
-            showLinkIcon: false,
-            startIcon: <BuildingStorefront />,
+            icon: BuildingStorefront,
           },
         ]}
       />

www/apps/ui/src/components/figma-card.tsx

@@ -0,0 +1,15 @@
+import React from "react"
+import { Card } from "docs-ui"
+import { basePathUrl } from "../lib/base-path-url"
+
+export const FigmaCard = () => {
+  return (
+    <Card
+      title="Medusa UI"
+      text="Colors, type, icons and components"
+      href="https://www.figma.com/community/file/1278648465968635936/Medusa-UI"
+      image={basePathUrl("/images/figma.png")}
+      iconClassName="!p-0"
+    />
+  )
+}

www/apps/ui/src/components/figma-icon.tsx

@@ -1,6 +0,0 @@
-import { BorderedIcon } from "docs-ui"
-import { basePathUrl } from "../lib/base-path-url"
-
-export const FigmaIcon = () => {
-  return <BorderedIcon icon={basePathUrl("/images/figma.png")} />
-}

www/apps/ui/src/components/mdx-components.tsx

@@ -10,7 +10,7 @@ import { HookValues } from "@/components/hook-values"
 import { IconSearch } from "@/components/icon-search"
 import { PackageInstall } from "@/components/package-install"
 import { Feedback } from "@/components/feedback"
-import { FigmaIcon } from "@/components/figma-icon"
+import { FigmaCard } from "@/components/figma-card"
 import { ComponentReference } from "@/components/component-reference"
 import { Link, Card, BorderedIcon, MDXComponents, CodeBlock } from "docs-ui"
 
@@ -53,7 +53,7 @@ const components = {
   Colors,
   Card,
   BorderedIcon,
-  FigmaIcon,
+  FigmaCard,
   ComponentReference,
 }
 

www/apps/ui/src/content/docs/index.mdx

@@ -7,14 +7,7 @@ Welcome to Medusa UI, a React implementation of the Medusa design system.
 It is a collection of components, hooks, utility functions, icons, and [Tailwind CSS](https://tailwindcss.com/) classes that can be used to build
 a consistent user interface across the Medusa Admin and other Medusa applications.
 
-<Card
-  title="Medusa UI"
-  text="Colors, type, icons and components"
-  href="https://www.figma.com/community/file/1278648465968635936/Medusa-UI"
-  startIcon={
-    <FigmaIcon />
-  }
-/>
+<FigmaCard />
 
 ## Packages