Bar list

"use client"
import { BookOpenIcon, GlobeIcon, LinkIcon, MailIcon, SearchIcon, SparklesIcon, UsersIcon } from "lucide-react"
import { BarList } from "@/components/ui/bar-list"import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
const sources = [  { name: "Google search", value: 18420, icon: <SearchIcon /> },  { name: "Direct", value: 9310, icon: <GlobeIcon /> },  { name: "ChatGPT and other assistants", value: 6140, icon: <SparklesIcon /> },  { name: "Partner referrals", value: 3880, icon: <UsersIcon /> },  { name: "Product newsletter", value: 2210, icon: <MailIcon /> },  { name: "Help center", value: 1460, icon: <BookOpenIcon /> },  { name: "Other links", value: 920, icon: <LinkIcon /> },]
export default function BarListSources() {  return (    <Card className="w-full max-w-md">      <CardHeader>        <CardDescription>Signups by source, last 30 days</CardDescription>        <CardTitle className="text-2xl font-semibold tracking-tight tabular-nums">42,340</CardTitle>      </CardHeader>      <CardContent>        <BarList data={sources} label="Source" valueLabel="Visitors" limit={5} showShare />      </CardContent>    </Card>  )}

"use client"
import * as React from "react"
import { BarList, type BarListItem } from "@/components/ui/bar-list"import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
const customers: BarListItem[] = [  { key: "northwind", name: "Northwind Logistics", value: 128400 },  { key: "halcyon", name: "Halcyon Robotics", value: 96250 },  { key: "kestrel", name: "Kestrel Health", value: 61900 },  { key: "lumen", name: "Lumen Analytics", value: 38100 },  { key: "fable", name: "Fable & Finch", value: 22940 },]
const usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 })
export default function BarListCustomers() {  const [active, setActive] = React.useState("northwind")  const selected = customers.find((c) => c.key === active)  return (    <Card className="w-full max-w-md">      <CardHeader>        <CardDescription>Revenue by customer, Q3</CardDescription>        <CardTitle className="text-base">{selected?.name}</CardTitle>      </CardHeader>      <CardContent>        <BarList          data={customers}          color="var(--chart-2)"          valueFormatter={(v) => usd.format(v)}          activeKey={active}          onValueChange={(item) => setActive(item.key ?? item.name)}        />      </CardContent>    </Card>  )}

"use client"
import { BarList } from "@/components/ui/bar-list"
export default function BarListStates() {  return (    <div className="grid w-full max-w-2xl gap-10 sm:grid-cols-2">      <div className="flex flex-col gap-3">        <p className="text-[13px] font-medium text-muted-foreground">Loading</p>        <BarList data={[]} loading limit={4} />      </div>      <div className="flex flex-col gap-3">        <p className="text-[13px] font-medium text-muted-foreground">Empty</p>        <BarList data={[]} empty="No signups in this period" />      </div>    </div>  )}