Poyraz
24fcdf9a77
- Introduced `Field` and `Label` components for better form handling. - Refactored `Input` and `Textarea` components to use forward refs and improved styling. - Updated `PendingSubmitButton` to use the new `Button` component. - Enhanced `Skeleton` component for better layout handling. - Revamped `Toast` component to support live regions and improved accessibility. - Updated sidebar configuration to use typed icons. - Added phase 3 UI boundary checks to prevent usage of deprecated imports. - Implemented new authentication action handler for better cookie management. - Improved setup logic for freelancer accounts with repair functionality.
52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import type { ComponentPropsWithoutRef, ReactNode } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function Label({ className, ...props }: ComponentPropsWithoutRef<"label">) {
|
|
return (
|
|
<label
|
|
className={cn("text-sm font-medium leading-none text-foreground", className)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
type FieldProps = ComponentPropsWithoutRef<"div"> & {
|
|
label?: ReactNode;
|
|
description?: ReactNode;
|
|
error?: ReactNode;
|
|
htmlFor?: string;
|
|
};
|
|
|
|
export function Field({
|
|
label,
|
|
description,
|
|
error,
|
|
htmlFor,
|
|
children,
|
|
className,
|
|
...props
|
|
}: FieldProps) {
|
|
const descriptionId = htmlFor && description ? `${htmlFor}-description` : undefined;
|
|
const errorId = htmlFor && error ? `${htmlFor}-error` : undefined;
|
|
|
|
return (
|
|
<div className={cn("space-y-2", className)} {...props}>
|
|
{label ? <Label htmlFor={htmlFor}>{label}</Label> : null}
|
|
{children}
|
|
{description ? (
|
|
<p id={descriptionId} className="text-xs leading-5 text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
) : null}
|
|
{error ? (
|
|
<p id={errorId} role="alert" className="text-xs leading-5 text-destructive">
|
|
{error}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|