resolve conf

package.json

@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "antd": "^4.23.6",
+    "axios": "^1.1.3",
     "next": "12.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

pages/api/consts.ts

@@ -0,0 +1 @@
+export const host = "https://373a-5-227-22-7.eu.ngrok.io/api/"

pages/api/fetch.ts

@@ -0,0 +1,12 @@
+import axios from "axios"
+import { host } from "./consts"
+
+
+export const fetcher = axios.create(
+    {
+        baseURL: host,
+        timeout: 5000,
+       
+    }
+)
+

pages/index.tsx

@@ -1,11 +1,21 @@
 import type { NextPage } from 'next'
+import Head from 'next/head'
+import Image from 'next/image'
+import styles from '../styles/Home.module.css'
+import { Search } from '../сomponents/search'
+import 'antd/dist/antd.css';
+import { useState } from 'react'
+import { TagSearch } from '../сomponents/tagSearch'
 
 const Home: NextPage = () => {
+  const [goods, setGoods] = useState([])
   return (
-    <div>
-        hello world
+    <div className={styles.container}>
+        <Search onData={(data)=>setGoods(data)}></Search>
+        <div>{goods}</div>
+        <TagSearch  onData={(data)=>setGoods(data)}></TagSearch>
     </div>
   )
 }
 
-export default Home
+export default Home;

сomponents/search/index.tsx

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import { Input } from 'antd';
+import axios from "axios";
+import { fetcher } from "../../pages/api/fetch";
+
+export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{
+    const [data, setData] = useState("")
+
+    const onEnter = (value:any) => {
+        fetcher.post("/search", {body:value}).then((response)=>{
+            console.log(response)
+            props.onData(response.data)
+            }
+        )
+    }
+    return(
+        <Input.Search value={data} onSearch={(e)=>onEnter(e)} onChange={(e)=>setData(e.target.value)} size="large" placeholder="Поиск товара" enterButton />
+
+    );
+}

сomponents/tagSearch/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import 'antd/dist/antd.css';
+import { Select, Tag  } from 'antd';
+import type { CustomTagProps } from 'rc-select/lib/BaseSelect';
+
+
+
+const tagRender = (props: CustomTagProps) => {
+    const { label, value,  closable, onClose } = props;
+    const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    return (
+      <Tag
+        color={label?.toString()}
+        onMouseDown={onPreventMouseDown}
+        closable={closable}
+        onClose={onClose}
+        style={{ marginRight: 3 }}
+      >
+        {value}
+      </Tag>
+    );
+  };
+
+
+const options = [{ value: "мяч", label: "gold" }, {value:"шайба", label: 'lime' }, {value:"бумага", label: 'green' }, { value:"карандаш", label: 'cyan' }];
+
+
+const handleChange = (value: string) => {
+  console.log(`selected ${value}`);
+};
+
+export const TagSearch: React.FC<{onData:(data:any)=>void}> = (props) =>{
+    
+    return(
+      <Select 
+      tagRender={tagRender}
+      mode="tags"
+      style={{ width: '100%' }}
+      onChange={handleChange}
+      tokenSeparators={[' ', ',']}
+      options={options}
+      >
+      </Select>
+    );
+}