Cards, Accordion ✅

Author: ariflogs

app/page.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, H1, H2, H3, H4, H5, H6, Input, Textarea } from "@/components";
+import { Button, H1, H2, H3, H4, H5, H6, Input, Textarea, Accordion, BasicCard, ProductCard } from "@/components";
 
 export default function page() {
   return (
@@ -30,10 +30,15 @@ export default function page() {
         </div>
 
         <div>
-          <H3>Forms</H3>
-          <Input />
+          <H3>Accordions</H3>
+          <Accordion />
+        </div>
+
+        <div>
+          <H3>Cards</H3>
+          <BasicCard />
           <div className="h-4"></div>
-          <Textarea />
+          <ProductCard />
         </div>
       </div>
     </div>

components/Accordions/Accordion.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+export function Accordion() {
+  return (
+    <div className="space-y-4 mx-auto">
+      <details className="border-2 border-black shadow-md hover:shadow-sm transition-all overflow-hidden">
+        <summary className="px-4 py-2 font-head text-black cursor-pointer focus:outline-none">
+          Accordion Item 1
+        </summary>
+        <div className="px-4 py-2 font-body bg-white text-gray-700">
+          This is the content of the first accordion item. It is styled with
+          Tailwind CSS.
+        </div>
+      </details>
+
+      <details className="border-2 border-black shadow-md hover:shadow-sm transition-all overflow-hidden">
+        <summary className="px-4 py-2 font-head text-black cursor-pointer focus:outline-none">
+          Accordion Item 2
+        </summary>
+        <div className="px-4 py-2 font-body bg-white text-gray-700">
+          This is the content of the second accordion item. It has a similar
+          style to maintain consistency.
+        </div>
+      </details>
+
+      <details className="border-2 border-black shadow-md hover:shadow-sm transition-all overflow-hidden">
+        <summary className="px-4 py-2 font-head text-black cursor-pointer focus:outline-none">
+          Accordion Item 3
+        </summary>
+        <div className="px-4 py-2 font-body bg-white text-gray-700">
+          This is the content of the third accordion item. The details element
+          handles the toggle behavior.
+        </div>
+      </details>
+    </div>
+  );
+}

components/Accordions/index.ts

@@ -0,0 +1 @@
+export * from "./Accordion"

components/Cards/BasicCard.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export function BasicCard() {
+  return (
+    <div className="inline-block border-2 border-black p-4 shadow-md cursor-pointer transition-all hover:shadow-xs">
+      <h4 className="font-head text-2xl font-medium mb-1">
+        This is card Title
+      </h4>
+      <p>This is card description.</p>
+    </div>
+  );
+}

components/Cards/ProductCard.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+export function ProductCard() {
+  return (
+    <div className="max-w-80 p-4 border-2 border-black">
+      <img
+        alt="product image"
+        src="https://images.unsplash.com/photo-1596998791568-386ef5297c2e?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      />
+      <div className="mt-4 space-y-4">
+        <h3 className="font-head text-3xl font-medium mb-1">Classic Gameboy</h3>
+        <div className="flex justify-between items-center">
+          <span className="text-lg font-semibold">$29.99</span>
+          <button className="px-6 py-2 text-sm font-head bg-primary-400 border-2 border-black shadow-md hover:shadow-xs transition-all">
+            Add To Cart
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

components/Cards/index.ts

@@ -0,0 +1,2 @@
+export * from "./BasicCard";
+export * from "./ProductCard";

components/index.ts

@@ -1,3 +1,5 @@
 export * from "./Buttons"
 export * from "./Form"
-export * from "./Typography"
+export * from "./Typography"
+export * from "./Accordions"
+export * from "./Cards"