68 lines
2 KiB
TypeScript
68 lines
2 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import Link from "next/link";
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
import { MessageCircleIcon, Trash2Icon, Loader2Icon } from "lucide-react";
|
|
import { removeChat } from "./actions";
|
|
import { useTransition } from "react";
|
|
|
|
export function SidebarItem({
|
|
title,
|
|
href,
|
|
id,
|
|
userId,
|
|
}: {
|
|
title: string;
|
|
href: string;
|
|
id: string;
|
|
userId: string;
|
|
}) {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const active = pathname === href;
|
|
const [isPending, startTransition] = useTransition();
|
|
|
|
if (!id) return null;
|
|
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className={cn(
|
|
"group flex shrink-0 cursor-pointer items-center gap-2 rounded p-2 text-sm font-medium transition-colors duration-100 hover:bg-zinc-500/10 hover:dark:bg-zinc-300/20",
|
|
isPending
|
|
? "text-zinc-400 dark:text-zinc-500"
|
|
: "text-zinc-800 dark:text-zinc-400",
|
|
active
|
|
? "bg-zinc-500/20 text-zinc-900 font-semibold hover:bg-zinc-500/30 dark:text-white"
|
|
: "bg-transparent"
|
|
)}
|
|
>
|
|
<MessageCircleIcon className="h-4 w-4" />
|
|
<div
|
|
className="relative max-h-5 flex-1 overflow-hidden text-ellipsis break-all select-none"
|
|
title={title}
|
|
>
|
|
<span className="whitespace-nowrap">{title}</span>
|
|
</div>
|
|
<button
|
|
className="opacity-0 -mr-6 transition-opacity duration-0 hover:bg-zinc-400/50 group-hover:mr-0 group-hover:opacity-80 p-1 -my-1 rounded group-hover:duration-600"
|
|
disabled={isPending}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
startTransition(() => {
|
|
removeChat({ id, userId, path: href }).then(() => {
|
|
router.push("/");
|
|
});
|
|
});
|
|
}}
|
|
>
|
|
{isPending ? (
|
|
<Loader2Icon className="animate-spin h-4 w-4" />
|
|
) : (
|
|
<Trash2Icon className="h-4 w-4" />
|
|
)}
|
|
</button>
|
|
</Link>
|
|
);
|
|
}
|