structuring

2025-02-19 20:23:34 +01:00
parent 4af62033c6
commit 4fa5d97ae9
10 changed files with 38 additions and 79 deletions
@@ -0,0 +1,100 @@
+'use client';
+
+import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts';
+
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import {
+    ChartConfig,
+    ChartContainer,
+    ChartTooltip,
+    ChartTooltipContent,
+} from '@/components/ui/chart';
+
+const chartConfig = {
+    views: {
+        label: 'Views',
+        color: 'hsl(var(--foreground))',
+    },
+} satisfies ChartConfig;
+
+export default function Engagement({
+    chartData,
+}: {
+    chartData: {
+        week: string;
+        views: number;
+    }[];
+}) {
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>Post engagement</CardTitle>
+                <CardDescription>
+                    Showing engagements for the last week
+                </CardDescription>
+            </CardHeader>
+            <CardContent>
+                <ChartContainer
+                    config={chartConfig}
+                    className="w-full xl:w-[680px] lg:h-[270px] 2xl:w-[880px]"
+                >
+                    <AreaChart
+                        accessibilityLayer
+                        data={chartData}
+                        margin={{
+                            left: 12,
+                            right: 12,
+                        }}
+                    >
+                        <CartesianGrid vertical={false} />
+                        <XAxis
+                            dataKey="week"
+                            tickLine={false}
+                            axisLine={false}
+                            tickMargin={8}
+                            tickFormatter={(value) => value.slice(0, 3)}
+                        />
+                        <ChartTooltip
+                            cursor={false}
+                            content={<ChartTooltipContent indicator="line" />}
+                        />
+                        <defs>
+                            <linearGradient
+                                id="fillViews"
+                                x1="0"
+                                y1="0"
+                                x2="0"
+                                y2="1"
+                            >
+                                <stop
+                                    offset="5%"
+                                    stopColor="var(--color-views)"
+                                    stopOpacity={0.8}
+                                />
+                                <stop
+                                    offset="95%"
+                                    stopColor="var(--color-views)"
+                                    stopOpacity={0.1}
+                                />
+                            </linearGradient>
+                        </defs>
+
+                        <Area
+                            dataKey="views"
+                            type="natural"
+                            fill="url(#fillViews)"
+                            fillOpacity={0.4}
+                            stroke="var(--color-views)"
+                        />
+                    </AreaChart>
+                </ChartContainer>
+            </CardContent>
+        </Card>
+    );
+}