Thread

1"use client";
2import { useState, createContext, useContext } from "react";
3import {
4  DropdownMenu,
5  DropdownMenuContent,
6  DropdownMenuItem,
7  DropdownMenuTrigger,
8} from "@/components/ui/dropdown-menu";
9import { MoreHorizontalIcon, Message01Icon } from "@hugeicons/core-free-icons";
10import { HugeiconsIcon } from "@hugeicons/react";
11import { cn } from "@/lib/utils";
12 
13const ThreadContext = createContext<{
14  open: boolean;
15  setOpen: (v: boolean) => void;
16}>({
17  open: false,
18  setOpen: () => {},
19});
20const useThreadContext = () => useContext(ThreadContext);
21 
22type ThreadProps = {
23  children: React.ReactNode;
24  className?: string;
25};
26 
27export function Thread({ children, className }: ThreadProps) {
28  const [open, setOpen] = useState(false);
29 
30  return (
31    <ThreadContext.Provider value={{ open, setOpen }}>
32      <div
33        className={cn(
34          "group flex items-center gap-2.5 px-2.5 py-2 rounded-lg",
35          "cursor-pointer select-none",
36          "transition-colors duration-150",
37          "hover:bg-accent",
38          open && "bg-accent",
39          className
40        )}
41      >
42        {children}
43      </div>
44    </ThreadContext.Provider>
45  );
46}
47 
48export function ThreadContent({
49  children,
50  className,
51}: {
52  children: React.ReactNode;
53  className?: string;
54}) {
55  return (
56    <div className="flex items-center gap-2.5 flex-1 min-w-0">
57      <HugeiconsIcon
58        icon={Message01Icon}
59        className="shrink-0 size-4 text-muted-foreground"
60      />
61      <span className={cn("truncate text-sm text-foreground", className)}>
62        {children}
63      </span>
64    </div>
65  );
66}
67 
68export function ThreadAction({
69  children,
70  className,
71}: {
72  children: React.ReactNode;
73  className?: string;
74}) {
75  return (
76    <DropdownMenuItem className={cn("p-2", className)}>
77      {children}
78    </DropdownMenuItem>
79  );
80}
81 
82export function ThreadActions({
83  children,
84  className,
85}: {
86  children: React.ReactNode;
87  className?: string;
88}) {
89  const { open, setOpen } = useThreadContext();
90 
91  return (
92    <div
93      className={cn(
94        "transition-opacity",
95        open ? "opacity-100" : "opacity-0 group-hover:opacity-100"
96      )}
97    >
98      <DropdownMenu onOpenChange={setOpen}>
99        <DropdownMenuTrigger asChild>
100          <button
101            className={cn("p-1 rounded-md", open && "text-accent-foreground")}
102          >
103            <HugeiconsIcon icon={MoreHorizontalIcon} className="size-5" />
104          </button>
105        </DropdownMenuTrigger>
106// … truncated