feat: improve loaders and styles

components/forms/simple.tsx

@@ -1,9 +1,16 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
 import { Input } from "@/components/ui/input"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Textarea } from "@/components/ui/textarea"
 import { cn } from "@/lib/utils"
 import { SelectProps } from "@radix-ui/react-select"
-import { InputHTMLAttributes, TextareaHTMLAttributes } from "react"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import { InputHTMLAttributes, TextareaHTMLAttributes, useState } from "react"
 
 type FormInputProps = InputHTMLAttributes<HTMLInputElement> & {
   title: string
@@ -75,3 +82,68 @@ export const FormSelect = ({
     </span>
   )
 }
+
+export const FormDate = ({
+  title,
+  name,
+  placeholder = "Select date",
+  defaultValue,
+  ...props
+}: {
+  title: string
+  name: string
+  placeholder?: string
+  defaultValue?: Date
+}) => {
+  const [date, setDate] = useState<Date | undefined>(defaultValue)
+  const [manualInput, setManualInput] = useState<string>(date ? format(date, "yyyy-MM-dd") : "")
+
+  const handleDateSelect = (newDate: Date | undefined) => {
+    setDate(newDate)
+    setManualInput(newDate ? format(newDate, "yyyy-MM-dd") : "")
+  }
+
+  const handleManualInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setManualInput(e.target.value)
+    setDate(undefined)
+    try {
+      const newDate = new Date(e.currentTarget.value)
+      if (!isNaN(newDate.getTime())) {
+        setDate(newDate)
+      }
+    } catch (error) {}
+  }
+
+  return (
+    <label className="flex flex-col gap-1">
+      <span className="text-sm font-medium">{title}</span>
+      <div className="relative">
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button
+              type="button"
+              variant={"outline"}
+              className={cn(
+                "w-full justify-start text-left font-normal bg-background",
+                !date && "text-muted-foreground"
+              )}
+            >
+              {date ? format(date, "PPP") : placeholder}
+              <CalendarIcon className="ml-1 h-4 w-4 text-muted-foreground" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto p-1 flex flex-col gap-2" align="start">
+            <Input
+              type="text"
+              name={name}
+              value={manualInput}
+              onChange={handleManualInputChange}
+              className="text-center"
+            />
+            <Calendar mode="single" selected={date} onSelect={handleDateSelect} initialFocus {...props} />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </label>
+  )
+}