added product card! 💄

Author: ariflogs

app/(marketing)/page.tsx

@@ -1,5 +1,4 @@
 import {
-  Accordion,
   Avatar,
   Badge,
   BasicCard,

config/components.ts

@@ -14,6 +14,10 @@ export const componentConfig = {
       name: "button",
       filePath: "packages/ui/Buttons/Button.tsx",
     },
+    card: {
+      name: "card",
+      filePath: "packages/ui/Cards/Card.tsx",
+    },
   },
   examples: {
     "accordion-style-default": {
@@ -82,6 +86,11 @@ export const componentConfig = {
       filePath: "preview/components/card-style-default.tsx",
       preview: lazy(() => import("@/preview/components/card-style-default")),
     },
+    "card-style-commerce": {
+      name: "card-style-commerce",
+      filePath: "preview/components/card-style-commerce.tsx",
+      preview: lazy(() => import("@/preview/components/card-style-commerce")),
+    },
     "input-style-default": {
       name: "input-style-default",
       filePath: "preview/components/input-style-default.tsx",

content/docs/components/card.mdx

@@ -1,11 +1,29 @@
 ---
 title: Card
 description: A customizable card component to visualize your content. 📝
-lastUpdated: 8 Oct, 2024
+lastUpdated: 20 Oct, 2024
 ---
 
-### Title with description
+<ComponentShowcase name="card-style-default" />
+<br />
+<br />
 
-<hr />
+## Installation
+
+#### Copy the code 👇 into your project:
+
+<ComponentSource name="card" />
 <br />
+<br />
+
+## Examples
+
+### Title with description
+
 <ComponentShowcase name="card-style-default" />
+<br />
+<br />
+
+### Product card
+
+<ComponentShowcase name="card-style-commerce" />

packages/ui/Cards/Card.tsx

@@ -1,6 +1,7 @@
 import { cn } from "@/lib/utils";
 import { HTMLAttributes } from "react";
 import { H3 } from "../Typography";
+import { Content } from "next/font/google";
 
 interface ICardProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
@@ -35,10 +36,15 @@ const CardDescription = ({ className, ...props }: ICardProps) => (
   <p className={cn("text-muted", className)} {...props} />
 );
 
+const CardContent = ({ className, ...props }: ICardProps) => {
+  return <div className={cn("p-4", className)} {...props} />;
+};
+
 const CardComponent = Object.assign(Card, {
   Header: CardHeader,
   Title: CardTitle,
   Description: CardDescription,
+  Content: CardContent,
 });
 
 export { CardComponent as Card };

preview/components/card-style-commerce.tsx

@@ -0,0 +1,22 @@
+import { Button, Card } from "@/packages/ui";
+
+export default function CommerceCard() {
+  return (
+    <Card className="w-[350px] shadow-none hover:shadow-none">
+      <Card.Content className="pb-0">
+        <img
+          src="/images/gameboy.jpg"
+          className="w-full h-full"
+          alt="Gameboy"
+        />
+      </Card.Content>
+      <Card.Header className="pb-0">
+        <Card.Title>Classic 8-bit Gameboy</Card.Title>
+      </Card.Header>
+      <Card.Content className="flex justify-between items-center">
+        <p className="text-lg font-semibold">$29.90</p>
+        <Button>Add to cart</Button>
+      </Card.Content>
+    </Card>
+  );
+}

public/images/gameboy.jpg

@@ -5,6 +5,7 @@ const config: Config = {
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./packages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./preview/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {