App sheets3

1import { Avatar, AvatarFallback, AvatarImage } from "@/ui/avatar";
2import { Button } from "@/ui/button";
3import {
4  Sheet,
5  SheetContent,
6  SheetHeader,
7  SheetTitle,
8  SheetTrigger,
9} from "@/ui/sheet";
10 
11export default function ActivityFeedSheet() {
12  return (
13    <Sheet>
14      <SheetTrigger asChild>
15        <Button variant="outline">Activity</Button>
16      </SheetTrigger>
17      <SheetContent className="flex w-full flex-col sm:max-w-sm">
18        <SheetHeader>
19          <SheetTitle>Activity Feed</SheetTitle>
20        </SheetHeader>
21        <div className="flex-1 space-y-6 overflow-y-auto px-4 pb-4">
22          <div>
23            <p className="mb-2 text-xs font-medium text-muted-foreground">Today</p>
24            <div className="flex items-start gap-3">
25              <Avatar className="size-8">
26                <AvatarImage src="https://mynaui.com/avatars/avatar-01.webp" />
27                <AvatarFallback>JP</AvatarFallback>
28              </Avatar>
29              <div className="flex-1 text-sm">
30                <p>
31                  <span className="font-medium">Jane</span> commented on your post
32                </p>
33                <p className="text-xs text-muted-foreground">2h ago</p>
34              </div>
35            </div>
36            <div className="mt-4 flex items-start gap-3">
37              <Avatar className="size-8">
38                <AvatarImage src="https://mynaui.com/avatars/avatar-03.webp" />
39                <AvatarFallback>TL</AvatarFallback>
40              </Avatar>
41              <div className="flex-1 text-sm">
42                <p>
43                  <span className="font-medium">Tina</span> uploaded a new photo
44                </p>
45                <p className="text-xs text-muted-foreground">4h ago</p>
46              </div>
47            </div>
48            <div className="mt-4 flex items-start gap-3">
49              <Avatar className="size-8">
50                <AvatarImage src="https://mynaui.com/avatars/avatar-05.webp" />
51                <AvatarFallback>BW</AvatarFallback>
52              </Avatar>
53              <div className="flex-1 text-sm">
54                <p>
55                  <span className="font-medium">Barry</span> completed your task
56                </p>
57                <p className="text-xs text-muted-foreground">6h ago</p>
58              </div>
59            </div>
60            <div className="mt-4 flex items-start gap-3">
61              <Avatar className="size-8">
62                <AvatarImage src="https://mynaui.com/avatars/avatar-06.webp" />
63// … truncated