Initial commit

apps/web/components/demo-subscriptions.tsx

@@ -0,0 +1,65 @@
+"use client";
+// Example data from ShadCN: https://github.com/shadcn-ui/ui/blob/0fae3fd93ae749aca708bdfbbbeddc5d576bfb2e/apps/www/registry/default/example/cards/stats.tsx#L61
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Bar, BarChart, ResponsiveContainer } from "recharts";
+import { twColourConfig } from "@/lib/twConfig";
+
+const data = [
+  {
+    revenue: 10400,
+    subscription: 240,
+  },
+  {
+    revenue: 14405,
+    subscription: 300,
+  },
+  {
+    revenue: 9400,
+    subscription: 200,
+  },
+  {
+    revenue: 8200,
+    subscription: 278,
+  },
+  {
+    revenue: 7000,
+    subscription: 189,
+  },
+  {
+    revenue: 9600,
+    subscription: 239,
+  },
+  {
+    revenue: 11244,
+    subscription: 278,
+  },
+  {
+    revenue: 26475,
+    subscription: 189,
+  },
+];
+
+export function DemoSubscriptions() {
+  return (
+    <Card className="w-full">
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-base font-normal">Subscriptions</CardTitle>
+      </CardHeader>
+      <CardContent className="text-left">
+        <div className="text-2xl font-bold">+2350</div>
+        <p className="text-xs text-muted-foreground">+180.1% from last month</p>
+        <div className="mt-4 h-[110px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart data={data}>
+              <Bar
+                dataKey="subscription"
+                fill={twColourConfig.primary.DEFAULT}
+              />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}