Weekly Installs Card

"use client"

import { Line, LineChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { ChartContainer, type ChartConfig } from "@/components/ui/chart"
import { Separator } from "@/components/ui/separator"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Installs",
  body: "Components added to projects, week by week.",
  unit: "this month",
  window: "Last 8 weeks",
  change: "+20.1% on last month",
} as const

const VALUE = 48120

const data = [
  { installs: 10400 },
  { installs: 14405 },
  { installs: 9400 },
  { installs: 8200 },
  { installs: 7000 },
  { installs: 9600 },
  { installs: 11244 },
  { installs: 26475 },
]

const chartConfig = {
  installs: { label: "Installs" },
} satisfies ChartConfig

const LABEL =
  "font-mono text-xs tracking-widest text-muted-foreground uppercase"

// The line is a hairline; only the latest week takes the accent.
function LatestDot(props: { cx?: number; cy?: number; index?: number }) {
  if (props.index !== data.length - 1) return null
  return <circle cx={props.cx} cy={props.cy} r={3} fill="var(--art-accent)" />
}

export default function AppStats() {
  return (
    <Card className="mx-auto w-full max-w-sm gap-8">
      <CardHeader>
        <CardTitle>{COPY.title}</CardTitle>
        <CardDescription>{COPY.body}</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-8">
        <span className="flex items-baseline gap-2">
          <span className="text-3xl font-medium tabular-nums">
            {VALUE.toLocaleString("en-US")}
          </span>
          <span className={LABEL}>{COPY.unit}</span>
        </span>
        <figure className="flex flex-col gap-3">
          <ChartContainer config={chartConfig} className="h-28 w-full">
            <LineChart
              data={data}
              margin={{ top: 6, right: 6, left: 6, bottom: 6 }}
            >
              <Line
                type="monotone"
                dataKey="installs"
                stroke="var(--muted-foreground)"
                strokeWidth={1.5}
                dot={<LatestDot />}
                activeDot={false}
                isAnimationActive={false}
              />
            </LineChart>
          </ChartContainer>
          <Separator />
          <figcaption className="flex items-baseline justify-between">
            <span className={LABEL}>{COPY.window}</span>
            <span className="text-sm/7 tabular-nums">{COPY.change}</span>
          </figcaption>
        </figure>
      </CardContent>
    </Card>
  )
}

pnpm dlx shadcn add @01orbital/app-stats

npx shadcn add @01orbital/app-stats

yarn shadcn add @01orbital/app-stats

bunx --bun shadcn add @01orbital/app-stats