feat: Create a separate "InputForm" molecule component

- Develop the "InputForm" molecule component - Remove empty modal-gacha component stories and test files that prevent Storybook from running
2025-03-27 04:35:41 +07:00
parent 90ab974e03
commit ca933f624a
7 changed files with 105 additions and 10 deletions
@@ -0,0 +1,44 @@
+import {
+  DetailedHTMLProps,
+  FC,
+  InputHTMLAttributes,
+  ReactElement,
+} from 'react';
+import { Input } from '../../atoms';
+
+type TInputType = 'text' | 'email';
+type TInputSize = 'sm' | 'md' | 'lg';
+
+type TInputFormProps = Omit<
+  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+  'size' | 'type'
+> & {
+  label: string;
+  type?: TInputType;
+  size?: TInputSize;
+  error?: string;
+};
+
+export const InputForm: FC<TInputFormProps> = ({
+  label,
+  placeholder,
+  type = 'text',
+  size = 'md',
+  error,
+  ...rest
+}): ReactElement => {
+  return (
+    <div className="flex gap-[8px] flex-col">
+      <div className="self-start text-p3 font-medium">{label}</div>
+      <Input
+        placeholder={placeholder}
+        type={type}
+        size={size}
+        error={error}
+        {...rest}
+      />
+    </div>
+  );
+};
+
+export default InputForm;