Page parts

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { DashboardLayout } from "@/components/ui/page-parts"
import { LineChart } from "@/components/ui/line-chart"
import { MetricsDashboard } from "@/components/ui/metrics-dashboard"

const rng = (seed: number) => { let s = seed; return () => ((s = (s * 1664525 + 1013904223) % 4294967296) / 4294967296); };

export function PagePartsDemo() {
  const [range, setRange] = useState("30d");
  const r = rng(3);
  const data = Array.from({ length: 14 }, (_, i) => ({ id: `d${i}`, label: `Oct ${i + 8}`, values: { visits: Math.round(900 + i * 40 + r() * 200), signups: Math.round(60 + i * 3 + r() * 20) } }));
  const spark = (n: number) => Array.from({ length: 12 }, (_, i) => n * (0.8 + i * 0.02 + r() * 0.1));
  return (
    <DashboardLayout title="Overview" description="How the product is doing this month." actions={<Button size="sm">Export</Button>}
      kpis={<MetricsDashboard range={range} onRangeChange={setRange} metrics={[{ id: "a", label: "Visits", value: "18,240", delta: 8.2, series: spark(100) }, { id: "b", label: "Sign-ups", value: "612", delta: 4.1, series: spark(100) }, { id: "c", label: "Conversion", value: "3.4%", delta: -0.3, series: spark(100) }, { id: "d", label: "Revenue", value: "$42.1k", delta: 11.6, series: spark(100) }]} />}
      main={<LineChart label="Visits and sign-ups" data={data} series={[{ id: "visits", label: "Visits" }, { id: "signups", label: "Sign-ups" }]} />}
      aside={<><div className="grid gap-2 rounded-xl border border-border p-4"><h4 className="text-sm font-semibold">Recent activity</h4><ul className="grid gap-2 text-sm text-muted-foreground"><li>Maya upgraded to Team</li><li>Ravi invited 3 people</li><li>A webhook was retried</li><li>Noor published a dashboard</li></ul></div></>} />
  );
}