From a7b37858dbd88c6e7b87c9caa97048abd903261a Mon Sep 17 00:00:00 2001
From: David Totrashvili <8580261+totraev@users.noreply.github.com>
Date: Thu, 16 Jan 2025 22:53:07 +0500
Subject: [PATCH] feat: add Card component (#88)

---
 .changeset/moody-dryers-doubt.md     |  5 +++++
 src/components/Card/Card.css         |  3 +++
 src/components/Card/Card.stories.tsx | 16 ++++++++++++++++
 src/components/Card/Card.tsx         | 12 ++++++++++++
 src/components/Card/index.tsx        |  1 +
 src/index.tsx                        |  1 +
 6 files changed, 38 insertions(+)
 create mode 100644 .changeset/moody-dryers-doubt.md
 create mode 100644 src/components/Card/Card.css
 create mode 100644 src/components/Card/Card.stories.tsx
 create mode 100644 src/components/Card/Card.tsx
 create mode 100644 src/components/Card/index.tsx

diff --git a/.changeset/moody-dryers-doubt.md b/.changeset/moody-dryers-doubt.md
new file mode 100644
index 0000000..3be1cb4
--- /dev/null
+++ b/.changeset/moody-dryers-doubt.md
@@ -0,0 +1,5 @@
+---
+"@babylonlabs-io/bbn-core-ui": minor
+---
+
+add Card component
diff --git a/src/components/Card/Card.css b/src/components/Card/Card.css
new file mode 100644
index 0000000..137583b
--- /dev/null
+++ b/src/components/Card/Card.css
@@ -0,0 +1,3 @@
+.bbn-card {
+  @apply rounded border border-primary-dark/20 bg-secondary-contrast p-6;
+}
diff --git a/src/components/Card/Card.stories.tsx b/src/components/Card/Card.stories.tsx
new file mode 100644
index 0000000..30c1f43
--- /dev/null
+++ b/src/components/Card/Card.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Card } from "./Card";
+
+const meta: Meta<typeof Card> = {
+  component: Card,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { children: "Card" },
+};
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
new file mode 100644
index 0000000..7fdafa5
--- /dev/null
+++ b/src/components/Card/Card.tsx
@@ -0,0 +1,12 @@
+import { type PropsWithChildren, createElement } from "react";
+import { twJoin } from "tailwind-merge";
+import "./Card.css";
+
+interface CardProps extends PropsWithChildren {
+  as?: string;
+  className?: string;
+}
+
+export function Card({ as = "div", className, children }: CardProps) {
+  return createElement(as, { className: twJoin("bbn-card", className) }, children);
+}
diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
new file mode 100644
index 0000000..fbaf43c
--- /dev/null
+++ b/src/components/Card/index.tsx
@@ -0,0 +1 @@
+export { Card } from "./Card";
diff --git a/src/index.tsx b/src/index.tsx
index 8c5f96e..d731bf8 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -12,6 +12,7 @@ export * from "./components/Portal";
 export * from "./components/Loader";
 export * from "./components/Table";
 export * from "./components/Popover";
+export * from "./components/Card";
 
 export * from "./widgets/form/Form";
 export * from "./widgets/form/NumberField";