Highlight Click Demo

1"use client";
2 
3import {
4  Highlight,
5  HighlightItem,
6} from "@/components/sora-ui/effects/highlight";
7 
8const MENU_ITEMS = [
9  { value: "inbox", label: "Inbox", count: 12 },
10  { value: "drafts", label: "Drafts", count: 3 },
11  { value: "sent", label: "Sent" },
12  { value: "starred", label: "Starred" },
13  { value: "archive", label: "Archive" },
14];
15 
16export function HighlightClickDemo() {
17  return (
18    <div className="flex w-full items-center justify-center px-4 py-6">
19      <div className="flex w-full max-w-52 flex-col overflow-hidden rounded-lg border border-border/50 bg-background shadow-sm">
20        <Highlight
21          className="rounded-md bg-foreground/8"
22          defaultValue="inbox"
23          mode="children"
24          trigger="click"
25        >
26          {MENU_ITEMS.map(({ value, label, count }) => (
27            <HighlightItem key={value} value={value}>
28              <button
29                className="flex w-full cursor-pointer items-center justify-between px-3 py-2 text-left text-sm"
30                type="button"
31              >
32                <span>{label}</span>
33                {count === undefined ? null : (
34                  <span className="text-foreground/40 text-xs tabular-nums">
35                    {count}
36                  </span>
37                )}
38              </button>
39            </HighlightItem>
40          ))}
41        </Highlight>
42      </div>
43    </div>
44  );
45}
46 
47export default HighlightClickDemo;