updated core button component

Author: ariflogs

app/(sink)/demo/components/page.tsx

@@ -11,6 +11,7 @@ import {
   TabsTrigger,
   TabsTriggerList,
 } from "@/packages/ui";
+import { Card } from "@/packages/ui/Cards/Card";
 import React from "react";
 
 export default function page() {
@@ -67,6 +68,21 @@ export default function page() {
           </Accordion.Item>
         </Accordion>
       </div>
+
+      <div>
+        <Card>
+          <Card.Header>
+            <Card.Title>Card Title</Card.Title>
+            <Card.Description>Card Description</Card.Description>
+          </Card.Header>
+        </Card>
+        <Accordion type="single" collapsible>
+          <Accordion.Item value="item-1">
+            <Accordion.Header>Head...</Accordion.Header>
+            <Accordion.Content>Content...</Accordion.Content>
+          </Accordion.Item>
+        </Accordion>
+      </div>
     </div>
   );
 }

packages/ui/Cards/Card.tsx

@@ -0,0 +1,44 @@
+import { cn } from "@/lib/utils";
+import { HTMLAttributes } from "react";
+import { H3 } from "../Typography";
+
+interface ICardProps extends HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+const Card = ({ className, ...props }: ICardProps) => {
+  return (
+    <div
+      className={cn(
+        "inline-block border-2 border-black shadow-md cursor-pointer transition-all hover:shadow-xs",
+        className
+      )}
+      {...props}
+    />
+  );
+};
+
+const CardHeader = ({ className, ...props }: ICardProps) => {
+  return (
+    <div
+      className={cn("flex flex-col justify-start p-4", className)}
+      {...props}
+    />
+  );
+};
+
+const CardTitle = ({ className, ...props }: ICardProps) => {
+  return <H3 className={cn("mb-2", className)} {...props} />;
+};
+
+const CardDescription = ({ className, ...props }: ICardProps) => (
+  <p className={cn("text-muted", className)} {...props} />
+);
+
+const CardComponent = Object.assign(Card, {
+  Header: CardHeader,
+  Title: CardTitle,
+  Description: CardDescription,
+});
+
+export { CardComponent as Card };

packages/ui/Cards/index.ts

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

preview/components/card-style-default.tsx

@@ -1,10 +1,15 @@
+import { Card } from "@/packages/ui";
+
 export default 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>
+    <Card>
+      <Card.Header>
+        <Card.Title>This is Card Title</Card.Title>
+        <Card.Description>
+          I can not find what to write here.. so imagine I wrote some good
+          stuff.
+        </Card.Description>
+      </Card.Header>
+    </Card>
   );
 }