| // src/components/threads/ThreadBreadcrumb.tsx | |
| import type { Thread } from "@/types/thread"; | |
| import { ChevronRight, X, MessageSquare, Hash, Lightbulb } from "lucide-react"; | |
| interface ThreadBreadcrumbProps { | |
| thread: Thread; | |
| onClose: () => void; | |
| onNavigate?: (step: "chat" | "thread") => void; | |
| showChatStep?: boolean; | |
| } | |
| const getThreadIcon = (type: Thread["type"]) => { | |
| switch (type) { | |
| case "standalone": | |
| return Hash; | |
| case "topic": | |
| return Lightbulb; | |
| default: | |
| return MessageSquare; | |
| } | |
| }; | |
| export function ThreadBreadcrumb({ | |
| thread, | |
| onClose, | |
| onNavigate, | |
| showChatStep = true, | |
| }: ThreadBreadcrumbProps) { | |
| const ThreadIcon = getThreadIcon(thread.type); | |
| return ( | |
| <div className="flex items-center gap-1.5 border-b border-gray-100 bg-gray-50 px-4 py-1.5 text-xs text-gray-500 dark:border-gray-700 dark:bg-gray-800/80"> | |
| {showChatStep && ( | |
| <> | |
| <button | |
| onClick={() => onNavigate?.("chat")} | |
| className="flex items-center gap-1 rounded px-1 py-0.5 hover:bg-gray-200 dark:hover:bg-gray-700" | |
| aria-label="Go to main chat" | |
| > | |
| <MessageSquare className="h-3 w-3" /> | |
| <span>Chat</span> | |
| </button> | |
| <ChevronRight className="h-3 w-3 flex-shrink-0" /> | |
| </> | |
| )} | |
| <button | |
| onClick={() => onNavigate?.("thread")} | |
| className="flex items-center gap-1 rounded px-1 py-0.5 font-medium text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700" | |
| aria-label={`View thread: ${thread.title}`} | |
| > | |
| <ThreadIcon className="h-3 w-3" /> | |
| <span className="max-w-[200px] truncate">{thread.title}</span> | |
| </button> | |
| <button | |
| onClick={onClose} | |
| className="ml-auto rounded p-0.5 text-gray-400 hover:bg-gray-200 hover:text-gray-600 dark:hover:bg-gray-700" | |
| aria-label="Close thread view" | |
| > | |
| <X className="h-3.5 w-3.5" /> | |
| </button> | |
| </div> | |
| ); | |
| } |
Xet Storage Details
- Size:
- 2 kB
- Xet hash:
- 93872457fee79d4dfdf02ddf0588544f952cb2853fc512cc1d5ff8a940e89946
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.