valknar/scrapy-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add comprehensive mobile responsiveness

Browse Source 
Implemented complete mobile styling improvements for Scrapy UI:

- Mobile-responsive sidebar with hamburger menu (Sheet component)
  - Sidebar hidden on mobile, slides in from left as overlay
  - Auto-closes on navigation
- Mobile header with hamburger button, title, and theme toggle
- Layout switches from horizontal to vertical flexbox on mobile
- Reduced container padding on mobile (p-4 vs p-6)
- All tables wrapped in horizontal scroll containers
- Added whitespace-nowrap to prevent text wrapping in table cells
- Optimized all dialogs for mobile:
  - Responsive width: max-w-[95vw] on mobile, max-w-[425px] on desktop
  - Full-width buttons on mobile
  - Proper gap spacing in footers
  - Text wrapping for long content (break-all for Job IDs)
- Dashboard cards already responsive with grid breakpoints

App now works flawlessly on mobile devices!

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2025-11-05 05:47:41 +01:00
parent 971ef5426d
commit c8184b0984
7 changed files with 475 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
app/(dashboard)/jobs/page.tsx
View File

@@ -242,79 +242,81 @@ export default function JobsPage() {
))} ))}
</div> </div>
) : filteredJobs.length > 0 ? ( ) : filteredJobs.length > 0 ? (
<Table> <div className="overflow-x-auto">
<TableHeader> <Table>
<TableRow> <TableHeader>
<TableHead>Job ID</TableHead> <TableRow>
<TableHead>Spider</TableHead> <TableHead>Job ID</TableHead>
<TableHead>Status</TableHead> <TableHead>Spider</TableHead>
<TableHead>Start Time</TableHead> <TableHead>Status</TableHead>
<TableHead>PID</TableHead> <TableHead className="whitespace-nowrap">Start Time</TableHead>
<TableHead className="text-right">Actions</TableHead> <TableHead>PID</TableHead>
</TableRow> <TableHead className="text-right">Actions</TableHead>
</TableHeader>
<TableBody>
{filteredJobs.map((job) => (
<TableRow key={job.id}>
<TableCell>
<code className="rounded bg-muted px-2 py-1 text-xs">
{job.id.substring(0, 8)}...
</code>
</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<BriefcaseBusiness className="h-4 w-4 text-muted-foreground" />
<span className="font-medium">{job.spider}</span>
</div>
</TableCell>
<TableCell>{getStatusBadge(job.status)}</TableCell>
<TableCell>
<span className="text-sm text-muted-foreground">
{format(new Date(job.start_time), "PPp")}
</span>
</TableCell>
<TableCell>
{job.pid ? (
<code className="text-xs">{job.pid}</code>
) : (
<span className="text-xs text-muted-foreground">-</span>
)}
</TableCell>
<TableCell className="text-right">
<div className="flex items-center justify-end gap-2">
{job.log_url && (
<Button
variant="ghost"
size="sm"
asChild
>
<a
href={job.log_url}
target="_blank"
rel="noopener noreferrer"
>
<ExternalLink className="h-4 w-4" />
</a>
</Button>
)}
{(job.status === "pending" || job.status === "running") && (
<Button
variant="ghost"
size="sm"
onClick={() => {
setSelectedJob(job);
setCancelDialogOpen(true);
}}
>
<XCircle className="h-4 w-4 text-destructive" />
</Button>
)}
</div>
</TableCell>
</TableRow> </TableRow>
))} </TableHeader>
</TableBody> <TableBody>
</Table> {filteredJobs.map((job) => (
<TableRow key={job.id}>
<TableCell>
<code className="rounded bg-muted px-2 py-1 text-xs whitespace-nowrap">
{job.id.substring(0, 8)}...
</code>
</TableCell>
<TableCell>
<div className="flex items-center gap-2 whitespace-nowrap">
<BriefcaseBusiness className="h-4 w-4 text-muted-foreground" />
<span className="font-medium">{job.spider}</span>
</div>
</TableCell>
<TableCell>{getStatusBadge(job.status)}</TableCell>
<TableCell>
<span className="text-sm text-muted-foreground whitespace-nowrap">
{format(new Date(job.start_time), "PPp")}
</span>
</TableCell>
<TableCell>
{job.pid ? (
<code className="text-xs">{job.pid}</code>
) : (
<span className="text-xs text-muted-foreground">-</span>
)}
</TableCell>
<TableCell className="text-right">
<div className="flex items-center justify-end gap-2">
{job.log_url && (
<Button
variant="ghost"
size="sm"
asChild
>
<a
href={job.log_url}
target="_blank"
rel="noopener noreferrer"
>
<ExternalLink className="h-4 w-4" />
</a>
</Button>
)}
{(job.status === "pending" || job.status === "running") && (
<Button
variant="ghost"
size="sm"
onClick={() => {
setSelectedJob(job);
setCancelDialogOpen(true);
}}
>
<XCircle className="h-4 w-4 text-destructive" />
</Button>
)}
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
) : ( ) : (
<div className="flex flex-col items-center justify-center py-12 text-center"> <div className="flex flex-col items-center justify-center py-12 text-center">
<AlertCircle className="mb-4 h-12 w-12 text-muted-foreground" /> <AlertCircle className="mb-4 h-12 w-12 text-muted-foreground" />
@@ -344,7 +346,7 @@ export default function JobsPage() {
{/* Cancel Job Dialog */} {/* Cancel Job Dialog */}
<Dialog open={cancelDialogOpen} onOpenChange={setCancelDialogOpen}> <Dialog open={cancelDialogOpen} onOpenChange={setCancelDialogOpen}>
<DialogContent> <DialogContent className="max-w-[95vw] sm:max-w-[425px]">
<DialogHeader> <DialogHeader>
<DialogTitle>Cancel Job</DialogTitle> <DialogTitle>Cancel Job</DialogTitle>
<DialogDescription> <DialogDescription>
@@ -354,17 +356,18 @@ export default function JobsPage() {
<p className="text-sm"> <p className="text-sm">
<strong>Spider:</strong> {selectedJob.spider} <strong>Spider:</strong> {selectedJob.spider}
</p> </p>
<p className="text-sm"> <p className="text-sm break-all">
<strong>Job ID:</strong> <code>{selectedJob.id}</code> <strong>Job ID:</strong> <code>{selectedJob.id}</code>
</p> </p>
</div> </div>
)} )}
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<DialogFooter> <DialogFooter className="gap-2 sm:gap-0">
<Button <Button
variant="outline" variant="outline"
onClick={() => setCancelDialogOpen(false)} onClick={() => setCancelDialogOpen(false)}
className="w-full sm:w-auto"
> >
No, keep it No, keep it
</Button> </Button>
@@ -372,6 +375,7 @@ export default function JobsPage() {
variant="destructive" variant="destructive"
onClick={handleCancelJob} onClick={handleCancelJob}
disabled={cancelJobMutation.isPending} disabled={cancelJobMutation.isPending}
className="w-full sm:w-auto"
> >
{cancelJobMutation.isPending ? "Canceling..." : "Yes, cancel job"} {cancelJobMutation.isPending ? "Canceling..." : "Yes, cancel job"}
</Button> </Button>

19
app/(dashboard)/layout.tsx
View File

@@ -1,5 +1,6 @@
import { Sidebar } from "@/components/sidebar"; import { Sidebar, MobileSidebar } from "@/components/sidebar";
import { Providers } from "@/components/providers"; import { Providers } from "@/components/providers";
import { ThemeToggle } from "@/components/theme-toggle";
export default function DashboardLayout({ export default function DashboardLayout({
children, children,
@@ -8,10 +9,22 @@ export default function DashboardLayout({
}) { }) {
return ( return (
<Providers> <Providers>
<div className="flex h-screen overflow-hidden"> <div className="flex h-screen flex-col overflow-hidden md:flex-row">
{/* Mobile Header */}
<header className="flex h-16 items-center justify-between border-b bg-card px-4 md:hidden">
<div className="flex items-center gap-3">
<MobileSidebar />
<h1 className="text-lg font-bold">Scrapy UI</h1>
</div>
<ThemeToggle />
</header>
{/* Desktop Sidebar */}
<Sidebar /> <Sidebar />
{/* Main Content */}
<main className="flex-1 overflow-y-auto"> <main className="flex-1 overflow-y-auto">
<div className="container p-6">{children}</div> <div className="container p-4 md:p-6">{children}</div>
</main> </main>
</div> </div>
</Providers> </Providers>

177
app/(dashboard)/projects/page.tsx
View File

@@ -118,7 +118,7 @@ export default function ProjectsPage() {
Upload Project Upload Project
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent> <DialogContent className="max-w-[95vw] sm:max-w-[425px]">
<form onSubmit={handleUpload}> <form onSubmit={handleUpload}>
<DialogHeader> <DialogHeader>
<DialogTitle>Upload Project Version</DialogTitle> <DialogTitle>Upload Project Version</DialogTitle>
@@ -126,7 +126,7 @@ export default function ProjectsPage() {
Upload a Python egg file for your Scrapy project Upload a Python egg file for your Scrapy project
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="gap-4 py-4"> <div className="space-y-4 py-4">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="project">Project Name</Label> <Label htmlFor="project">Project Name</Label>
<Input <Input
@@ -156,10 +156,11 @@ export default function ProjectsPage() {
/> />
</div> </div>
</div> </div>
<DialogFooter> <DialogFooter className="gap-2 sm:gap-0">
<Button <Button
type="submit" type="submit"
disabled={uploadVersionMutation.isPending} disabled={uploadVersionMutation.isPending}
className="w-full sm:w-auto"
> >
{uploadVersionMutation.isPending {uploadVersionMutation.isPending
? "Uploading..." ? "Uploading..."
@@ -185,90 +186,94 @@ export default function ProjectsPage() {
))} ))}
</div> </div>
) : projects?.projects && projects.projects.length > 0 ? ( ) : projects?.projects && projects.projects.length > 0 ? (
<Table> <div className="overflow-x-auto">
<TableHeader> <Table>
<TableRow> <TableHeader>
<TableHead>Project Name</TableHead> <TableRow>
<TableHead>Versions</TableHead> <TableHead>Project Name</TableHead>
<TableHead className="text-right">Actions</TableHead> <TableHead>Versions</TableHead>
</TableRow> <TableHead className="text-right">Actions</TableHead>
</TableHeader>
<TableBody>
{projects.projects.map((project) => (
<TableRow
key={project}
onClick={() => setSelectedProject(project)}
className="cursor-pointer"
>
<TableCell>
<div className="flex items-center gap-2">
<FolderKanban className="h-4 w-4 text-muted-foreground" />
<span className="font-medium">{project}</span>
</div>
</TableCell>
<TableCell>
{selectedProject === project && versions ? (
<Badge variant="secondary">
{versions.versions.length} version(s)
</Badge>
) : (
<Badge variant="outline">Click to load</Badge>
)}
</TableCell>
<TableCell className="text-right">
<Dialog
open={deleteDialogOpen && selectedProject === project}
onOpenChange={(open) => {
setDeleteDialogOpen(open);
if (open) setSelectedProject(project);
}}
>
<DialogTrigger asChild>
<Button
variant="ghost"
size="icon"
onClick={(e) => {
e.stopPropagation();
setSelectedProject(project);
}}
>
<Trash2 className="h-4 w-4 text-destructive" />
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Delete Project</DialogTitle>
<DialogDescription>
Are you sure you want to delete "{project}"? This
action cannot be undone.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button
variant="outline"
onClick={() => setDeleteDialogOpen(false)}
>
Cancel
</Button>
<Button
variant="destructive"
onClick={() =>
deleteProjectMutation.mutate(project)
}
disabled={deleteProjectMutation.isPending}
>
{deleteProjectMutation.isPending
? "Deleting..."
: "Delete"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</TableCell>
</TableRow> </TableRow>
))} </TableHeader>
</TableBody> <TableBody>
</Table> {projects.projects.map((project) => (
<TableRow
key={project}
onClick={() => setSelectedProject(project)}
className="cursor-pointer"
>
<TableCell>
<div className="flex items-center gap-2 whitespace-nowrap">
<FolderKanban className="h-4 w-4 text-muted-foreground" />
<span className="font-medium">{project}</span>
</div>
</TableCell>
<TableCell>
{selectedProject === project && versions ? (
<Badge variant="secondary" className="whitespace-nowrap">
{versions.versions.length} version(s)
</Badge>
) : (
<Badge variant="outline" className="whitespace-nowrap">Click to load</Badge>
)}
</TableCell>
<TableCell className="text-right">
<Dialog
open={deleteDialogOpen && selectedProject === project}
onOpenChange={(open) => {
setDeleteDialogOpen(open);
if (open) setSelectedProject(project);
}}
>
<DialogTrigger asChild>
<Button
variant="ghost"
size="icon"
onClick={(e) => {
e.stopPropagation();
setSelectedProject(project);
}}
>
<Trash2 className="h-4 w-4 text-destructive" />
</Button>
</DialogTrigger>
<DialogContent className="max-w-[95vw] sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Delete Project</DialogTitle>
<DialogDescription>
Are you sure you want to delete "{project}"? This
action cannot be undone.
</DialogDescription>
</DialogHeader>
<DialogFooter className="gap-2 sm:gap-0">
<Button
variant="outline"
onClick={() => setDeleteDialogOpen(false)}
className="w-full sm:w-auto"
>
Cancel
</Button>
<Button
variant="destructive"
onClick={() =>
deleteProjectMutation.mutate(project)
}
disabled={deleteProjectMutation.isPending}
className="w-full sm:w-auto"
>
{deleteProjectMutation.isPending
? "Deleting..."
: "Delete"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
) : ( ) : (
<div className="flex flex-col items-center justify-center py-12 text-center"> <div className="flex flex-col items-center justify-center py-12 text-center">
<AlertCircle className="mb-4 h-12 w-12 text-muted-foreground" /> <AlertCircle className="mb-4 h-12 w-12 text-muted-foreground" />

192
app/(dashboard)/spiders/page.tsx
View File

@@ -158,101 +158,105 @@ export default function SpidersPage() {
))} ))}
</div> </div>
) : spiders?.spiders && spiders.spiders.length > 0 ? ( ) : spiders?.spiders && spiders.spiders.length > 0 ? (
<Table> <div className="overflow-x-auto">
<TableHeader> <Table>
<TableRow> <TableHeader>
<TableHead>Spider Name</TableHead> <TableRow>
<TableHead>Status</TableHead> <TableHead>Spider Name</TableHead>
<TableHead className="text-right">Actions</TableHead> <TableHead>Status</TableHead>
</TableRow> <TableHead className="text-right">Actions</TableHead>
</TableHeader>
<TableBody>
{spiders.spiders.map((spider) => (
<TableRow key={spider}>
<TableCell>
<div className="flex items-center gap-2">
<Bug className="h-4 w-4 text-muted-foreground" />
<span className="font-medium">{spider}</span>
</div>
</TableCell>
<TableCell>
<Badge variant="secondary">Available</Badge>
</TableCell>
<TableCell className="text-right">
<Dialog
open={scheduleDialogOpen && selectedSpider === spider}
onOpenChange={(open) => {
setScheduleDialogOpen(open);
if (open) setSelectedSpider(spider);
}}
>
<DialogTrigger asChild>
<Button
size="sm"
onClick={() => setSelectedSpider(spider)}
>
<PlayCircle className="mr-2 h-4 w-4" />
Schedule
</Button>
</DialogTrigger>
<DialogContent>
<form onSubmit={handleSchedule}>
<DialogHeader>
<DialogTitle>Schedule Spider Job</DialogTitle>
<DialogDescription>
Schedule "{spider}" to run on "{selectedProject}"
</DialogDescription>
</DialogHeader>
<div className="gap-4 py-4">
<div className="space-y-2">
<Label htmlFor="project-name">Project</Label>
<Input
id="project-name"
value={selectedProject}
disabled
/>
</div>
<div className="space-y-2">
<Label htmlFor="spider-name">Spider</Label>
<Input
id="spider-name"
value={spider}
disabled
/>
</div>
<div className="space-y-2">
<Label htmlFor="args">
Arguments (JSON)
</Label>
<Textarea
id="args"
name="args"
placeholder='{"url": "https://example.com", "pages": 10}'
className="font-mono text-sm"
/>
<p className="text-xs text-muted-foreground">
Optional: Provide spider arguments in JSON format
</p>
</div>
</div>
<DialogFooter>
<Button
type="submit"
disabled={scheduleJobMutation.isPending}
>
{scheduleJobMutation.isPending
? "Scheduling..."
: "Schedule Job"}
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
</TableCell>
</TableRow> </TableRow>
))} </TableHeader>
</TableBody> <TableBody>
</Table> {spiders.spiders.map((spider) => (
<TableRow key={spider}>
<TableCell>
<div className="flex items-center gap-2 whitespace-nowrap">
<Bug className="h-4 w-4 text-muted-foreground" />
<span className="font-medium">{spider}</span>
</div>
</TableCell>
<TableCell>
<Badge variant="secondary" className="whitespace-nowrap">Available</Badge>
</TableCell>
<TableCell className="text-right">
<Dialog
open={scheduleDialogOpen && selectedSpider === spider}
onOpenChange={(open) => {
setScheduleDialogOpen(open);
if (open) setSelectedSpider(spider);
}}
>
<DialogTrigger asChild>
<Button
size="sm"
onClick={() => setSelectedSpider(spider)}
className="whitespace-nowrap"
>
<PlayCircle className="mr-2 h-4 w-4" />
Schedule
</Button>
</DialogTrigger>
<DialogContent className="max-w-[95vw] sm:max-w-[425px]">
<form onSubmit={handleSchedule}>
<DialogHeader>
<DialogTitle>Schedule Spider Job</DialogTitle>
<DialogDescription>
Schedule "{spider}" to run on "{selectedProject}"
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label htmlFor="project-name">Project</Label>
<Input
id="project-name"
value={selectedProject}
disabled
/>
</div>
<div className="space-y-2">
<Label htmlFor="spider-name">Spider</Label>
<Input
id="spider-name"
value={spider}
disabled
/>
</div>
<div className="space-y-2">
<Label htmlFor="args">
Arguments (JSON)
</Label>
<Textarea
id="args"
name="args"
placeholder='{"url": "https://example.com", "pages": 10}'
className="font-mono text-sm"
/>
<p className="text-xs text-muted-foreground">
Optional: Provide spider arguments in JSON format
</p>
</div>
</div>
<DialogFooter className="gap-2 sm:gap-0">
<Button
type="submit"
disabled={scheduleJobMutation.isPending}
className="w-full sm:w-auto"
>
{scheduleJobMutation.isPending
? "Scheduling..."
: "Schedule Job"}
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
) : ( ) : (
<div className="flex flex-col items-center justify-center py-12 text-center"> <div className="flex flex-col items-center justify-center py-12 text-center">
<AlertCircle className="mb-4 h-12 w-12 text-muted-foreground" /> <AlertCircle className="mb-4 h-12 w-12 text-muted-foreground" />

6
app/layout.tsx
View File

@@ -24,10 +24,8 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" className={`${geistSans.className} ${geistMono.className} antialiased`} suppressHydrationWarning>
<body <body>
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"
defaultTheme="system" defaultTheme="system"

57
components/sidebar.tsx
View File

@@ -1,5 +1,6 @@
"use client"; "use client";
import { useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@@ -9,8 +10,16 @@ import {
Bug, Bug,
BriefcaseBusiness, BriefcaseBusiness,
Activity, Activity,
Menu,
} from "lucide-react"; } from "lucide-react";
import { ThemeToggle } from "./theme-toggle"; import { ThemeToggle } from "./theme-toggle";
import { Button } from "./ui/button";
import {
Sheet,
SheetContent,
SheetHeader,
SheetTitle,
} from "./ui/sheet";
const routes = [ const routes = [
{ {
@@ -41,14 +50,11 @@ const routes = [
}, },
]; ];
export function Sidebar() { function SidebarContent({ onNavigate }: { onNavigate?: () => void }) {
const pathname = usePathname(); const pathname = usePathname();
return ( return (
<div className="flex h-full w-64 flex-col border-r bg-card"> <>
<div className="flex h-16 items-center border-b px-6">
<h1 className="text-xl font-bold">Scrapy UI</h1>
</div>
<nav className="flex-1 gap-1 p-4"> <nav className="flex-1 gap-1 p-4">
{routes.map((route) => { {routes.map((route) => {
const isActive = route.exact const isActive = route.exact
@@ -59,6 +65,7 @@ export function Sidebar() {
<Link <Link
key={route.href} key={route.href}
href={route.href} href={route.href}
onClick={onNavigate}
className={cn( className={cn(
"flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors", "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
isActive isActive
@@ -78,6 +85,46 @@ export function Sidebar() {
<ThemeToggle /> <ThemeToggle />
</div> </div>
</div> </div>
</>
);
}
export function Sidebar() {
return (
<div className="hidden md:flex h-full w-64 flex-col border-r bg-card">
<div className="flex h-16 items-center border-b px-6">
<h1 className="text-xl font-bold">Scrapy UI</h1>
</div>
<SidebarContent />
</div> </div>
); );
} }
export function MobileSidebar() {
const [open, setOpen] = useState(false);
return (
<>
<Button
variant="ghost"
size="icon"
className="md:hidden"
onClick={() => setOpen(true)}
>
<Menu className="h-5 w-5" />
<span className="sr-only">Toggle menu</span>
</Button>
<Sheet open={open} onOpenChange={setOpen}>
<SheetContent side="left" className="w-64 p-0">
<div className="flex h-full flex-col">
<SheetHeader className="flex h-16 items-center border-b px-6 flex-row">
<SheetTitle className="text-xl font-bold">Scrapy UI</SheetTitle>
</SheetHeader>
<SidebarContent onNavigate={() => setOpen(false)} />
</div>
</SheetContent>
</Sheet>
</>
);
}

137
components/ui/sheet.tsx Normal file
View File

@@ -0,0 +1,137 @@
"use client"
import * as React from "react"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { Cross2Icon } from "@radix-ui/react-icons"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const Sheet = SheetPrimitive.Root
const SheetTrigger = SheetPrimitive.Trigger
const SheetClose = SheetPrimitive.Close
const SheetPortal = SheetPrimitive.Portal
const SheetOverlay = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
ref={ref}
/>
))
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
const sheetVariants = cva(
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
{
variants: {
side: {
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
bottom:
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
right:
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
},
},
defaultVariants: {
side: "right",
},
}
)
interface SheetContentProps
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
VariantProps<typeof sheetVariants> {}
const SheetContent = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Content>,
SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
<SheetPortal>
<SheetOverlay />
<SheetPrimitive.Content
ref={ref}
className={cn(sheetVariants({ side }), className)}
{...props}
>
{children}
<SheetPrimitive.Close className="absolute right-4 top-6 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none data-[state=open]:bg-secondary">
<Cross2Icon className="h-4 w-4" />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
</SheetPrimitive.Content>
</SheetPortal>
))
SheetContent.displayName = SheetPrimitive.Content.displayName
const SheetHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
{...props}
/>
)
SheetHeader.displayName = "SheetHeader"
const SheetFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end gap-2",
className
)}
{...props}
/>
)
SheetFooter.displayName = "SheetFooter"
const SheetTitle = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Title
ref={ref}
className={cn("text-lg font-semibold text-foreground", className)}
{...props}
/>
))
SheetTitle.displayName = SheetPrimitive.Title.displayName
const SheetDescription = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
SheetDescription.displayName = SheetPrimitive.Description.displayName
export {
Sheet,
SheetPortal,
SheetOverlay,
SheetTrigger,
SheetClose,
SheetContent,
SheetHeader,
SheetFooter,
SheetTitle,
SheetDescription,
}