File Input
A file input component for selecting files
The FileInput component provides an interface for selecting files.
It features a customizable button with an icon and displays the selected file name.
Usage
javascript
1import FileInput from "@/components/atoms/FileInput"; 2 3<FileInput 4 onFileChange={(file) => console.log(file)} 5/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Drop files here, or click to select" | The text to display in the component. |
| placeholder | string | "No file selected" | The placeholder text to display when no file is selected. |
| color | string | "gray" | The base color (use tailwind.config). |
| borderRadius | string | "lg" | The border radius of the component (uses Tailwind classes). |
| border | boolean | true | If true, a border is displayed around the component. |
| icon | ReactNode | <FiFilePlus /> | The icon to display in the component. |
| className | string | "" | Additional Tailwind utility classes. |
| buttonClassName | string | "" | Additional Tailwind utility classes for the button. |
| inputClassName | string | "" | Additional Tailwind utility classes for the input. |
| onFileChange | function | - | The function to call when a file is selected. |
| ...props | object | - | Any other valid HTML attributes. |