118 lines
No EOL
3.7 KiB
TypeScript
118 lines
No EOL
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { useSidebarStore } from "@/lib/stores/sidebar-store";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export interface ChatListRowProps {
|
|
label: string;
|
|
type: "post" | "draft" | "channel" | "dm";
|
|
id: string;
|
|
preview?: string;
|
|
count?: number;
|
|
selected?: boolean;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export function ChatListRow({ label, type, id, preview, count, selected, onClick }: ChatListRowProps) {
|
|
const rowClass = cn(
|
|
"flex items-center py-1.5 px-3 border-b border-transparent hover:border-sidebar-border",
|
|
"hover:bg-background/5 transition-colors",
|
|
selected && "bg-accent text-accent-foreground",
|
|
"cursor-pointer"
|
|
);
|
|
|
|
const getIcon = () => {
|
|
switch (type) {
|
|
case "post":
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-5 w-5 text-indigo-600"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
|
|
/>
|
|
</svg>
|
|
);
|
|
case "draft":
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-5 w-5 text-yellow-500"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
|
|
/>
|
|
</svg>
|
|
);
|
|
case "channel":
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-5 w-5 text-blue-600"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
|
|
/>
|
|
</svg>
|
|
);
|
|
case "dm":
|
|
default:
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-5 w-5 text-purple-600"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={rowClass} onClick={onClick}>
|
|
<div className="flex items-center space-x-3">
|
|
<div className="flex-shrink-0">{getIcon()}</div>
|
|
<div className="flex-1 min-w-0">
|
|
<span className="font-medium truncate block">{label}</span>
|
|
{preview && (
|
|
<span className="text-sm text-muted-foreground truncate block">
|
|
{preview}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{count !== undefined && count > 0 && (
|
|
<span className="ml-2 text-xs font-medium bg-indigo-100 text-indigo-700 px-1.5 py-0.5 rounded-full">
|
|
{count}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |