Vercel

1"use client"
2 
3import * as React from "react"
4import { format } from "date-fns"
5import { type DateRange } from "react-day-picker"
6import { Area, AreaChart } from "recharts"
7 
8import {
9  Example,
10  ExampleWrapper,
11} from "@/registry/bases/radix/components/example"
12import { Alert, AlertDescription } from "@/registry/bases/radix/ui/alert"
13import { Badge } from "@/registry/bases/radix/ui/badge"
14import { Button } from "@/registry/bases/radix/ui/button"
15import { Calendar } from "@/registry/bases/radix/ui/calendar"
16import {
17  Card,
18  CardAction,
19  CardContent,
20  CardDescription,
21  CardFooter,
22  CardHeader,
23  CardTitle,
24} from "@/registry/bases/radix/ui/card"
25import {
26  ChartContainer,
27  ChartTooltip,
28  ChartTooltipContent,
29  type ChartConfig,
30} from "@/registry/bases/radix/ui/chart"
31import {
32  Dialog,
33  DialogClose,
34  DialogContent,
35  DialogDescription,
36  DialogFooter,
37  DialogHeader,
38  DialogTitle,
39  DialogTrigger,
40} from "@/registry/bases/radix/ui/dialog"
41import {
42  DropdownMenu,
43  DropdownMenuContent,
44  DropdownMenuItem,
45  DropdownMenuSeparator,
46  DropdownMenuTrigger,
47} from "@/registry/bases/radix/ui/dropdown-menu"
48import {
49  Empty,
50  EmptyContent,
51  EmptyDescription,
52  EmptyHeader,
53  EmptyTitle,
54} from "@/registry/bases/radix/ui/empty"
55import { Field, FieldGroup, FieldLabel } from "@/registry/bases/radix/ui/field"
56import {
57  InputGroup,
58  InputGroupAddon,
59  InputGroupInput,
60} from "@/registry/bases/radix/ui/input-group"
61import {
62  Item,
63  ItemActions,
64  ItemContent,
65  ItemDescription,
66  ItemFooter,
67  ItemGroup,
68  ItemMedia,
69  ItemSeparator,
70  ItemTitle,
71} from "@/registry/bases/radix/ui/item"
72import {
73  NativeSelect,
74  NativeSelectOption,
75} from "@/registry/bases/radix/ui/native-select"
76import {
77  Popover,
78  PopoverContent,
79  PopoverTrigger,
80} from "@/registry/bases/radix/ui/popover"
81import { Textarea } from "@/registry/bases/radix/ui/textarea"
82import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
83 
84export default function VercelBlock() {
85  return (
86    <ExampleWrapper>
87      <DeploymentFilter />
88      <UsageCard />
89      <ObservabilityCard />
90      <BillingList />
91      <AnomalyAlert />
92      <ActivateAgentDialog />
93      <FeedbackForm />
94      <AnalyticsCard />
95    </ExampleWrapper>
96  )
97}
98 
99const items = [
100  {
101    name: "Edge Requests",
102    value: "$1.83K",
103    percentage: 67.34,
104  },
105  {
106    name: "Fast Data Transfer",
107    percentage: 52.18,
108    value: "$952.51",
109  },
110  {
111    name: "Monitoring data points",
112    percentage: 89.42,
113// … truncated