"use client"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { useIsMobile } from "@/components/ui/hooks/use-mobile"; import { Input } from "@/components/ui/input"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"; import { TabIndicator, Tabs, TabsList, TabsTab } from "@/components/ui/tabs"; import { ArchiveIcon, BellIcon, CalendarIcon, MessageCircleDashed, MessageCircleIcon, PlusIcon, Settings, TypeIcon, UserIcon, } from "lucide-react"; import React from "react"; type TabType = "all" | "unread" | "archived"; const NotificationContext = React.createContext< | { open: boolean; setOpen: (open: boolean) => void; activeTab: TabType; setActiveTab: (tab: TabType) => void; onClose: () => void; } | undefined >(undefined); const useNotification = () => { const context = React.useContext(NotificationContext); if (!context) { throw new Error( "useNotification must be used within a NotificationContext.Provider", ); } return context; }; export const VercelNotification = () => { const [open, setOpen] = React.useState(false); const [activeTab, setActiveTab] = React.useState("all"); const handleClose = () => setOpen(false); return ( ); }; const NotificationContent = () => { const isMobile = useIsMobile(); if (isMobile) { return ; } return ; }; const NotificationSheet = () => { const { open, setOpen } = useNotification(); return ( } /> ); }; function NotificationPopover() { const { open, setOpen } = useNotification(); return ( } /> ); } const ContentContainer = () => { const { activeTab, onClose } = useNotification(); if (activeTab === "all") { return (

New notification {index + 1} {index + 1} mins ago

); } if (activeTab === "unread") { return (

Unread notification {index + 1} {index + 1} mins ago

); } if (activeTab === "archived") return (

No archived notifications

); return null; }; const UnderLineTabs = () => { const { activeTab, setActiveTab, onClose } = useNotification(); return (

{/* Header */}

setActiveTab(v as TabType)} value={activeTab} > All Unread Archived

{/* Content */} {/* Footer */} {activeTab === "all" && (

)}

); }; const FilterDropdown = () => { return ( } > Filter Author Filter by author Date Filter by date Type Filter by type ); }; const TriggerButton = (props: React.ComponentProps) => { return ( ); };

Component Lab

Vercel Notification Popover