Add chart on chart intro page

tinytek-io · Jul 15, 2024 · eff9489 · eff9489
1 parent cb2b059
commit eff9489
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/docs/charts/introduction.mdx b/docs/charts/introduction.mdx
@@ -1,2 +1,9 @@
 # Charts
 
+import { Card } from '@/ui/components/Card';
+import { chartDataMedium } from "@/docs/charts/_lib/data";
+import { BarChart } from '@/ui/charts/BarChart';
+
+<Card className="h-64 w-96">
+  <BarChart data={chartDataMedium} isAnimationActive={false} />
+</Card>
diff --git a/ui/components/Card.tsx b/ui/components/Card.tsx
@@ -2,7 +2,7 @@ import type { PropsWithChildren } from "react";
 import { tv } from "tailwind-variants";
 
 const cardStyles = tv({
-  base: "flex flex-col gap-2 bg-card text-card-foreground border-2 border-border rounded-lg shadow-sm p-2 w-fit items-center"
+  base: "flex flex-col gap-2 bg-card text-card-foreground border-2 border-border rounded-lg shadow-sm p-4 w-fit items-center justify-center",
 });
 
 type CardProps = {