96 lines
3.5 KiB
TypeScript
96 lines
3.5 KiB
TypeScript
"use client";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Icon } from "@/components/ui/icon";
|
|
import { Avatar, AvatarImage } from "@/components/ui/avatar";
|
|
import { AvatarFallback } from "@radix-ui/react-avatar";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import {ReactNode,useState} from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Trash2 } from "lucide-react";
|
|
import DeleteConfirmationDialog from "@/components/delete-confirmation-dialog";
|
|
import { Link } from "@/components/navigation"
|
|
const MailItem = ({ mail }: { mail: any }) => {
|
|
const { image, title, isfav, time, name, id } = mail;
|
|
const [open, setOpen] = useState<boolean>(false)
|
|
return (
|
|
<>
|
|
<DeleteConfirmationDialog
|
|
open={open}
|
|
onClose={() => setOpen(false)}
|
|
/>
|
|
<Link href={`/app/email/${id}`} className=" group block border-b border-default-200 dark:border-default-300 last:border-none" >
|
|
<div className="flex items-center gap-4 group-hover:bg-default-50 last:border-none px-6 py-4 translate-y-0">
|
|
<div>
|
|
<Checkbox className="mt-0.5 dark:bg-default-300" />
|
|
</div>
|
|
<div className="ms-1">
|
|
{isfav ? (
|
|
<Icon
|
|
icon="heroicons:star-20-solid"
|
|
className="text-xl cursor-pointer text-[#FFCE30]"
|
|
/>
|
|
) : (
|
|
<Icon
|
|
icon="heroicons:star"
|
|
className="text-xl cursor-pointer text-default-400"
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className="-space-x-1.5 rtl:space-x-reverse">
|
|
{image.map(
|
|
(
|
|
item: {
|
|
label: ReactNode;
|
|
image: string;
|
|
},
|
|
index: any
|
|
) => (
|
|
<TooltipProvider key={`avatar-${index}`}>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Avatar className="h-7 w-7 border-none shadow-none bg-transparent">
|
|
<AvatarImage src={item.image} />
|
|
<AvatarFallback>SA</AvatarFallback>
|
|
</Avatar>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>{item.label}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
)
|
|
)}
|
|
</div>
|
|
<div className="flex-1 overflow-hidden text-sm text-default-600 truncate">
|
|
<span className="me-3">{name}</span>
|
|
<span className="text-sm text-default-600 truncate max-w-56">{title}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center">
|
|
<p className="text-default-900 text-sm">{time}</p>
|
|
<div className="group-hover:bg-default-100 hidden group-hover:flex absolute group-hover:transition-all duration-300 right-0 top-0 h-full items-center ">
|
|
<Button
|
|
className="bg-transparent ring-transparent hover:bg-transparent hover:ring-0 hover:ring-offset-0 hover:ring-transparent w-28 border-transparent"
|
|
size="icon"
|
|
onClick={(event) => {
|
|
setOpen(true);
|
|
event.preventDefault();
|
|
}}
|
|
>
|
|
<Trash2 className="text-default-900 w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MailItem;
|