73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { Plus } from "lucide-react"
|
|
import { useMediaQuery } from "@/hooks/use-media-query"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog"
|
|
import {
|
|
Drawer,
|
|
DrawerClose,
|
|
DrawerContent,
|
|
DrawerFooter,
|
|
DrawerHeader,
|
|
DrawerTitle,
|
|
DrawerTrigger,
|
|
} from "@/components/ui/drawer"
|
|
import UserForm from "./UserForm"
|
|
|
|
export function UserFormWrapper() {
|
|
const [open, setOpen] = React.useState(false)
|
|
const isDesktop = useMediaQuery("(min-width: 768px)")
|
|
|
|
// Common button content
|
|
const TriggerButton = (
|
|
<Button
|
|
variant="default"
|
|
className="bg-secondary hover:bg-secondary/90 border border-border rounded-lg cursor-pointer h-10"
|
|
>
|
|
<Plus className="text-muted-foreground size-5 md:mr-2" />
|
|
<span className="hidden md:inline text-sm text-muted-foreground">
|
|
Add New User
|
|
</span>
|
|
</Button>
|
|
)
|
|
|
|
if (isDesktop) {
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>
|
|
{TriggerButton}
|
|
</DialogTrigger>
|
|
<DialogContent className="sm:max-w-106.25 bg-card text-white border-border">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-muted-foreground">Add New User</DialogTitle>
|
|
</DialogHeader>
|
|
<UserForm />
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Drawer open={open} onOpenChange={setOpen}>
|
|
<DrawerTrigger asChild>
|
|
{TriggerButton}
|
|
</DrawerTrigger>
|
|
<DrawerContent className="bg-card border-border text-white max-h-[96dvh]">
|
|
<DrawerHeader className="text-left">
|
|
<DrawerTitle>Add New User</DrawerTitle>
|
|
</DrawerHeader>
|
|
<div className="px-4 overflow-y-auto pb-4">
|
|
<UserForm />
|
|
</div>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
)
|
|
} |