{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-traffic",
  "type": "registry:item",
  "title": "Card Traffic",
  "description": "A website traffic card component with line chart and statistics.",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "https://roiui.com/r/badge.json",
    "https://roiui.com/r/card.json",
    "https://roiui.com/r/chart.json"
  ],
  "files": [
    {
      "path": "registry/brook/blocks/card-traffic/components/card-traffic.tsx",
      "content": "\"use client\";\n\nimport { CartesianGrid, Line, LineChart, XAxis, YAxis } from \"recharts\";\nimport { Badge } from \"@/registry/brook/ui/badge/badge\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/registry/brook/ui/card/card\";\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from \"@/registry/brook/ui/chart/chart\";\nimport styles from \"./card-traffic.module.css\";\n\ntype TrafficDataPoint = {\n  date: number;\n  desktop: number;\n  mobile: number;\n};\n\ntype CardTrafficProps = {\n  data: TrafficDataPoint[];\n};\n\nconst CHART_START_YEAR = 2025;\nconst CHART_START_MONTH = 6;\nconst CHART_START_DAY = 14;\n\nconst formatDate = (value: unknown) => {\n  const dayNumber = Math.round(Number(value));\n\n  const startDate = new Date(CHART_START_YEAR, CHART_START_MONTH, CHART_START_DAY);\n  const currentDate = new Date(startDate);\n  currentDate.setDate(startDate.getDate() + (dayNumber - 1));\n\n  return currentDate.toLocaleDateString(\"en-US\", {\n    month: \"short\",\n    day: \"numeric\",\n  });\n};\n\nconst chartConfig = {\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-1)\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig;\n\nexport function CardTraffic({ data }: CardTrafficProps) {\n  return (\n    <Card\n      className={styles.cardContainer}\n      style={{\n        maxWidth: \"600px\",\n        width: \"100%\",\n      }}\n    >\n      <CardHeader>\n        <CardTitle>Website Traffic</CardTitle>\n      </CardHeader>\n      <CardContent className={styles.chartContainer}>\n        <div style={{ width: \"100%\", height: \"100%\" }}>\n          <ChartContainer config={chartConfig}>\n            <LineChart data={data}>\n              <CartesianGrid strokeDasharray=\"3 3\" vertical={false} />\n              <XAxis dataKey=\"date\" hide={true} tickFormatter={formatDate} />\n              <YAxis hide={true} />\n              <ChartTooltip content={<ChartTooltipContent />} />\n              <Line\n                animationDuration={800}\n                dataKey=\"mobile\"\n                dot={false}\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                type=\"monotone\"\n              />\n              <Line\n                animationBegin={200}\n                animationDuration={800}\n                dataKey=\"desktop\"\n                dot={false}\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                type=\"monotone\"\n              />\n            </LineChart>\n          </ChartContainer>\n        </div>\n      </CardContent>\n\n      <div className={styles.statsGrid}>\n        <div className={styles.statCard}>\n          <div className={styles.statHeader}>\n            <span className={styles.statLabel}>Mobile</span>\n          </div>\n          <span className={styles.statNumber}>25,010</span>\n        </div>\n\n        <div className={styles.statCard}>\n          <div className={styles.statHeader}>\n            <span className={styles.statLabel}>Desktop</span>\n          </div>\n          <span className={styles.statNumber}>12,840</span>\n        </div>\n\n        <div className={styles.statCard}>\n          <div className={styles.statHeader}>\n            <span className={styles.statLabel}>Bounce Rate</span>\n            <Badge size=\"sm\" variant=\"success\">\n              -3.4%\n            </Badge>\n          </div>\n          <span className={styles.statNumber}>24.1%</span>\n        </div>\n\n        <div className={styles.statCard}>\n          <div className={styles.statHeader}>\n            <span className={styles.statLabel}>Conversion</span>\n            <Badge size=\"sm\" variant=\"destructive\">\n              -0.9%\n            </Badge>\n          </div>\n          <span className={styles.statNumber}>2.8%</span>\n        </div>\n      </div>\n    </Card>\n  );\n}\n",
      "type": "registry:file",
      "target": "~/components/blocks/card-traffic/card-traffic.tsx"
    },
    {
      "path": "registry/brook/blocks/card-traffic/components/card-traffic.module.css",
      "content": ".cardContainer {\n  width: 100%;\n  max-width: 600px;\n}\n\n.chartContainer {\n  height: 200px;\n  padding: 0;\n}\n\n.statsGrid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-rows: 1fr 1fr;\n  border-top: 0.5px solid oklch(from var(--border) l c h / 0.7);\n  margin: 0 -24px -24px -24px;\n}\n\n.statCard {\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  border-right: 0.5px solid oklch(from var(--border) l c h / 0.7);\n  border-bottom: 0.5px solid oklch(from var(--border) l c h / 0.7);\n}\n\n.statCard:nth-child(2n) {\n  border-right: none;\n}\n\n.statCard:nth-child(n + 3) {\n  border-bottom: none;\n}\n\n@media (max-width: 640px) {\n  .cardContainer {\n    max-width: 100%;\n  }\n\n  .chartContainer {\n    height: 200px;\n  }\n\n  .statsGrid {\n    margin: 0 -20px -20px -20px;\n  }\n\n  .statCard {\n    padding: 1rem;\n    gap: 0.5rem;\n  }\n\n  .statLabel {\n    font-size: 0.875rem;\n  }\n\n  .statNumber {\n    font-size: 1.75rem;\n    font-weight: 700;\n  }\n}\n\n@media (max-width: 400px) {\n  .statsGrid {\n    grid-template-columns: 1fr;\n    grid-template-rows: auto;\n    margin: 0 -20px -20px -20px;\n  }\n\n  .statCard {\n    border-right: none;\n    border-bottom: 1px solid var(--border);\n    padding: 1rem;\n  }\n\n  .statCard:nth-child(2n) {\n    border-right: none;\n  }\n\n  .statCard:nth-child(n + 3) {\n    border-bottom: 1px solid var(--border);\n  }\n\n  .statCard:last-child {\n    border-bottom: none;\n  }\n\n  .statNumber {\n    font-size: 1.5rem;\n  }\n}\n\n.statHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.statLabel {\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--muted-foreground);\n  font-weight: 500;\n}\n\n.statNumber {\n  font-size: 32px;\n  font-weight: 700;\n  color: var(--foreground);\n  line-height: 1;\n  font-variant-numeric: tabular-nums;\n}\n",
      "type": "registry:file",
      "target": "~/components/blocks/card-traffic/card-traffic.module.css"
    },
    {
      "path": "registry/brook/blocks/card-traffic/data.json",
      "content": "[\n  { \"date\": 1, \"desktop\": 12.3, \"mobile\": 28.7 },\n  { \"date\": 2, \"desktop\": 11.8, \"mobile\": 29.2 },\n  { \"date\": 3, \"desktop\": 13.1, \"mobile\": 31.4 },\n  { \"date\": 4, \"desktop\": 12.9, \"mobile\": 30.8 },\n  { \"date\": 5, \"desktop\": 14.2, \"mobile\": 33.1 },\n  { \"date\": 6, \"desktop\": 13.7, \"mobile\": 32.3 },\n  { \"date\": 7, \"desktop\": 11.5, \"mobile\": 27.9 },\n  { \"date\": 8, \"desktop\": 10.8, \"mobile\": 26.4 },\n  { \"date\": 9, \"desktop\": 12.6, \"mobile\": 29.8 },\n  { \"date\": 10, \"desktop\": 13.9, \"mobile\": 32.7 },\n  { \"date\": 11, \"desktop\": 14.1, \"mobile\": 33.9 },\n  { \"date\": 12, \"desktop\": 13.3, \"mobile\": 31.8 },\n  { \"date\": 13, \"desktop\": 12.7, \"mobile\": 30.2 },\n  { \"date\": 14, \"desktop\": 11.9, \"mobile\": 28.6 },\n  { \"date\": 15, \"desktop\": 13.8, \"mobile\": 32.4 },\n  { \"date\": 16, \"desktop\": 14.5, \"mobile\": 34.2 },\n  { \"date\": 17, \"desktop\": 13.2, \"mobile\": 31.1 },\n  { \"date\": 18, \"desktop\": 12.4, \"mobile\": 29.7 },\n  { \"date\": 19, \"desktop\": 14.8, \"mobile\": 35.1 },\n  { \"date\": 20, \"desktop\": 15.2, \"mobile\": 36.3 },\n  { \"date\": 21, \"desktop\": 11.6, \"mobile\": 28.2 },\n  { \"date\": 22, \"desktop\": 10.9, \"mobile\": 26.8 },\n  { \"date\": 23, \"desktop\": 13.4, \"mobile\": 32.1 },\n  { \"date\": 24, \"desktop\": 14.7, \"mobile\": 34.8 },\n  { \"date\": 25, \"desktop\": 13.1, \"mobile\": 31.7 },\n  { \"date\": 26, \"desktop\": 12.8, \"mobile\": 30.4 },\n  { \"date\": 27, \"desktop\": 14.3, \"mobile\": 33.6 },\n  { \"date\": 28, \"desktop\": 15.1, \"mobile\": 35.7 },\n  { \"date\": 29, \"desktop\": 11.7, \"mobile\": 28.9 },\n  { \"date\": 30, \"desktop\": 12.2, \"mobile\": 29.4 }\n]\n",
      "type": "registry:file",
      "target": "~/components/blocks/card-traffic/data.json"
    }
  ]
}