Item

1"use client";
2 
3import { Slot } from "@radix-ui/react-slot";
4import { forwardRef } from "react";
5import { cn } from "@/lib/utils";
6import { glass } from "@/lib/glass";
7 
8export const Item = forwardRef<
9  HTMLDivElement,
10  React.ComponentProps<"div"> & {
11    asChild?: boolean;
12    variant?: "default" | "glass";
13  }
14>(({ asChild, className, variant = "default", ...props }, ref) => {
15  const Comp = asChild ? Slot : "div";
16  return (
17    <Comp
18      ref={ref}
19      data-slot="item"
20      data-variant={variant}
21      className={cn(
22        "flex w-full items-center gap-3 rounded-2xl px-3 py-2.5 text-left text-sm transition-colors",
23        variant === "default" &&
24          "hover:bg-black/[0.04] dark:hover:bg-white/[0.08] dark:hover:bg-white/[0.08]",
25        variant === "glass" && glass,
26        className,
27      )}
28      {...props}
29    />
30  );
31});
32Item.displayName = "Item";
33 
34export function ItemMedia({
35  className,
36  variant = "icon",
37  ...props
38}: React.ComponentProps<"div"> & { variant?: "icon" | "image" }) {
39  return (
40    <div
41      data-slot="item-media"
42      data-variant={variant}
43      className={cn(
44        "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-black/[0.08] dark:border-white/10 bg-black/[0.04] dark:bg-white/[0.05] [&_svg]:size-5",
45        variant === "image" && "border-0 bg-transparent p-0",
46        className,
47      )}
48      {...props}
49    />
50  );
51}
52 
53export function ItemContent({
54  className,
55  ...props
56}: React.ComponentProps<"div">) {
57  return (
58    <div
59      data-slot="item-content"
60      className={cn("flex min-w-0 flex-1 flex-col gap-0.5", className)}
61      {...props}
62    />
63  );
64}
65 
66export function ItemTitle({
67  className,
68  ...props
69}: React.ComponentProps<"div">) {
70  return (
71    <div
72      data-slot="item-title"
73      className={cn(
74        "truncate font-medium leading-tight text-current",
75        className,
76      )}
77      {...props}
78    />
79  );
80}
81 
82export function ItemDescription({
83  className,
84  ...props
85}: React.ComponentProps<"p">) {
86  return (
87    <p
88      data-slot="item-description"
89      className={cn("truncate text-xs text-current/60 leading-snug", className)}
90      {...props}
91    />
92  );
93}
94 
95export function ItemActions({
96  className,
97  ...props
98}: React.ComponentProps<"div">) {
99  return (
100    <div
101      data-slot="item-actions"
102      className={cn("flex shrink-0 items-center gap-1", className)}
103      {...props}
104    />
105  );
106}