First commit.

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 (
+    <Button
+      text="Add Item"
+      onClick={handleAddItem}
+    />
+  )
+}
+
+export default memo(AddItem)

components/AddItem/index.ts

@@ -0,0 +1,3 @@
+import AddItem from './AddItem'
+
+export default AddItem

components/InputItem/InputItem.tsx

@@ -0,0 +1,25 @@
+import { memo } from 'react'
+import { Input } from '@ui'
+import store from '@store'
+
+const InputItem = () => {
+  const text = store(({ text }: any) => text)
+  const setText = store(({ setText }: any) => setText)
+
+  const handleTyped = (text: string) => {
+    console.log('typed-----', text)
+    setText(text)
+  }
+
+  console.log('InputItem', text)
+
+  return (
+    <Input
+      placeholder="New Item ..."
+      value={text}
+      onTyped={handleTyped}
+    />
+  )
+}
+
+export default memo(InputItem)

components/InputItem/index.ts

@@ -0,0 +1,3 @@
+import InputItem from './InputItem'
+
+export default InputItem

components/Item/Item.tsx

@@ -0,0 +1,47 @@
+import { memo } from 'react'
+import { XCircleIcon as CloseIcon } from '@heroicons/react/24/outline'
+import { Card } from '@ui'
+import { tw } from '@utils'
+import store from '@store'
+
+const Item = ({
+  name = ''
+}) => {
+  const removeItem = store(({ removeItem }: any) => removeItem)
+
+  const handleRemoveItem = () => {
+    console.log('remove------', name)
+    removeItem(name)
+  }
+
+  console.log('Item', name)
+  return (
+    <Card
+      className={tw(
+        'flex',
+        'justify-between',
+        'my-4'
+      )}
+    >
+      <p
+        className={tw(
+          'w-fit'
+        )}
+      >
+        {name}
+      </p>
+      <CloseIcon
+        onClick={handleRemoveItem}
+        className={tw(
+          'w-6',
+          'h-6',
+          'text-rose-500',
+          'hover:text-rose-700',
+          'cursor-pointer'
+        )}
+      />
+    </Card>
+  )
+}
+
+export default memo(Item)

components/Item/index.ts

@@ -0,0 +1,3 @@
+import Item from './Item'
+
+export default Item

components/List/List.tsx

@@ -0,0 +1,28 @@
+import { memo } from 'react'
+import { Item } from '@components'
+import { tw } from '@utils'
+import store from '@store'
+
+const List = () => {
+  const items = store(({ items }: any) => items)
+  console.log('List')
+  return (
+    <div>
+      {items.length
+        ? items.map((item: any) => (
+          <Item
+            key={item.id}
+            name={item.name}
+          />))
+        : (
+          <div className={tw('text-center')}>
+            <p className={tw('font-bold')}>There is no Item!</p>
+            <small>Please open <b className={tw('text-rose-500')}>Dev Tools</b> - <b className={tw('text-rose-500')}>Consol</b> and see the <b className={tw('text-rose-500')}>Rendering</b> log!</small>
+          </div>
+        )
+      }
+    </div>
+  )
+}
+
+export default memo(List)

components/List/index.ts

@@ -0,0 +1,3 @@
+import List from './List'
+
+export default List

components/index.ts

@@ -0,0 +1,11 @@
+import AddItem from './AddItem'
+import InputItem from './InputItem'
+import Item from './Item'
+import List from './List'
+
+export {
+  AddItem,
+  InputItem,
+  Item,
+  List
+}

next.config.js

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  swcMinify: true,
+  swcMinify: true
 }
 
 module.exports = nextConfig