73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
// components/ui/form.tsx
|
|
"use client";
|
|
|
|
import * as React from "react";
|
|
import { cn } from "@/lib/cn";
|
|
|
|
export const labelClass = "text-xs font-medium text-zinc-400";
|
|
|
|
export const inputBaseClass =
|
|
"w-full rounded-md border border-zinc-800 bg-zinc-900/70 px-3 py-2 text-sm text-zinc-50 " +
|
|
"placeholder:text-zinc-500 focus:outline-none focus:ring-1 focus:ring-amber-400";
|
|
|
|
export const buttonBaseClass =
|
|
"w-full rounded-md border border-amber-400/70 bg-amber-400/20 px-3 py-2 text-sm font-semibold text-amber-100 " +
|
|
"hover:bg-amber-400/30 disabled:cursor-not-allowed disabled:opacity-50 transition-colors";
|
|
|
|
export const Input = React.forwardRef<
|
|
HTMLInputElement,
|
|
React.InputHTMLAttributes<HTMLInputElement>
|
|
>(function Input({ className, ...props }, ref) {
|
|
return <input ref={ref} className={cn(inputBaseClass, className)} {...props} />;
|
|
});
|
|
|
|
export const Textarea = React.forwardRef<
|
|
HTMLTextAreaElement,
|
|
React.TextareaHTMLAttributes<HTMLTextAreaElement>
|
|
>(function Textarea({ className, ...props }, ref) {
|
|
return (
|
|
<textarea ref={ref} className={cn(inputBaseClass, className)} {...props} />
|
|
);
|
|
});
|
|
|
|
export function Button({
|
|
className,
|
|
...props
|
|
}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
|
|
return <button className={cn(buttonBaseClass, className)} {...props} />;
|
|
}
|
|
|
|
type FieldProps = {
|
|
label: string;
|
|
htmlFor: string;
|
|
hint?: React.ReactNode;
|
|
error?: React.ReactNode;
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
export function Field({
|
|
label,
|
|
htmlFor,
|
|
hint,
|
|
error,
|
|
className,
|
|
children,
|
|
}: FieldProps) {
|
|
return (
|
|
<div className={cn("space-y-1", className)}>
|
|
<label className={labelClass} htmlFor={htmlFor}>
|
|
{label}
|
|
</label>
|
|
|
|
{children}
|
|
|
|
{error ? (
|
|
<p className="text-xs text-red-300">{error}</p>
|
|
) : hint ? (
|
|
<p className="text-xs text-zinc-500">{hint}</p>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|