94 lines
4.2 KiB
TypeScript
94 lines
4.2 KiB
TypeScript
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { Link } from '@/i18n/routing';
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { cn } from "@/lib/utils";
|
|
import { messages, type Message } from "./data";
|
|
import shortImage from "@/public/images/all-img/short-image-2.png";
|
|
import { Icon } from "@/components/ui/icon";
|
|
|
|
const Messages = () => {
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button type="button" className="relative focus:ring-none focus:outline-none md:h-8 md:w-8 md:bg-secondary text-secondary-foreground rounded-full md:flex hidden flex-col items-center justify-center">
|
|
<Icon icon="heroicons-outline:mail" className="h-5 w-5" />
|
|
<Badge className=" w-4 h-4 p-0 text-[8px] rounded-full font-semibold items-center justify-center absolute left-[calc(100%-12px)] bottom-[calc(100%-10px)] " color="destructive">
|
|
10
|
|
</Badge>
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
align="end"
|
|
className=" z-[999] mx-4 lg:w-[320px] p-0"
|
|
>
|
|
<DropdownMenuLabel
|
|
|
|
|
|
>
|
|
<div className="flex justify-between px-4 py-3 border-b border-default-100 ">
|
|
<div className="text-sm text-default-800 font-medium ">
|
|
Messages
|
|
</div>
|
|
<div className="text-default-800 text-xs md:text-right">
|
|
<Link href="/chats" className="underline">
|
|
View all
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<div className="h-[300px] xl:h-[350px]">
|
|
<ScrollArea className="h-full">
|
|
{messages?.map((item: Message, index: number) => (
|
|
<DropdownMenuItem
|
|
key={`inbox-${index}`}
|
|
className="flex items-start gap-3 py-2 px-4 cursor-pointer group "
|
|
>
|
|
|
|
<div className="flex-none">
|
|
<Avatar className="h-8 w-8 ">
|
|
<AvatarImage src={item?.image} />
|
|
<AvatarFallback> {item.title.charAt(0)}</AvatarFallback>
|
|
</Avatar>
|
|
</div>
|
|
<div className="flex-1 flex flex-col gap-0.5">
|
|
<div className="text-default-800 text-sm font-medium ">
|
|
{item.title}
|
|
</div>
|
|
<div className="text-xs text-default-600 dark:group-hover:text-default-700 ">
|
|
{item.desc}
|
|
</div>
|
|
<div className="text-default-400 dark:text-default-500 dark:group-hover:text-default-600 text-xs">
|
|
3 min ago
|
|
</div>
|
|
</div>
|
|
{item.hasnotifaction && (
|
|
|
|
<div className="flex-none">
|
|
<span className="h-[10px] w-[10px] bg-destructive border border-destructive-foreground dark:border-default-400 rounded-full inline-block" />
|
|
</div>
|
|
)}
|
|
|
|
|
|
</DropdownMenuItem>
|
|
))}
|
|
</ScrollArea>
|
|
</div>
|
|
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
};
|
|
|
|
export default Messages;
|