App Sheets
Slide over panels for various app functions.
import { Button } from "@/components/ui/button";
import {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
export default function CartCheckoutSheet() {
return (
<Sheet>
<SheetTrigger asChild>
<Button variant="outline">Open Cart</Button>
</SheetTrigger>
<SheetContent className="flex w-full flex-col sm:max-w-sm">
<SheetHeader>
<SheetTitle>Shopping Cart</SheetTitle>
<SheetDescription>Review your items and checkout</SheetDescription>
</SheetHeader>
<div className="flex-1 space-y-4 overflow-y-auto px-4 pb-4">
<div className="flex items-center gap-3">
<div className="size-12 shrink-0 rounded bg-muted" />
<div className="flex-1">
<p className="text-sm font-medium">Item One</p>
<p className="text-sm text-muted-foreground">Qty 1</p>
</div>
<p className="font-medium">$19.00</p>
</div>
<div className="flex items-center gap-3">
<div className="size-12 shrink-0 rounded bg-muted" />
<div className="flex-1">
<p className="text-sm font-medium">Item Two</p>
<p className="text-sm text-muted-foreground">Qty 2</p>
</div>
<p className="font-medium">$39.00</p>
</div>
<div className="grid gap-2">
<Label htmlFor="discount">Discount Code</Label>
<Input id="discount" placeholder="SUMMER25" />
</div>
</div>
<SheetFooter className="sticky bottom-0 border-t bg-background">
<div className="flex items-center justify-between font-semibold">
<span>Subtotal</span>
<span>$58.00</span>
</div>
<Button>Checkout</Button>
<SheetClose asChild>
<Button variant="outline">Continue Shopping</Button>
</SheetClose>
</SheetFooter>
</SheetContent>
</Sheet>
);
}import { Button } from "@/components/ui/button";
import {
Sheet,
SheetContent,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
export default function NotificationCenterSheet() {
return (
<Sheet>
<SheetTrigger asChild>
<Button variant="outline">Notifications</Button>
</SheetTrigger>
<SheetContent className="flex w-full flex-col sm:max-w-sm">
<SheetHeader className="border-b">
<div className="flex items-center justify-between gap-2">
<SheetTitle>Notifications</SheetTitle>
<Button variant="ghost" size="sm" className="mr-4">
Mark all as read
</Button>
</div>
</SheetHeader>
<Tabs defaultValue="all" className="flex-1 overflow-y-auto">
<TabsList className="mx-4">
<TabsTrigger value="all">All</TabsTrigger>
<TabsTrigger value="mentions">Mentions</TabsTrigger>
<TabsTrigger value="system">System</TabsTrigger>
</TabsList>
<TabsContent value="all" className="p-4">
<div className="space-y-3">
<div className="flex items-start gap-3 rounded border p-3">
<Avatar className="size-6">
<AvatarImage src="/avatars/avatar-01.webp" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>
<div className="flex-1 text-sm">
<p className="font-medium">New comment on your post</p>
<p className="text-muted-foreground">5 min ago</p>
</div>
</div>
<div className="flex items-start gap-3 rounded border p-3">
<Avatar className="size-6">
<AvatarImage src="/avatars/avatar-02.webp" />
<AvatarFallback>AM</AvatarFallback>
</Avatar>
<div className="flex-1 text-sm">
<p className="font-medium">You have a new follower</p>
<p className="text-muted-foreground">2 hours ago</p>
</div>
</div>
<div className="flex items-start gap-3 rounded border p-3">
<Avatar className="size-6">
<AvatarImage src="/avatars/avatar-03.webp" />
<AvatarFallback>TL</AvatarFallback>
</Avatar>
<div className="flex-1 text-sm">
<p className="font-medium">Weekly report is ready</p>
<p className="text-muted-foreground">6 hours ago</p>
</div>
</div>
<div className="flex items-start gap-3 rounded border p-3">
<Avatar className="size-6">
<AvatarImage src="/avatars/avatar-04.webp" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>
<div className="flex-1 text-sm">
<p className="font-medium">Updates available</p>
<p className="text-muted-foreground">1 day ago</p>
</div>
</div>
<div className="flex items-start gap-3 rounded border p-3">
<Avatar className="size-6">
<AvatarImage src="/avatars/avatar-05.webp" />
<AvatarFallback>BW</AvatarFallback>
</Avatar>
<div className="flex-1 text-sm">
<p className="font-medium">Payment processed successfully</p>
<p className="text-muted-foreground">2 days ago</p>
</div>
</div>
</div>
</TabsContent>
<TabsContent value="mentions" className="p-4">
<div className="space-y-3">
<div className="flex items-start gap-3 rounded border p-3">
<Avatar className="size-6">
<AvatarImage src="/avatars/avatar-06.webp" />
<AvatarFallback>WS</AvatarFallback>
</Avatar>
<div className="flex-1 text-sm">
<p className="font-medium">@you Check this out!</p>
<p className="text-muted-foreground">10 min ago</p>
</div>
</div>
<div className="flex items-start gap-3 rounded border p-3">
<Avatar className="size-6">
<AvatarImage src="/avatars/avatar-07.webp" />
<AvatarFallback>HG</AvatarFallback>
</Avatar>
<div className="flex-1 text-sm">
<p className="font-medium">
@you You were mentioned in a comment
</p>
<p className="text-muted-foreground">1 hour ago</p>
</div>
</div>
<div className="flex items-start gap-3 rounded border p-3">
<Avatar className="size-6">
<AvatarImage src="/avatars/avatar-03.webp" />
<AvatarFallback>TL</AvatarFallback>
</Avatar>
<div className="flex-1 text-sm">
<p className="font-medium">@you Did you see this?</p>
<p className="text-muted-foreground">3 hours ago</p>
</div>
</div>
</div>
</TabsContent>
<TabsContent value="system" className="p-4">
<div className="space-y-3">
<div className="flex items-start gap-3 rounded border p-3">
<Avatar className="size-6">
<AvatarImage src="/avatars/avatar-08.webp" />
<AvatarFallback>MA</AvatarFallback>
</Avatar>
<div className="flex-1 text-sm">
<p className="font-medium">Server maintenance at 10PM</p>
<p className="text-muted-foreground">1 day ago</p>
</div>
</div>
<div className="flex items-start gap-3 rounded border p-3">
<Avatar className="size-6">
<AvatarImage src="/avatars/avatar-09.webp" />
<AvatarFallback>BR</AvatarFallback>
</Avatar>
<div className="flex-1 text-sm">
<p className="font-medium">New version deployed</p>
<p className="text-muted-foreground">3 days ago</p>
</div>
</div>
<div className="flex items-start gap-3 rounded border p-3">
<Avatar className="size-6">
<AvatarImage src="/avatars/avatar-10.webp" />
<AvatarFallback>JJ</AvatarFallback>
</Avatar>
<div className="flex-1 text-sm">
<p className="font-medium">Password reset required</p>
<p className="text-muted-foreground">4 days ago</p>
</div>
</div>
</div>
</TabsContent>
</Tabs>
</SheetContent>
</Sheet>
);
}import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
Sheet,
SheetContent,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
export default function ActivityFeedSheet() {
return (
<Sheet>
<SheetTrigger asChild>
<Button variant="outline">Activity</Button>
</SheetTrigger>
<SheetContent className="flex w-full flex-col sm:max-w-sm">
<SheetHeader>
<SheetTitle>Activity Feed</SheetTitle>
</SheetHeader>
<div className="flex-1 space-y-6 overflow-y-auto px-4 pb-4">
<div>
<p className="mb-2 text-xs font-medium text-muted-foreground">Today</p>
<div className="flex items-start gap-3">
<Avatar className="size-8">
<AvatarImage src="/avatars/avatar-01.webp" />
<AvatarFallback>JP</AvatarFallback>
</Avatar>
<div className="flex-1 text-sm">
<p>
<span className="font-medium">Jane</span> commented on your post
</p>
<p className="text-xs text-muted-foreground">2h ago</p>
</div>
</div>
<div className="mt-4 flex items-start gap-3">
<Avatar className="size-8">
<AvatarImage src="/avatars/avatar-03.webp" />
<AvatarFallback>TL</AvatarFallback>
</Avatar>
<div className="flex-1 text-sm">
<p>
<span className="font-medium">Tina</span> uploaded a new photo
</p>
<p className="text-xs text-muted-foreground">4h ago</p>
</div>
</div>
<div className="mt-4 flex items-start gap-3">
<Avatar className="size-8">
<AvatarImage src="/avatars/avatar-05.webp" />
<AvatarFallback>BW</AvatarFallback>
</Avatar>
<div className="flex-1 text-sm">
<p>
<span className="font-medium">Barry</span> completed your task
</p>
<p className="text-xs text-muted-foreground">6h ago</p>
</div>
</div>
<div className="mt-4 flex items-start gap-3">
<Avatar className="size-8">
<AvatarImage src="/avatars/avatar-06.webp" />
<AvatarFallback>WS</AvatarFallback>
</Avatar>
<div className="flex-1 text-sm">
<p>
<span className="font-medium">Willow</span> joined the project
</p>
<p className="text-xs text-muted-foreground">8h ago</p>
</div>
</div>
</div>
<div>
<p className="mb-2 text-xs font-medium text-muted-foreground">Yesterday</p>
<div className="flex items-start gap-3">
<Avatar className="size-8">
<AvatarImage src="/avatars/avatar-02.webp" />
<AvatarFallback>AM</AvatarFallback>
</Avatar>
<div className="flex-1 text-sm">
<p>
<span className="font-medium">Andrew</span> uploaded new files
</p>
<p className="text-xs text-muted-foreground">20h ago</p>
</div>
</div>
<div className="mt-4 flex items-start gap-3">
<Avatar className="size-8">
<AvatarImage src="/avatars/avatar-04.webp" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>
<div className="flex-1 text-sm">
<p>
<span className="font-medium">Julia</span> started following you
</p>
<p className="text-xs text-muted-foreground">1d ago</p>
</div>
</div>
<div className="mt-4 flex items-start gap-3">
<Avatar className="size-8">
<AvatarImage src="/avatars/avatar-07.webp" />
<AvatarFallback>HG</AvatarFallback>
</Avatar>
<div className="flex-1 text-sm">
<p>
<span className="font-medium">Hugo</span> left the project
</p>
<p className="text-xs text-muted-foreground">1d ago</p>
</div>
</div>
<div className="mt-4 flex items-start gap-3">
<Avatar className="size-8">
<AvatarImage src="/avatars/avatar-08.webp" />
<AvatarFallback>MA</AvatarFallback>
</Avatar>
<div className="flex-1 text-sm">
<p>
<span className="font-medium">Mia</span> archived a task
</p>
<p className="text-xs text-muted-foreground">2d ago</p>
</div>
</div>
</div>
</div>
</SheetContent>
</Sheet>
);
}import { Button } from "@/components/ui/button";
import {
Sheet,
SheetContent,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
export default function SettingsSheet() {
return (
<Sheet>
<SheetTrigger asChild>
<Button variant="outline">Settings</Button>
</SheetTrigger>
<SheetContent className="flex w-full flex-col sm:max-w-sm">
<SheetHeader className="border-b">
<SheetTitle>Settings</SheetTitle>
</SheetHeader>
<div className="flex-1 space-y-8 overflow-y-auto px-4 pb-4">
<div className="space-y-4">
<h3 className="text-sm font-semibold">Profile</h3>
<div className="grid gap-2">
<Label htmlFor="name">Name</Label>
<Input id="name" placeholder="Your name" />
</div>
<div className="grid gap-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="you@example.com" />
</div>
</div>
<div className="space-y-4">
<h3 className="text-sm font-semibold">Security</h3>
<div className="grid gap-2">
<Label htmlFor="password">Password</Label>
<Input id="password" type="password" placeholder="••••••••" />
</div>
</div>
<div className="space-y-4">
<h3 className="text-sm font-semibold">Notifications</h3>
<div className="flex items-center gap-2">
<Checkbox id="email-alerts" />
<Label htmlFor="email-alerts">Email alerts</Label>
</div>
<div className="flex items-center gap-2">
<Checkbox id="sms-alerts" />
<Label htmlFor="sms-alerts">SMS alerts</Label>
</div>
<div className="flex items-center gap-2">
<Checkbox id="push-alerts" />
<Label htmlFor="push-alerts">Push notifications</Label>
</div>
</div>
<div className="space-y-4">
<h3 className="text-sm font-semibold">Billing</h3>
<div className="grid gap-2">
<Label htmlFor="plan">Plan</Label>
<Select>
<SelectTrigger id="plan" className="w-full">
<SelectValue placeholder="Pro" />
</SelectTrigger>
<SelectContent>
<SelectItem value="starter">Starter</SelectItem>
<SelectItem value="pro">Pro</SelectItem>
<SelectItem value="enterprise">Enterprise</SelectItem>
</SelectContent>
</Select>
</div>
<div className="grid gap-2">
<Label htmlFor="card">Card on file</Label>
<Input id="card" placeholder="**** **** **** 1234" />
</div>
</div>
</div>
<SheetFooter className="sticky bottom-0 border-t bg-background">
<Button>Save</Button>
</SheetFooter>
</SheetContent>
</Sheet>
);
}import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
Sheet,
SheetContent,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
import { Input } from "@/components/ui/input";
export default function MediaGallerySheet() {
return (
<Sheet>
<SheetTrigger asChild>
<Button variant="outline">Open Gallery</Button>
</SheetTrigger>
<SheetContent className="flex w-full flex-col sm:max-w-sm">
<SheetHeader className="border-b">
<SheetTitle>Media Gallery</SheetTitle>
</SheetHeader>
<div className="space-y-4 px-4 pb-4">
<div className="flex items-center gap-2">
<Input placeholder="Search" />
<Button variant="outline">Filter</Button>
</div>
<div className="grid grid-cols-3 gap-2">
{Array.from({ length: 6 }).map((_, i) => (
<label
key={i}
className="relative aspect-square overflow-hidden rounded bg-muted"
>
<Checkbox className="absolute left-1 top-1 z-10" />
</label>
))}
</div>
</div>
<SheetFooter className="sticky bottom-0 border-t bg-background">
<div className="flex gap-2">
<Button variant="secondary" className="flex-1">
Download
</Button>
<Button variant="secondary" className="flex-1">
Delete
</Button>
<Button className="flex-1">Insert</Button>
</div>
</SheetFooter>
</SheetContent>
</Sheet>
);
}