vercel.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "vercel",
  "title": "Vercel",
  "registryDependencies": [
    "alert",
    "badge",
    "button",
    "calendar",
    "card",
    "chart",
    "dialog",
    "dropdown-menu",
    "empty",
    "field",
    "input-group",
    "item",
    "native-select",
    "popover",
    "textarea",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-maia/blocks/vercel.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/radix-maia/ui/alert\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Calendar } from \"@/registry/radix-maia/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-maia/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/radix-maia/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-maia/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-maia/ui/popover\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                phosphor=\"CalendarIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        remixicon=\"RiMoreLine\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      remixicon=\"RiCheckboxCircleLine\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n                remixicon=\"RiMoneyDollarCircleLine\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
      "type": "registry:block"
    }
  ],
  "type": "registry:block"
}