Highlight Demo

1"use client";
2 
3import {
4  Highlight,
5  HighlightItem,
6} from "@/components/sora-ui/effects/highlight";
7 
8const ITEMS = ["Design", "Engineering", "Product", "Marketing", "Growth"];
9const MOBILE_ITEMS = ITEMS.slice(0, 3);
10 
11const HIGHLIGHT_PROPS = {
12  className: "rounded-full bg-foreground/8",
13  containerClassName: "flex items-center",
14  mode: "parent" as const,
15  trigger: "hover" as const,
16};
17 
18function ItemList({ items }: { items: string[] }) {
19  return (
20    <Highlight {...HIGHLIGHT_PROPS}>
21      {items.map((item) => (
22        <HighlightItem key={item} value={item}>
23          <button
24            className="relative z-10 cursor-pointer px-4 py-1.5 text-foreground/60 text-sm transition-colors hover:text-foreground"
25            type="button"
26          >
27            {item}
28          </button>
29        </HighlightItem>
30      ))}
31    </Highlight>
32  );
33}
34 
35export function HighlightDemo() {
36  return (
37    <div className="flex min-h-40 items-center justify-center">
38      <div className="sm:hidden">
39        <ItemList items={MOBILE_ITEMS} />
40      </div>
41      <div className="hidden sm:block">
42        <ItemList items={ITEMS} />
43      </div>
44    </div>
45  );
46}