gitea

frontend/components/ui/select.tsx

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    label?: string
+    error?: string
+    hint?: string
+    options: { value: string | number; label: string }[]
+}
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+    ({ className, label, error, hint, id, options, ...props }, ref) => {
+        const selectId = id || React.useId()
+
+        return (
+            <div className="w-full">
+                {label && (
+                    <label
+                        htmlFor={selectId}
+                        className="mb-1.5 block text-sm font-medium text-foreground"
+                    >
+                        {label}
+                    </label>
+                )}
+                <select
+                    id={selectId}
+                    className={cn(
+                        "flex h-10 w-full appearance-none rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent disabled:cursor-not-allowed disabled:opacity-50",
+                        "bg-[url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23666%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E')] bg-[length:1.25rem] bg-[right_0.5rem_center] bg-no-repeat pr-10",
+                        error && "border-destructive focus-visible:ring-destructive",
+                        className
+                    )}
+                    ref={ref}
+                    {...props}
+                >
+                    {options.map((option) => (
+                        <option key={option.value} value={option.value}>
+                            {option.label}
+                        </option>
+                    ))}
+                </select>
+                {hint && !error && (
+                    <p className="mt-1 text-xs text-muted-foreground">{hint}</p>
+                )}
+                {error && (
+                    <p className="mt-1 text-xs text-destructive">{error}</p>
+                )}
+            </div>
+        )
+    }
+)
+Select.displayName = "Select"
+
+export { Select }