feat: add storybook for card component (#2900)

Co-authored-by: Piyush Gupta <piyushguptaa2z123@gmail.com>

packages/ui/Card/stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { BellRing } from "lucide-react";
+import { Card } from "./index";
+
+const meta = {
+  title: "ui/Card",
+  component: Card,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `The **card** component is used to display a card with a label, description, and optional icon. It can also display a status and buttons for connecting and viewing documentation.`,
+      },
+    },
+    argTypes: {
+      icon: { control: "text" },
+    },
+  },
+} satisfies Meta<typeof Card>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    label: "Card Label",
+    description: "This is the description of the card.",
+    connectText: "Connect",
+    connectHref: "#",
+    connectNewTab: false,
+    docsText: "Docs",
+    docsHref: "#",
+    docsNewTab: false,
+    connected: true,
+    statusText: "Connected",
+  },
+};
+
+export const Disconnected: Story = {
+  args: {
+    label: "Card Label",
+    description: "This is the description of the card.",
+    connectText: "Connect",
+    connectHref: "#",
+    connectNewTab: false,
+    docsText: "Docs",
+    docsHref: "#",
+    docsNewTab: false,
+    connected: false,
+    statusText: "Disconnected",
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    label: "Card Label",
+    description: "This is the description of the card.",
+    connectText: "Connect",
+    connectHref: "#",
+    connectNewTab: false,
+    docsText: "Docs",
+    docsHref: "#",
+    docsNewTab: false,
+    connected: true,
+    statusText: "Connected",
+    icon: <BellRing />,
+  },
+};