Add next-intl to internationalize our project

app/[locale]/(backend)/users/components/UserFormWrapper.tsx

@@ -0,0 +1,73 @@
+"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>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>
+  )
+}