diff --git a/components/AddItem/AddItem.tsx b/components/AddItem/AddItem.tsx new file mode 100644 index 0000000..16fbe54 --- /dev/null +++ b/components/AddItem/AddItem.tsx @@ -0,0 +1,24 @@ +import { memo } from 'react' +import { Button } from '@ui' +import store from '@store' + +const AddItem = () => { + const addItem = store(({ addItem }: any) => addItem) + const setText = store(({ setText }: any) => setText) + + const handleAddItem = () => { + console.log('add-------') + addItem() + setText('') + } + + console.log('AddItem') + return ( + + ) +} + +export default memo(Button) diff --git a/ui/Button/index.ts b/ui/Button/index.ts new file mode 100644 index 0000000..6ff6af4 --- /dev/null +++ b/ui/Button/index.ts @@ -0,0 +1,3 @@ +import Button from './Button' + +export default Button diff --git a/ui/Card/Card.tsx b/ui/Card/Card.tsx new file mode 100644 index 0000000..4053b5b --- /dev/null +++ b/ui/Card/Card.tsx @@ -0,0 +1,35 @@ +import { memo } from 'react' +import { tw } from '@utils' + +const Card = ({ + children, + content = null, + className = '', + // callback + onClick = () => {}, +}: any) => { + console.log('Card') + return ( +
+ {children || content} +
+ ) +} + +export default memo(Card) diff --git a/ui/Card/index.ts b/ui/Card/index.ts new file mode 100644 index 0000000..38c8461 --- /dev/null +++ b/ui/Card/index.ts @@ -0,0 +1,3 @@ +import Card from './Card' + +export default Card diff --git a/ui/Container/Container.tsx b/ui/Container/Container.tsx new file mode 100644 index 0000000..9ee7824 --- /dev/null +++ b/ui/Container/Container.tsx @@ -0,0 +1,22 @@ +import { memo } from 'react' +import { tw } from '@utils' + +const Container = ({ + children, + className = '' +}: any) => { + console.log('Container') + return ( +
+ {children} +
+ ) +} + +export default memo(Container) diff --git a/ui/Container/index.ts b/ui/Container/index.ts new file mode 100644 index 0000000..cad7416 --- /dev/null +++ b/ui/Container/index.ts @@ -0,0 +1,3 @@ +import Container from './Container' + +export default Container diff --git a/ui/Input/Input.tsx b/ui/Input/Input.tsx new file mode 100644 index 0000000..012ebef --- /dev/null +++ b/ui/Input/Input.tsx @@ -0,0 +1,64 @@ +import { memo, useRef, useEffect } from 'react' +import { tw } from '@utils' + +const Input = ({ + value = '', + placeholder='', + className = '', + // callback + onFocus = () => {}, + onBlur = () => {}, + onChange = () => {}, + onTyping = () => {}, + onTyped = () => {} +}: any) => { + const ref: any = useRef(null) + + useEffect(() => { + ref.current.value = value + }, [value]) + + const handleChange = (e: any) => { + const { value } = e.target + ref.current.value = value + onChange(value, e) + onTyping(value, e) + } + + const handleBlur = (e: any) => { + onBlur(ref.current.value, e) + onTyped(ref.current.value, e) + } + + console.log('Input', value) + return ( + + ) +} + +export default memo(Input) diff --git a/ui/Input/index.ts b/ui/Input/index.ts new file mode 100644 index 0000000..8a3d2f7 --- /dev/null +++ b/ui/Input/index.ts @@ -0,0 +1,3 @@ +import Input from './Input' + +export default Input diff --git a/ui/index.ts b/ui/index.ts new file mode 100644 index 0000000..f282b39 --- /dev/null +++ b/ui/index.ts @@ -0,0 +1,11 @@ +import Button from './Button' +import Card from './Card' +import Container from './Container' +import Input from './Input' + +export { + Button, + Card, + Container, + Input +} diff --git a/utils/index.ts b/utils/index.ts new file mode 100644 index 0000000..2dde23d --- /dev/null +++ b/utils/index.ts @@ -0,0 +1,5 @@ +import tw from './tailwind' + +export { + tw +} diff --git a/utils/tailwind.ts b/utils/tailwind.ts new file mode 100644 index 0000000..15b74bc --- /dev/null +++ b/utils/tailwind.ts @@ -0,0 +1,2 @@ +const tw = (...classes: string[]) => classes.join(' ') +export default tw