dashboard-5

1"use client";
2 
3import {
4	Card,
5	CardContent,
6	CardDescription,
7	CardHeader,
8	CardTitle,
9} from "@/components/ui/card";
10import {
11	ShareBarList,
12	ShareBarListContent,
13	ShareBarListFill,
14	ShareBarListItem,
15	ShareBarListLabel,
16	ShareBarListValue,
17} from "@/components/share-bar-list";
18 
19const segments = [
20	{ label: "Returning visitors", share: 54 },
21	{ label: "New visitors", share: 41 },
22	{ label: "Logged-in users", share: 5 },
23] as const;
24 
25export function AudienceMix() {
26	return (
27		<Card className="dark:bg-transparent">
28			<CardHeader className="border-b">
29				<CardTitle className="text-balance">Audience mix</CardTitle>
30				<CardDescription className="text-pretty">
31					Session split by familiarity in the last 12 months.
32				</CardDescription>
33			</CardHeader>
34			<CardContent className="p-0 py-1">
35				<ShareBarList aria-label="Audience segments by share of sessions">
36					{segments.map((row) => (
37						<ShareBarListItem key={row.label} value={row.share}>
38							<ShareBarListContent>
39								<ShareBarListLabel>{row.label}</ShareBarListLabel>
40								<ShareBarListValue>{row.share}%</ShareBarListValue>
41							</ShareBarListContent>
42							<ShareBarListFill />
43						</ShareBarListItem>
44					))}
45				</ShareBarList>
46			</CardContent>
47		</Card>
48	);
49}