Album edit endpoint

src/components/form/Input.tsx

@@ -1,15 +1,67 @@
 import type { ComponentProps, PropsWithChildren } from 'react'
 import clsx from 'clsx'
 
-export default function Input(props: PropsWithChildren<ComponentProps<'input'>>) {
-  const { name, className, children, ...attrs } = props
+export function InputLabel(props: PropsWithChildren<{ dark: boolean; name: string }>) {
+  const { dark, name, children } = props
+  return (
+    <label htmlFor={name} className={clsx('font-medium', dark ? 'text-white' : 'text-black')}>
+      {children}:
+    </label>
+  )
+}
+
+interface CustomInputProps {
+  name: string
+  label: string
+  dark?: boolean
+  defaultValue?: string | number | null
+}
+
+export function Input(props: CustomInputProps & Omit<ComponentProps<'input'>, 'defaultValue'>) {
+  const { name, className, dark = false, defaultValue, label, ...attrs } = props
 
   return (
-    <div className='flex flex-col'>
-      <label htmlFor={name} className='font-medium text-black'>
-        {children}:
-      </label>
-      <input {...attrs} name={name} className={clsx('bg-zinc-200 rounded-md p-2 mt-2 mb-3 text-black', className)} />
+    <div className={clsx('flex flex-col', className)}>
+      <InputLabel dark={dark} name={name}>
+        {label}
+      </InputLabel>
+      <input
+        {...attrs}
+        defaultValue={defaultValue ?? undefined}
+        name={name}
+        className='bg-zinc-200 rounded-md p-2 mt-2 mb-3 text-black'
+      />
+    </div>
+  )
+}
+
+export function InputArea(props: CustomInputProps & Omit<ComponentProps<'textarea'>, 'defaultValue'>) {
+  const { name, className, dark = false, defaultValue, label, ...attrs } = props
+
+  return (
+    <div className={clsx('flex flex-col', className)}>
+      <InputLabel dark={dark} name={name}>
+        {label}
+      </InputLabel>
+      <textarea
+        {...attrs}
+        defaultValue={defaultValue ?? undefined}
+        name={name}
+        className='bg-zinc-200 rounded-md p-2 mt-2 mb-3 text-black'
+      />
+    </div>
+  )
+}
+
+export function InputSelect(props: CustomInputProps & ComponentProps<'select'>) {
+  const { name, className, dark = false, label, ...attrs } = props
+
+  return (
+    <div className='flex flex-col'>
+      <InputLabel dark={dark} name={name}>
+        {label}
+      </InputLabel>
+      <select name={name} className='bg-zinc-200 rounded-md p-2 mt-2 h-full mb-3 text-black' {...attrs} />
     </div>
   )
 }