App sheets2

1import { Button } from "@/ui/button";
2import {
3  Sheet,
4  SheetContent,
5  SheetHeader,
6  SheetTitle,
7  SheetTrigger,
8} from "@/ui/sheet";
9import { Avatar, AvatarFallback, AvatarImage } from "@/ui/avatar";
10import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/ui/tabs";
11 
12export default function NotificationCenterSheet() {
13  return (
14    <Sheet>
15      <SheetTrigger asChild>
16        <Button variant="outline">Notifications</Button>
17      </SheetTrigger>
18      <SheetContent className="flex w-full flex-col sm:max-w-sm">
19        <SheetHeader className="border-b">
20          <div className="flex items-center justify-between gap-2">
21            <SheetTitle>Notifications</SheetTitle>
22            <Button variant="ghost" size="sm" className="mr-4">
23              Mark all as read
24            </Button>
25          </div>
26        </SheetHeader>
27        <Tabs defaultValue="all" className="flex-1 overflow-y-auto">
28          <TabsList className="mx-4">
29            <TabsTrigger value="all">All</TabsTrigger>
30            <TabsTrigger value="mentions">Mentions</TabsTrigger>
31            <TabsTrigger value="system">System</TabsTrigger>
32          </TabsList>
33          <TabsContent value="all" className="p-4">
34            <div className="space-y-3">
35              <div className="flex items-start gap-3 rounded border p-3">
36                <Avatar className="size-6">
37                  <AvatarImage src="https://mynaui.com/avatars/avatar-01.webp" />
38                  <AvatarFallback>JD</AvatarFallback>
39                </Avatar>
40                <div className="flex-1 text-sm">
41                  <p className="font-medium">New comment on your post</p>
42                  <p className="text-muted-foreground">5 min ago</p>
43                </div>
44              </div>
45              <div className="flex items-start gap-3 rounded border p-3">
46                <Avatar className="size-6">
47                  <AvatarImage src="https://mynaui.com/avatars/avatar-02.webp" />
48                  <AvatarFallback>AM</AvatarFallback>
49                </Avatar>
50                <div className="flex-1 text-sm">
51                  <p className="font-medium">You have a new follower</p>
52                  <p className="text-muted-foreground">2 hours ago</p>
53                </div>
54              </div>
55              <div className="flex items-start gap-3 rounded border p-3">
56                <Avatar className="size-6">
57                  <AvatarImage src="https://mynaui.com/avatars/avatar-03.webp" />
58// … truncated