68 lines
1.9 KiB
TypeScript
68 lines
1.9 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>
|
|
)
|
|
}
|