quivr/frontend/app/components/ui/Field.tsx
!MAD! f69c64ead1
Toasts (Notification Component) (#163)
* feature: responsive navbar

* style: nav links hover animatiosn

* style: better Input Fields

* refactor: use form submit instead of button onclick

* feature: loading states

* feature: log out confirmation

* feature: basic toast

* feature: Toast variants

* fix: use global toast provider

* feature: use toast instead of alert for auth routes

* fix(mobile): nav menu close on route change

* fix: field dark mode

* feature: redirect when login and logout

* refactor: group auth routes

* refactor: use @/app imports

* style: use Field on /upload

* fix: forward ref

* feature: Multi toast

* feature: add toasts to /upload

* refactor: new login in auth group

* chore: quote

* chore(pnpm): removed

* feature: toasty animations

* fix: build errors and warnings

* chore: remove irrelevant comments

* fix: use unique ids for toasts

---------

Co-authored-by: Stan Girard <girard.stanislas@gmail.com>
2023-05-26 10:57:29 +02:00

42 lines
966 B
TypeScript

import { cn } from "@/lib/utils";
import {
DetailedHTMLProps,
FC,
InputHTMLAttributes,
RefObject,
forwardRef,
} from "react";
interface FieldProps
extends DetailedHTMLProps<
InputHTMLAttributes<HTMLInputElement>,
HTMLInputElement
> {
label?: string;
name: string;
}
const Field = forwardRef(
({ label, className, name, id, ...props }: FieldProps, forwardedRef) => {
return (
<fieldset className={cn("flex flex-col w-full", className)} name={name}>
{label && (
<label htmlFor={name} className="text-sm">
{label}
</label>
)}
<input
ref={forwardedRef as RefObject<HTMLInputElement>}
className="w-full bg-gray-50 dark:bg-gray-900 px-4 py-2 border rounded-md border-black/10 dark:border-white/25"
name={name}
id={name}
{...props}
/>
</fieldset>
);
}
);
Field.displayName = "Field";
export default Field;