"use client" import { motion } from "framer-motion" import { fadeIn, slideUp, stagger, staggerItem, buttonTapTarget } from "@/lib/animations" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Avatar } from "@/components/ui/avatar" import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs" import { Separator } from "@/components/ui/separator" import { cn } from "@/lib/utils" import { Heart, MessageCircle, UserPlus, Bell, BellRing, Settings, CheckCheck, MoreHorizontal, AtSign, Repeat, Image, } from "lucide-react" const notifications = [ { id: 1, type: "like", user: "Alex Morgan", avatar: "AM", content: "liked your post", time: "2m ago", read: false }, { id: 2, type: "comment", user: "Sam Rivera", avatar: "SR", content: "commented: \"This is amazing!\"", time: "15m ago", read: false }, { id: 3, type: "follow", user: "Jordan Chen", avatar: "JC", content: "started following you", time: "1h ago", read: false }, { id: 4, type: "mention", user: "Riley Patel", avatar: "RP", content: "mentioned you in a post", time: "3h ago", read: true }, { id: 5, type: "like", user: "Taylor Kim", avatar: "TK", content: "liked your photo", time: "5h ago", read: true }, { id: 6, type: "repost", user: "Morgan Lee", avatar: "ML", content: "reposted your post", time: "1d ago", read: true }, { id: 7, type: "comment", user: "Casey Brown", avatar: "CB", content: "replied to your comment", time: "2d ago", read: true }, ] const iconMap: Record = { like: Heart, comment: MessageCircle, follow: UserPlus, mention: AtSign, repost: Repeat, } export default function NotificationsFeed() { return (

Notifications

All Mentions Activity {notifications.map((notif) => { const Icon = iconMap[notif.type] || Bell return (

{notif.avatar}

{notif.user} {notif.content}

{notif.time}

{!notif.read &&

}

) })}

No mentions yet

{notifications.filter(n => ["like", "comment", "repost"].includes(n.type)).map((notif) => { const Icon = iconMap[notif.type] || Bell return (

{notif.avatar}

{notif.user} {notif.content}

{notif.time}

) })}

Notification Settings

) }

Notifications Feed

Notifications

Notifications