added card for metrics

src/components/charts/Metric/Metric.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Metric from "./Metric";
+
+const meta: Meta<typeof Metric> = {
+    title: "Charts/Metric",
+    component: Metric,
+    parameters: {
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+        layout: "centered",
+    },
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Metric>;
+
+export const Default: Story = {
+    args: {
+        title: "CPC",
+        value: 2.5,
+        valuePrefix: "$",
+        change: 0.5,
+        changeType: "up",
+    },
+};

src/components/charts/Metric/Metric.tsx

@@ -0,0 +1,31 @@
+import { ArrowDown, ArrowUp } from "@phosphor-icons/react";
+import { Card, Flex, Typography } from "antd";
+
+
+export type MetricProps = {
+    title: string;
+    value: number;
+    valuePrefix?: string;
+    change: number;
+    changeType?: "up" | "down";
+}
+
+export default function Metric({ title, value, change, valuePrefix, changeType }: MetricProps) {
+    return (
+        <Card>
+            <Flex gap={4} justify="center" align="center" vertical>
+                <Typography.Text type="secondary">{title}</Typography.Text>
+                <Typography.Text>
+                    {valuePrefix && `${valuePrefix} `}
+                    {value}
+                </Typography.Text>
+                <Flex align="center">
+                    <Typography.Text type="success">
+                        {change}
+                    </Typography.Text>
+                    {changeType === "up" ? <ArrowUp /> : <ArrowDown />}
+                </Flex>
+            </Flex>
+        </Card>
+    )
+}

src/components/index.ts

@@ -32,8 +32,10 @@ export { default as AppThemeProvider } from "./AppThemeProvider";
 
 export { useThemeManager } from "./useThemeManager";
 
-export { default as Piechart } from "../components/charts/Piechart";
-export type { PiechartProps } from "../components/charts/Piechart";
+export { default as Piechart } from "./charts/Piechart/Piechart";
+export type { PiechartProps } from "./charts/Piechart/Piechart";
+
+export { default as Metric } from "./charts/Metric/Metric";
 
 // Import CSS files
 import "../customStyles.css";