style: 💄 add file-input

julianoalvescode · Apr 9, 2024 · bd2be94 · bd2be94
1 parent d5f2cc6
commit bd2be94
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 27 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,6 +1,7 @@
 import { SettingsTabs } from "@/components/SettingsTabs";
 import * as Input from "@/components/Input";
-import { Mail, UploadCloud, User } from "lucide-react";
+import { Mail } from "lucide-react";
+import * as FileInput from "@/components/Form/FileInput";
 
 export default function Home() {
   return (
@@ -82,31 +83,12 @@ export default function Home() {
                 This will be displayed on your profile.
               </span>
             </label>
-            <div className="flex items-start gap-5">
-              <div className="bg-violet-50 flex h-16 w-16 items-center justify-center rounded-full">
-                <User className="w-8 h-8 text-violet-500" />
-              </div>
-              <label
-                htmlFor="photo"
-                className="group flex flex-1 cursor-pointer flex-col items-center gap-3 rounded-lg border border-zinc-300 px-6 py-4 text-center text-zinc-500 shadow-sm hover:border-violet-200 hover:bg-violet-25 hover:text-violet-500"
-              >
-                <div className="rounded-full border-6 border-zinc-50 bg-zinc-100 p-2 group-hover:border-violet-50 group-hover:bg-violet-100">
-                  <UploadCloud className="h-5 w-5 text-zinc-600 group-hover:text-violet-600" />
-                </div>
-                <div className="flex flex-col items-center gap-1">
-                  <span className="text-sm">
-                    <span className="font-semibold text-violet-700">
-                      Click to upload
-                    </span>{" "}
-                    or drag and drop
-                  </span>
-                  <span className="text-xs">
-                    SVG, PNG, JPG or GIF (max. 800x400px)
-                  </span>
-                </div>
-              </label>
-              <input type="file" className="sr-only" id="photo" />
-            </div>
+
+            <FileInput.Root className="flex items-start gap-5">
+              <FileInput.ImagePreview />
+              <FileInput.Trigger />
+              <FileInput.Control />
+            </FileInput.Root>
           </div>
 
           <div className="grid grid-cols-form gap-3 pt-5">
@@ -158,7 +140,10 @@ export default function Home() {
                 Share a few snippets of your work.
               </span>
             </label>
-            <div />
+            <FileInput.Root>
+              <FileInput.Trigger />
+              <FileInput.Control multiple />
+            </FileInput.Root>
           </div>
 
           <div className="flex items-center justify-end gap-2 pt-5">

diff --git a/src/components/Form/FileInput/Control.tsx b/src/components/Form/FileInput/Control.tsx
@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+
+export type ControlProps = ComponentProps<"input">;
+
+export function Control(props: ControlProps) {
+  return <input type="file" className="sr-only" id="photo" {...props} />;
+}
diff --git a/src/components/Form/FileInput/ImagePreview.tsx b/src/components/Form/FileInput/ImagePreview.tsx
@@ -0,0 +1,9 @@
+import { User } from "lucide-react";
+
+export function ImagePreview() {
+  return (
+    <div className="flex h-16 w-16 items-center justify-center rounded-full bg-violet-50">
+      <User className="h-8 w-8 text-violet-500" />
+    </div>
+  );
+}
diff --git a/src/components/Form/FileInput/Root.tsx b/src/components/Form/FileInput/Root.tsx
@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+
+export type RootProps = ComponentProps<"div">;
+
+export function Root(props: RootProps) {
+  return <div {...props} />;
+}
diff --git a/src/components/Form/FileInput/Trigger.tsx b/src/components/Form/FileInput/Trigger.tsx
@@ -0,0 +1,22 @@
+import { UploadCloud } from "lucide-react";
+
+export function Trigger() {
+  return (
+    <label
+      htmlFor="photo"
+      className="group flex flex-1 cursor-pointer flex-col items-center gap-3 rounded-lg border border-zinc-300 px-6 py-4 text-center text-zinc-500 shadow-sm hover:border-violet-200 hover:bg-violet-25 hover:text-violet-500"
+    >
+      <div className="rounded-full border-6 border-zinc-50 bg-zinc-100 p-2 group-hover:border-violet-50 group-hover:bg-violet-100">
+        <UploadCloud className="h-5 w-5 text-zinc-600 group-hover:text-violet-600" />
+      </div>
+
+      <div className="flex flex-col items-center gap-1">
+        <span className="text-sm">
+          <span className="font-semibold text-violet-700">Click to upload</span>{" "}
+          or drag and drop
+        </span>
+        <span className="text-xs">SVG, PNG, JPG or GIF (max. 800x400px)</span>
+      </div>
+    </label>
+  );
+}
diff --git a/src/components/Form/FileInput/index.tsx b/src/components/Form/FileInput/index.tsx
@@ -0,0 +1,6 @@
+import { Control } from "./Control";
+import { ImagePreview } from "./ImagePreview";
+import { Root } from "./Root";
+import { Trigger } from "./Trigger";
+
+export { Control, ImagePreview, Root, Trigger };