App sheets5

1import { Button } from "@/ui/button";
2import { Checkbox } from "@/ui/checkbox";
3import {
4  Sheet,
5  SheetContent,
6  SheetFooter,
7  SheetHeader,
8  SheetTitle,
9  SheetTrigger,
10} from "@/ui/sheet";
11import { Input } from "@/ui/input";
12 
13export default function MediaGallerySheet() {
14  return (
15    <Sheet>
16      <SheetTrigger asChild>
17        <Button variant="outline">Open Gallery</Button>
18      </SheetTrigger>
19      <SheetContent className="flex w-full flex-col sm:max-w-sm">
20        <SheetHeader className="border-b">
21          <SheetTitle>Media Gallery</SheetTitle>
22        </SheetHeader>
23        <div className="space-y-4 px-4 pb-4">
24          <div className="flex items-center gap-2">
25            <Input placeholder="Search" />
26            <Button variant="outline">Filter</Button>
27          </div>
28          <div className="grid grid-cols-3 gap-2">
29            {Array.from({ length: 6 }).map((_, i) => (
30              <label
31                key={i}
32                className="relative aspect-square overflow-hidden rounded bg-muted"
33              >
34                <Checkbox className="absolute left-1 top-1 z-10" />
35              </label>
36            ))}
37          </div>
38        </div>
39        <SheetFooter className="sticky bottom-0 border-t bg-background">
40          <div className="flex gap-2">
41            <Button variant="secondary" className="flex-1">
42              Download
43            </Button>
44            <Button variant="secondary" className="flex-1">
45              Delete
46            </Button>
47            <Button className="flex-1">Insert</Button>
48          </div>
49        </SheetFooter>
50      </SheetContent>
51    </Sheet>
52  );
53}