Sheet

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Sheet, SheetClose, SheetContent, SheetTrigger } from '@/components/ui/sheet';
5
6export function SheetDemo() {
7  return (
8    <Sheet>
9      <SheetTrigger>Open Sheet</SheetTrigger>
10      <SheetContent side="right" size="sm">
11        <div className="flex flex-col gap-4">
12          <h2 className="text-lg font-semibold">Notifications</h2>
13          <p className="text-muted-foreground text-sm">
14            You have 3 new messages and 1 system alert. Review them below.
15          </p>
16
17          <div className="space-y-2 text-sm">
18            <div className="bg-accent/10 rounded-md border p-3">
19              <strong>Message from Jane:</strong> Your report is ready for download.
20            </div>
21            <div className="bg-accent/10 rounded-md border p-3">
22              <strong>System Alert:</strong> Scheduled maintenance at 3:00 AM UTC.
23            </div>
24            <div className="bg-accent/10 rounded-md border p-3">
25              <strong>Message from John:</strong> Please review the updated project plan.
26            </div>
27          </div>
28
29          <div className="mt-4 flex justify-end gap-2">
30            <SheetClose>
31              <Button variant="outline">Dismiss All</Button>
32            </SheetClose>
33            <Button>View Details</Button>
34          </div>
35        </div>
36      </SheetContent>
37    </Sheet>
38  );
39}