docs(fileinput): standalone page for FileInput component

themesberg · Nov 20, 2023 · 114f078 · 114f078
1 parent 8550e7e
commit 114f078
Show file tree

Hide file tree

Showing 12 changed files with 607 additions and 8 deletions.
diff --git a/content/docs/forms/file-input.mdx b/content/docs/forms/file-input.mdx
@@ -0,0 +1,54 @@
+---
+title: React File Input - Flowbite
+description: Get started with the file input component to let the user to upload one or more files from their device storage based on multiple styles and sizes
+---
+
+The `<FileInput>` component can be used to upload one or more files from the device storage of the user available in multiple sizes, styles, and variants and built with the utility-first classes from Tailwind CSS including support for dark mode.
+
+Make sure that you have included Flowbite as a plugin inside your Tailwind CSS project to apply all the necessary styles for the `<FileInput>` component.
+
+To start using the component make sure that you have imported it from Flowbite React:
+
+```jsx
+import { FileInput } from 'flowbite-react';
+```
+
+## File upload example
+
+Get started with a simple `<FileInput>` component to let users upload one single file.
+
+<Example name="fileInput.root" />
+
+## Helper text
+
+Add a descriptive helper text to inform users the allowed extensions and sizes of the files.
+
+<Example name="fileInput.helper" />
+
+## Multiple files
+
+Apply the multiple attribute to the `<FileInput>` component to allow more files to be uploaded.
+
+<Example name="fileInput.multiple" />
+
+## Sizes
+
+Choose from the small, default, and large `<FileInput>` sizing options.
+
+<Example name="fileInput.sizes" />
+
+## Dropzone
+
+The dropzone `<FileInput>` component can be used to upload one or more files by clicking anywhere in the area.
+
+<Example name="fileInput.dropzone" />
+
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<Theme name="fileInput" />
+
+## References
+
+- [Flowbite File Input](https://flowbite.com/docs/forms/file-input/)
diff --git a/data/components.tsx b/data/components.tsx
@@ -210,13 +210,13 @@ export const COMPONENTS_DATA: Component[] = [
   //   link: `/docs/forms/input-field`,
   //   classes: 'w-40'
   // },
-  // {
-  //   name: 'File Input',
-  //   image: '/images/components/file-input.svg',
-  //   imageDark: '/images/components/file-input-dark.svg',
-  //   link: `/docs/forms/file-input`,
-  //   classes: 'w-48'
-  // },
+  {
+    name: 'File Input',
+    image: '/images/components/file-input.svg',
+    imageDark: '/images/components/file-input-dark.svg',
+    link: `/docs/forms/file-input`,
+    classes: 'w-48',
+  },
   // {
   //   name: 'Search Input',
   //   image: '/images/components/search-input.svg',

diff --git a/data/docs-sidebar.ts b/data/docs-sidebar.ts
@@ -71,7 +71,10 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
   {
     title: 'forms',
     href: '/forms/',
-    items: [{ title: 'Floating Label', href: '/docs/forms/floating-label', isNew: true }],
+    items: [
+      { title: 'File Input', href: '/docs/forms/file-input' },
+      { title: 'Floating Label', href: '/docs/forms/floating-label', isNew: true },
+    ],
   },
   {
     title: 'typography',

diff --git a/examples/fileInput/fileInput.dropzone.tsx b/examples/fileInput/fileInput.dropzone.tsx
@@ -0,0 +1,133 @@
+import { type CodeData } from '~/components/code-demo';
+import { FileInput, Label } from '~/src';
+
+const code = `
+'use client';
+
+import { FileInput, Label } from 'flowbite-react';
+
+function Component() {
+  return (
+    <div className="flex w-full items-center justify-center">
+      <Label
+        htmlFor="dropzone-file"
+        className="dark:hover:bg-bray-800 flex h-64 w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+      >
+        <div className="flex flex-col items-center justify-center pb-6 pt-5">
+          <svg
+            className="mb-4 h-8 w-8 text-gray-500 dark:text-gray-400"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 20 16"
+          >
+            <path
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLineJoin="round"
+              strokeWidth="2"
+              d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
+            />
+          </svg>
+          <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
+            <span className="font-semibold">Click to upload</span> or drag and drop
+          </p>
+          <p className="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
+        </div>
+        <FileInput id="dropzone-file" className="hidden" />
+      </Label>
+    </div>
+  );
+}
+`;
+
+const codeRSC = `
+
+import { FileInput, Label } from 'flowbite-react';
+
+function Component() {
+  return (
+    <div className="flex w-full items-center justify-center">
+      <Label
+        htmlFor="dropzone-file"
+        className="dark:hover:bg-bray-800 flex h-64 w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+      >
+        <div className="flex flex-col items-center justify-center pb-6 pt-5">
+          <svg
+            className="mb-4 h-8 w-8 text-gray-500 dark:text-gray-400"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 20 16"
+          >
+            <path
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
+            />
+          </svg>
+          <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
+            <span className="font-semibold">Click to upload</span> or drag and drop
+          </p>
+          <p className="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
+        </div>
+        <FileInput id="dropzone-file" className="hidden" />
+      </Label>
+    </div>
+  );
+}
+`;
+
+function Component() {
+  return (
+    <div className="flex w-full items-center justify-center">
+      <Label
+        htmlFor="dropzone-file"
+        className="dark:hover:bg-bray-800 flex h-64 w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+      >
+        <div className="flex flex-col items-center justify-center pb-6 pt-5">
+          <svg
+            className="mb-4 h-8 w-8 text-gray-500 dark:text-gray-400"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 20 16"
+          >
+            <path
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
+            />
+          </svg>
+          <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
+            <span className="font-semibold">Click to upload</span> or drag and drop
+          </p>
+          <p className="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
+        </div>
+        <FileInput id="dropzone-file" className="hidden" />
+      </Label>
+    </div>
+  );
+}
+
+export const dropzone: CodeData = {
+  type: 'single',
+  code: [
+    {
+      fileName: 'client',
+      language: 'tsx',
+      code,
+    },
+    {
+      fileName: 'server',
+      language: 'tsx',
+      code: codeRSC,
+    },
+  ],
+  githubSlug: 'fileInput/fileInput.dropzone.tsx',
+  component: <Component />,
+};
diff --git a/examples/fileInput/fileInput.helper.tsx b/examples/fileInput/fileInput.helper.tsx
@@ -0,0 +1,64 @@
+import { type CodeData } from '~/components/code-demo';
+import { FileInput, Label } from '~/src';
+
+const code = `
+'use client';
+
+import { FileInput, Label } from 'flowbite-react';
+
+function Component() {
+  return (
+    <div>
+      <div>
+        <Label htmlFor="file-upload-helper-text" value="Upload file" />
+      </div>
+      <FileInput id="file-upload-helper-text" helperText="SVG, PNG, JPG or GIF (MAX. 800x400px)." />
+    </div>
+  );
+}
+`;
+
+const codeRSC = `
+
+import { FileInput, Label } from 'flowbite-react';
+
+function Component() {
+  return (
+    <div>
+      <div>
+        <Label htmlFor="file-upload-helper-text" value="Upload file" />
+      </div>
+      <FileInput id="file-upload-helper-text" helperText="SVG, PNG, JPG or GIF (MAX. 800x400px)." />
+    </div>
+  );
+}
+`;
+
+function Component() {
+  return (
+    <div>
+      <div>
+        <Label htmlFor="file-upload-helper-text" value="Upload file" />
+      </div>
+      <FileInput id="file-upload-helper-text" helperText="SVG, PNG, JPG or GIF (MAX. 800x400px)." />
+    </div>
+  );
+}
+
+export const helper: CodeData = {
+  type: 'single',
+  code: [
+    {
+      fileName: 'client',
+      language: 'tsx',
+      code,
+    },
+    {
+      fileName: 'server',
+      language: 'tsx',
+      code: codeRSC,
+    },
+  ],
+  githubSlug: 'fileInput/fileInput.helper.tsx',
+  component: <Component />,
+};
diff --git a/examples/fileInput/fileInput.multiple.tsx b/examples/fileInput/fileInput.multiple.tsx
@@ -0,0 +1,64 @@
+import { type CodeData } from '~/components/code-demo';
+import { FileInput, Label } from '~/src';
+
+const code = `
+'use client';
+
+import { FileInput, Label } from 'flowbite-react';
+
+function Component() {
+  return (
+    <div>
+      <div>
+        <Label htmlFor="multiple-file-upload" value="Upload multiple files" />
+      </div>
+      <FileInput id="multiple-file-upload" multiple />
+    </div>
+  );
+}
+`;
+
+const codeRSC = `
+
+import { FileInput, Label } from 'flowbite-react';
+
+function Component() {
+  return (
+    <div>
+      <div>
+        <Label htmlFor="multiple-file-upload" value="Upload multiple files" />
+      </div>
+      <FileInput id="multiple-file-upload" multiple />
+    </div>
+  );
+}
+`;
+
+function Component() {
+  return (
+    <div>
+      <div>
+        <Label htmlFor="multiple-file-upload" value="Upload multiple files" />
+      </div>
+      <FileInput id="multiple-file-upload" multiple />
+    </div>
+  );
+}
+
+export const multiple: CodeData = {
+  type: 'single',
+  code: [
+    {
+      fileName: 'client',
+      language: 'tsx',
+      code,
+    },
+    {
+      fileName: 'server',
+      language: 'tsx',
+      code: codeRSC,
+    },
+  ],
+  githubSlug: 'fileInput/fileInput.multiple.tsx',
+  component: <Component />,
+};