{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-traffic-tailwind",
  "type": "registry:item",
  "title": "Card Traffic (Tailwind)",
  "description": "A website traffic card component with line chart and statistics.",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "https://roiui.com/r/badge-tailwind.json",
    "https://roiui.com/r/card-tailwind.json",
    "https://roiui.com/r/chart-tailwind.json"
  ],
  "files": [
    {
      "path": "registry/brook/tailwind/blocks/card-traffic/components/card-traffic.tsx",
      "content": "\"use client\";\n\nimport { CartesianGrid, Line, LineChart, XAxis, YAxis } from \"recharts\";\nimport { cn } from \"@/lib/utils\";\nimport { Badge } from \"@/registry/brook/tailwind/ui/badge\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/registry/brook/tailwind/ui/card\";\nimport {\n  type ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/brook/tailwind/ui/chart\";\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=\"w-full max-w-[600px]\"\n      style={{\n        maxWidth: \"600px\",\n        width: \"100%\",\n      }}\n    >\n      <CardHeader>\n        <CardTitle>Website Traffic</CardTitle>\n      </CardHeader>\n      <CardContent className=\"h-[200px] p-0\">\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\n        className={cn(\n          \"-mx-6 -mb-6 grid grid-cols-2 grid-rows-2 border-t-[0.5px] border-t-[oklch(from_var(--border)_l_c_h_/_0.7)]\",\n          \"max-sm:-mx-5 max-sm:-mb-5\",\n          \"max-[400px]:-mx-5 max-[400px]:-mb-5 max-[400px]:grid-cols-1 max-[400px]:grid-rows-auto\"\n        )}\n      >\n        <div\n          className={cn(\n            \"flex flex-col gap-2 border-r-[0.5px] border-r-[oklch(from_var(--border)_l_c_h_/_0.7)] border-b-[0.5px] border-b-[oklch(from_var(--border)_l_c_h_/_0.7)] p-5\",\n            \"sm:gap-2 sm:p-4\",\n            \"max-[400px]:border-r-0 max-[400px]:border-b max-[400px]:border-b-[var(--border)] max-[400px]:p-4\"\n          )}\n        >\n          <div className=\"flex items-center justify-between\">\n            <span className=\"font-medium text-[var(--muted-foreground)] text-sm leading-5\">Mobile</span>\n          </div>\n          <span className=\"font-bold text-[32px] text-[var(--foreground)] tabular-nums leading-none max-sm:text-[1.75rem] max-[400px]:text-2xl\">\n            25,010\n          </span>\n        </div>\n\n        <div\n          className={cn(\n            \"flex flex-col gap-2 border-b-[0.5px] border-b-[oklch(from_var(--border)_l_c_h_/_0.7)] p-5\",\n            \"sm:gap-2 sm:p-4\",\n            \"max-[400px]:border-r-0 max-[400px]:border-b max-[400px]:border-b-[var(--border)] max-[400px]:p-4\"\n          )}\n        >\n          <div className=\"flex items-center justify-between\">\n            <span className=\"font-medium text-[var(--muted-foreground)] text-sm leading-5\">Desktop</span>\n          </div>\n          <span className=\"font-bold text-[32px] text-[var(--foreground)] tabular-nums leading-none max-sm:text-[1.75rem] max-[400px]:text-2xl\">\n            12,840\n          </span>\n        </div>\n\n        <div\n          className={cn(\n            \"flex flex-col gap-2 border-r-[0.5px] border-r-[oklch(from_var(--border)_l_c_h_/_0.7)] p-5\",\n            \"sm:gap-2 sm:p-4\",\n            \"max-[400px]:border-r-0 max-[400px]:border-b max-[400px]:border-b-[var(--border)] max-[400px]:p-4\"\n          )}\n        >\n          <div className=\"flex items-center justify-between\">\n            <span className=\"font-medium text-[var(--muted-foreground)] text-sm leading-5\">Bounce Rate</span>\n            <Badge size=\"sm\" variant=\"success\">\n              -3.4%\n            </Badge>\n          </div>\n          <span className=\"font-bold text-[32px] text-[var(--foreground)] tabular-nums leading-none max-sm:text-[1.75rem] max-[400px]:text-2xl\">\n            24.1%\n          </span>\n        </div>\n\n        <div\n          className={cn(\n            \"flex flex-col gap-2 p-5\",\n            \"sm:gap-2 sm:p-4\",\n            \"max-[400px]:border-r-0 max-[400px]:border-b-0 max-[400px]:p-4\"\n          )}\n        >\n          <div className=\"flex items-center justify-between\">\n            <span className=\"font-medium text-[var(--muted-foreground)] text-sm leading-5\">Conversion</span>\n            <Badge size=\"sm\" variant=\"destructive\">\n              -0.9%\n            </Badge>\n          </div>\n          <span className=\"font-bold text-[32px] text-[var(--foreground)] tabular-nums leading-none max-sm:text-[1.75rem] max-[400px]:text-2xl\">\n            2.8%\n          </span>\n        </div>\n      </div>\n    </Card>\n  );\n}\n",
      "type": "registry:file",
      "target": "~/components/blocks/card-traffic/card-traffic.tsx"
    },
    {
      "path": "registry/brook/tailwind/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"
    }
  ]
}