From dd967e0659cb5f5e1e757281cb364c63d044ba90 Mon Sep 17 00:00:00 2001 From: kwang Date: Thu, 27 Jun 2024 08:56:33 +0900 Subject: [PATCH] =?UTF-8?q?feat/#22=20InputBox=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/Input.tsx | 13 ++++++++++ src/components/ui/InputBox.tsx | 46 ++++++++++++++++++++++++++++++++++ 2 files changed, 59 insertions(+) create mode 100644 src/components/ui/Input.tsx create mode 100644 src/components/ui/InputBox.tsx diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx new file mode 100644 index 0000000..49177b4 --- /dev/null +++ b/src/components/ui/Input.tsx @@ -0,0 +1,13 @@ +import { InputHTMLAttributes } from 'react'; + +interface InputProps extends InputHTMLAttributes { + type?: 'UNDER_BAR'; +} + +const Input = (props: InputProps) => { + const { type, ...rest } = props; + + return ; +}; + +export default Input; diff --git a/src/components/ui/InputBox.tsx b/src/components/ui/InputBox.tsx new file mode 100644 index 0000000..becb2c2 --- /dev/null +++ b/src/components/ui/InputBox.tsx @@ -0,0 +1,46 @@ +import { InputHTMLAttributes, PropsWithChildren, useState } from 'react'; +import { VStack } from './Stack'; + +interface InputBoxProps extends InputHTMLAttributes { + type?: 'UNDER_BAR' | 'BORDER'; + label: string; +} + +const getClassNameByType = (type: string) => { + switch (type) { + case 'UNDER_BAR': + return 'border-b focus:border-b-2'; + case 'BORDER': + return 'border rounded-lg px-2 py-1'; + } +}; + +const InputBox = (props: PropsWithChildren) => { + const { type = 'UNDER_BAR', label, children, ...rest } = props; + const [isFocused, setIsFocused] = useState(false); + + const onFocusHandle = () => setIsFocused(true); + const onBlurHnadle = () => setIsFocused(false); + + return ( + +
+ {label} +
+
+ {children || ( + + )} +
+
+ ); +}; + +export default InputBox;