applying composition patterns to Input

src/app/components/Form/FileInput/Control.tsx

@@ -1,5 +1,7 @@
-export interface ControlProps {}
+import { ComponentProps } from 'react'
+
+export type ControlProps = ComponentProps<'input'>
 
 export function Control(props: ControlProps) {
-  return <div></div>
+  return <input type="file" className="sr-only" id="photo" {...props}></input>
 }

src/app/components/Form/FileInput/ImagePreview.tsx

@@ -1,5 +1,9 @@
-export interface ImagePreviewProps {}
+import { User } from 'lucide-react'
 
-export function ImagePreview(props: ImagePreviewProps) {
-  return <div></div>
+export function ImagePreview() {
+  return (
+    <div className="bg-violet-50 flex size-16 items-center justify-center rounded-full">
+      <User className="size-8 text-violet-500" />
+    </div>
+  )
 }

src/app/components/Form/FileInput/Root.tsx

@@ -1,5 +1,7 @@
-export interface RootProps {}
+import { ComponentProps } from 'react'
+
+export type RootProps = ComponentProps<'div'>
 
 export function Root(props: RootProps) {
-  return <div></div>
+  return <div {...props}></div>
 }

src/app/components/Form/FileInput/Trigger.tsx

@@ -1,5 +1,22 @@
-export interface TriggerProps {}
+import { UploadCloud } from 'lucide-react'
 
-export function Trigger(props: TriggerProps) {
-  return <div></div>
+export function Trigger() {
+  return (
+    <label
+      htmlFor="photo"
+      className="group flex-1 cursor-pointer flex flex-col items-center gap-3 rounded-lg border border-zinc-300 px-6 py-4 text-center text-zinc-500 shadow-lg hover:border-violet-200 hover:bg-violet-25 hover:text-violet-500"
+    >
+      Selecionar arquivo
+      <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="size-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>
+  )
 }

src/app/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 }

src/app/page.tsx

@@ -1,6 +1,7 @@
-import { Mail, UploadCloud, User } from 'lucide-react'
+import { Mail } from 'lucide-react'
 import * as Input from './components/Input'
 import { SettingsTabs } from './components/SettingsTabs/index'
+import * as FileInput from '@/app/components/Form/FileInput'
 
 export default function Home() {
   return (
@@ -84,33 +85,11 @@ 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 size-16 items-center justify-center rounded-full">
-                <User className="size-8 text-violet-500" />
-              </div>
-              <label
-                htmlFor="photo"
-                className="group flex-1 cursor-pointer flex flex-col items-center gap-3 rounded-lg border border-zinc-300 px-6 py-4 text-center text-zinc-500 shadow-lg hover:border-violet-200 hover:bg-violet-25 hover:text-violet-500"
-              >
-                Selecionar arquivo
-                <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="size-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"></input>
-            </div>
+            <FileInput.Root className="flex items-start gap-5">
+              <FileInput.ImagePreview />
+              <FileInput.Trigger />
+              <FileInput.Control />
+            </FileInput.Root>
           </div>
 
           <div className="grid gap-3 grid-cols-form pt-5">