36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
/**
|
|
* @file dasboard/header/TrashLink.tsx
|
|
* @description Client component rendering a navigation link button to the trash view with a dynamic item counter badge.
|
|
*/
|
|
|
|
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { Trash2 } from "lucide-react";
|
|
|
|
/**
|
|
* Renders an interactive trash icon link featuring hover animations and an optional item count badge.
|
|
*
|
|
* @param {Object} props - The component props.
|
|
* @param {number} props.count - The number of items currently in the trash.
|
|
* @returns {JSX.Element} The rendered trash button component.
|
|
*/
|
|
export default function TrashLink({ count }: { count: number }) {
|
|
return (
|
|
<Link
|
|
href="/trash"
|
|
className="relative group p-2 rounded-xl border border-border hover:border-primary transition-all duration-200"
|
|
title="View Trash"
|
|
>
|
|
<Trash2
|
|
size={16}
|
|
className="text-foreground-muted group-hover:text-primary transition-colors"
|
|
/>
|
|
{count > 0 && (
|
|
<span className="absolute -top-1.5 -right-1.5 flex items-center justify-center min-w-4 h-4 px-1 rounded-full bg-destructive text-[9px] font-bold text-white shadow-sm ring-1 ring-background">
|
|
{count}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
);
|
|
}
|