"use client" import { ArrowUpRightIcon } from "lucide-react" import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" import { Badge } from "@/components/ui/badge" import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig, } from "@/components/ui/chart" import { CropMarksGrid, CropMarksGridItem, } from "@/components/ui/crop-marks" const installs = [ { month: "Jan", installs: 1240 }, { month: "Feb", installs: 1480 }, { month: "Mar", installs: 1390 }, { month: "Apr", installs: 1760 }, { month: "May", installs: 1980 }, { month: "Jun", installs: 2410 }, ] const installsConfig = { installs: { label: "Installs", color: "#5b8def" }, } satisfies ChartConfig const registry = [ { name: "Components", count: 11, className: "bg-[#5b8def]" }, { name: "Shaders", count: 26, className: "bg-muted-foreground/30" }, ] const registryTotal = registry.reduce((sum, part) => sum + part.count, 0) const uptime = Array.from({ length: 13 }, (_, index) => ({ week: index + 1, incident: index === 8, })) /** * A metrics section on a Crop Marks bento: the hero tile spans both * rows with the headline figure and its trend chart, and the two tiles * stacked beside it each pair one number with a small visual — a total * over its breakdown bar, a rate over its weekly tracker. Every tile * shares the same anatomy: label and value at the top, the visual * pinned to the bottom. Three columns keep the side tiles readable * from a 560px docs frame up to a full content column. Give the parent * room for the marks' overshoot. */ export function Stats01() { return (

Installs

2.4M

vs. the previous six months

Jan – Jun

} cursor={false} />

In the registry

{registryTotal}

Uptime

13 weeks

99.98%

) }