{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "features-9",
  "type": "registry:block",
  "title": "Features 9",
  "description": "Bento layout with a dotted world map, activity chart and support card.",
  "dependencies": [
    "dotted-map"
  ],
  "registryDependencies": [
    "card",
    "chart"
  ],
  "files": [
    {
      "path": "app/preview/features/nine/page.tsx",
      "content": "'use client'\nimport { Logo } from '@/components/logo'\nimport { Activity, Map as MapIcon, MessageCircle } from 'lucide-react'\nimport DottedMap from 'dotted-map'\nimport { Area, AreaChart, CartesianGrid } from 'recharts'\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'\n\nexport default function FeaturesSection() {\n    return (\n        <section className=\"px-4 py-16 md:py-32\">\n            <div className=\"mx-auto grid max-w-5xl border md:grid-cols-2\">\n                <div>\n                    <div className=\"p-6 sm:p-12\">\n                        <span className=\"text-muted-foreground flex items-center gap-2\">\n                            <MapIcon className=\"size-4\" />\n                            Real time location tracking\n                        </span>\n\n                        <p className=\"mt-8 text-2xl font-semibold\">Advanced tracking system, Instantly locate all your assets.</p>\n                    </div>\n\n                    <div\n                        aria-hidden\n                        className=\"relative\">\n                        <div className=\"absolute inset-0 z-10 m-auto size-fit\">\n                            <div className=\"rounded-(--radius) bg-background z-1 dark:bg-muted relative flex size-fit w-fit items-center gap-2 border px-3 py-1 text-xs font-medium shadow-md shadow-zinc-950/5\">\n                                <span className=\"text-lg\">🇨🇩</span> Last connection from DR Congo\n                            </div>\n                            <div className=\"rounded-(--radius) bg-background absolute inset-2 -bottom-2 mx-auto border px-3 py-4 text-xs font-medium shadow-md shadow-zinc-950/5 dark:bg-zinc-900\"></div>\n                        </div>\n\n                        <div className=\"relative overflow-hidden\">\n                            <div className=\"bg-radial z-1 to-background absolute inset-0 from-transparent to-75%\"></div>\n                            <Map />\n                        </div>\n                    </div>\n                </div>\n                <div className=\"overflow-hidden border-t bg-zinc-50 p-6 sm:p-12 md:border-0 md:border-l dark:bg-transparent\">\n                    <div className=\"relative z-10\">\n                        <span className=\"text-muted-foreground flex items-center gap-2\">\n                            <MessageCircle className=\"size-4\" />\n                            Email and web support\n                        </span>\n\n                        <p className=\"my-8 text-2xl font-semibold\">Reach out via email or web for any assistance you need.</p>\n                    </div>\n                    <div\n                        aria-hidden\n                        className=\"flex flex-col gap-8\">\n                        <div>\n                            <div className=\"flex items-center gap-2\">\n                                <span className=\"flex size-5 rounded-full border\">\n                                    <Logo />\n                                </span>\n                                <span className=\"text-muted-foreground text-xs\">Sat 22 Feb</span>\n                            </div>\n                            <div className=\"rounded-(--radius) bg-background mt-1.5 w-3/5 border p-3 text-xs\">Hey, I'm having trouble with my account.</div>\n                        </div>\n\n                        <div>\n                            <div className=\"rounded-(--radius) mb-1 ml-auto w-3/5 bg-blue-600 p-3 text-xs text-white\">Sorry to hear that! I have reset your session. Try signing in again and let me know if it works.</div>\n                            <span className=\"text-muted-foreground block text-right text-xs\">Now</span>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"col-span-full border-y p-12\">\n                    <p className=\"text-center text-4xl font-semibold lg:text-7xl\">99.99% Uptime</p>\n                </div>\n                <div className=\"relative col-span-full\">\n                    <div className=\"absolute z-10 max-w-lg px-6 pr-12 pt-6 md:px-12 md:pt-12\">\n                        <span className=\"text-muted-foreground flex items-center gap-2\">\n                            <Activity className=\"size-4\" />\n                            Activity feed\n                        </span>\n\n                        <p className=\"my-8 text-2xl font-semibold\">\n                            Monitor your application's activity in real-time. <span className=\"text-muted-foreground\"> Instantly identify and resolve issues.</span>\n                        </p>\n                    </div>\n                    <MonitoringChart />\n                </div>\n            </div>\n        </section>\n    )\n}\n\nconst map = new DottedMap({ height: 55, grid: 'diagonal' })\n\nconst points = map.getPoints()\n\nconst svgOptions = {\n    backgroundColor: 'var(--color-background)',\n    color: 'currentColor',\n    radius: 0.15,\n}\n\nconst Map = () => {\n    const viewBox = `0 0 120 60`\n    return (\n        <svg\n            viewBox={viewBox}\n            style={{ background: svgOptions.backgroundColor }}>\n            {points.map((point, index) => (\n                <circle\n                    key={index}\n                    cx={point.x}\n                    cy={point.y}\n                    r={svgOptions.radius}\n                    fill={svgOptions.color}\n                />\n            ))}\n        </svg>\n    )\n}\n\nconst chartConfig = {\n    desktop: {\n        label: 'Desktop',\n        color: '#2563eb',\n    },\n    mobile: {\n        label: 'Mobile',\n        color: '#60a5fa',\n    },\n} satisfies ChartConfig\n\nconst chartData = [\n    { month: 'May', desktop: 56, mobile: 224 },\n    { month: 'June', desktop: 56, mobile: 224 },\n    { month: 'January', desktop: 126, mobile: 252 },\n    { month: 'February', desktop: 205, mobile: 410 },\n    { month: 'March', desktop: 200, mobile: 126 },\n    { month: 'April', desktop: 400, mobile: 800 },\n]\n\nconst MonitoringChart = () => {\n    return (\n        <ChartContainer\n            className=\"h-120 aspect-auto md:h-96\"\n            config={chartConfig}>\n            <AreaChart\n                accessibilityLayer\n                data={chartData}\n                margin={{\n                    left: 0,\n                    right: 0,\n                }}>\n                <defs>\n                    <linearGradient\n                        id=\"fillDesktop\"\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"1\">\n                        <stop\n                            offset=\"0%\"\n                            stopColor=\"var(--color-desktop)\"\n                            stopOpacity={0.8}\n                        />\n                        <stop\n                            offset=\"55%\"\n                            stopColor=\"var(--color-desktop)\"\n                            stopOpacity={0.1}\n                        />\n                    </linearGradient>\n                    <linearGradient\n                        id=\"fillMobile\"\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"1\">\n                        <stop\n                            offset=\"0%\"\n                            stopColor=\"var(--color-mobile)\"\n                            stopOpacity={0.8}\n                        />\n                        <stop\n                            offset=\"55%\"\n                            stopColor=\"var(--color-mobile)\"\n                            stopOpacity={0.1}\n                        />\n                    </linearGradient>\n                </defs>\n                <CartesianGrid vertical={false} />\n                <ChartTooltip\n                    active\n                    cursor={false}\n                    content={<ChartTooltipContent className=\"dark:bg-muted\" />}\n                />\n                <Area\n                    strokeWidth={2}\n                    dataKey=\"mobile\"\n                    type=\"stepBefore\"\n                    fill=\"url(#fillMobile)\"\n                    fillOpacity={0.1}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                />\n                <Area\n                    strokeWidth={2}\n                    dataKey=\"desktop\"\n                    type=\"stepBefore\"\n                    fill=\"url(#fillDesktop)\"\n                    fillOpacity={0.1}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                />\n            </AreaChart>\n        </ChartContainer>\n    )\n}\n",
      "type": "registry:component",
      "target": "components/features-9.tsx"
    },
    {
      "path": "components/logo.tsx",
      "content": "import { cn } from '@/lib/utils'\n\n/**\n * Brand mark: four blocks, two squared and two rounded, stacked on a grid.\n * Purely presentational — wrap it in your own <Link> where it should navigate.\n */\nexport function Logo({ className }: { className?: string }) {\n    return (\n        <svg\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n            className={cn('size-6 text-foreground', className)}>\n            <rect\n                x=\"2\"\n                y=\"2\"\n                width=\"9\"\n                height=\"9\"\n                rx=\"2.25\"\n                fill=\"currentColor\"\n            />\n            <rect\n                x=\"13\"\n                y=\"2\"\n                width=\"9\"\n                height=\"9\"\n                rx=\"4.5\"\n                fill=\"currentColor\"\n                fillOpacity=\".3\"\n            />\n            <rect\n                x=\"2\"\n                y=\"13\"\n                width=\"9\"\n                height=\"9\"\n                rx=\"4.5\"\n                fill=\"currentColor\"\n                fillOpacity=\".3\"\n            />\n            <rect\n                x=\"13\"\n                y=\"13\"\n                width=\"9\"\n                height=\"9\"\n                rx=\"2.25\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n",
      "type": "registry:component"
    }
  ]
}