docs: redesign cards (#8671)

* docs: redesign cards * fix build error
medusajs · Aug 20, 2024 · b4d8e26 · b4d8e26
1 parent 48fe819
commit b4d8e26
Show file tree

Hide file tree

Showing 37 changed files with 493 additions and 476 deletions.
diff --git a/www/apps/book/app/not-found.mdx b/www/apps/book/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
     }
   ]}
 />
diff --git a/www/apps/book/app/page.mdx b/www/apps/book/app/page.mdx
@@ -57,43 +57,37 @@ Medusa is for ambitious businesses and developers that are limited by traditiona
     title: "Use Case: D2C",
     text: "How Matt Sleeps built a unique D2C experience with Medusa",
     href: "https://medusajs.com/blog/matt-sleeps/",
-    startIcon: <FlyingBox />,
-    isExternal: true
+    icon: FlyingBox,
   },
   {
     title: "Use Case: OMS",
     text: "How Makro Pro Built an OMS with Medusa",
     href: "https://medusajs.com/blog/makro-pro/",
-    startIcon: <CheckCircleSolid />,
-    isExternal: true
+    icon: CheckCircleSolid,
   },
   {
     title: "Use Case: Marketplace",
     text: "How Foraged built a custom marketplace with Medusa",
     href: "https://medusajs.com/blog/foraged/",
-    startIcon: <BuildingStorefront />,
-    isExternal: true
+    icon: BuildingStorefront,
   },
   {
     title: "Use Case: POS",
     text: "How Tekla built a global webshop and a POS system with Medusa",
     href: "https://medusajs.com/blog/tekla-pos/",
-    startIcon: <ComputerDesktop />,
-    isExternal: true
+    icon: ComputerDesktop,
   },
   {
     title: "Use Case: B2B",
     text: "How Visionary built B2B commerce with Medusa",
     href: "https://medusajs.com/blog/visionary/",
-    startIcon: <BuildingsSolid />,
-    isExternal: true
+    icon: BuildingsSolid,
   },
   {
     title: "Use Case: Platform",
     text: "How Catalog built a B2B platform for SMBs with Medusa",
     href: "https://medusajs.com/blog/catalog/",
-    startIcon: <BuildingsSolid />,
-    isExternal: true
+    icon: BuildingsSolid,
   }
 ]} itemsPerRow={2} />
 

diff --git a/www/apps/resources/app/not-found.mdx b/www/apps/resources/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
     }
   ]}
 />
diff --git a/www/apps/resources/app/page.mdx b/www/apps/resources/app/page.mdx
@@ -37,40 +37,34 @@ Follow the [Medusa v2 Docs](!docs!) to become an advanced Medusa developer.
 
 <CardList items={[
   {
-    startIcon: <TagSolid />,
+    icon: TagSolid,
     title: "Product Module",
     href: "/commerce-modules/product",
-    showLinkIcon: false
   },
   {
-    startIcon: <CheckCircleSolid />,
+    icon: CheckCircleSolid,
     title: "Order Module",
     href: "/commerce-modules/order",
-    showLinkIcon: false
   },
   {
-    startIcon: <ShoppingCartSolid />,
+    icon: ShoppingCartSolid,
     title: "Cart Module",
     href: "/commerce-modules/product",
-    showLinkIcon: false
   },
   {
-    startIcon: <CurrencyDollarSolid />,
+    icon: CurrencyDollarSolid,
     title: "Pricing Module",
     href: "/commerce-modules/pricing",
-    showLinkIcon: false
   },
   {
-    startIcon: <UsersSolid />,
+    icon: UsersSolid,
     title: "Customer Module",
     href: "/commerce-modules/customer",
-    showLinkIcon: false
   },
   {
-    startIcon: <PuzzleSolid />,
-    title: "More Modules",
-    href: "/commerce-modules",
-    showLinkIcon: false
+    type: "filler",
+    text: "Find more modules for your commerce application.",
+    href: "/commerce-modules"
   }
 ]} />
 
@@ -80,28 +74,25 @@ Follow the [Medusa v2 Docs](!docs!) to become an advanced Medusa developer.
 
 <CardList items={[
   {
-    startIcon: <Stripe className="[&>path]:fill-medusa-fg-subtle" />,
+    icon: Stripe,
     title: "Stripe",
+    iconClassName: "[&_path]:fill-medusa-fg-subtle",
     href: "/commerce-modules/payment/payment-provider/stripe",
-    showLinkIcon: false
   },
   {
-    startIcon: <EnvelopeSolid />,
+    icon: EnvelopeSolid,
     title: "SendGrid",
     href: "/architectural-modules/notification/sendgrid",
-    showLinkIcon: false
   },
   {
-    startIcon: <DocumentTextSolid />,
+    icon: DocumentTextSolid,
     title: "S3",
     href: "/architectural-modules/file/s3",
-    showLinkIcon: false
   },
   {
-    startIcon: <SquaresPlusSolid />,
-    title: "More Integrations",
-    href: "/integrations",
-    showLinkIcon: false
+    type: "filler",
+    text: "Integrate other third-party services to your application.",
+    href: "/integrations"
   }
 ]} />
 
@@ -111,40 +102,24 @@ Follow the [Medusa v2 Docs](!docs!) to become an advanced Medusa developer.
 
 <CardList items={[
   {
-    startIcon: <BuildingStorefront />,
+    icon: BuildingStorefront,
     title: "Marketplace",
     href: "/recipes/marketplace",
-    showLinkIcon: false
   },
   {
-    startIcon: <CreditCardSolid />,
+    icon: CreditCardSolid,
     title: "Subscriptions",
     href: "/recipes/subscriptions",
-    showLinkIcon: false
   },
   {
-    startIcon: <PhotoSolid />,
+    icon: PhotoSolid,
     title: "Digital Products",
     href: "/recipes/digital-products",
-    showLinkIcon: false
   },
   {
-    startIcon: <ShoppingCartSolid />,
-    title: "Ecommerce",
-    href: "/recipes/ecommerce",
-    showLinkIcon: false
-  },
-  {
-    startIcon: <ClockSolid />,
-    title: "Commerce Automation",
-    href: "/recipes/commerce-automation",
-    showLinkIcon: false
-  },
-  {
-    startIcon: <BuildingsSolid />,
-    title: "B2B",
-    href: "/recipes/b2b",
-    showLinkIcon: false
+    type: "filler",
+    text: "Find more recipes to implement your use case.",
+    href: "/recipes"
   }
 ]} />
 
@@ -154,15 +129,14 @@ Follow the [Medusa v2 Docs](!docs!) to become an advanced Medusa developer.
 
 <CardList itemsPerRow={2} items={[
   {
-    startIcon: <CommandLineSolid />,
+    icon: CommandLineSolid,
     title: "Medusa CLI",
     href: "/medusa-cli",
-    showLinkIcon: false
   },
   {
-    startIcon: <NextJs />,
+    icon: NextJs,
+    iconClassName: "[&_path]:fill-medusa-fg-subtle",
     title: "Next.js Starter",
     href: "/nextjs-starter",
-    showLinkIcon: false
   },
 ]} />