magnum-opus-tender-hack/frontend
1
0
Fork 0
mirror of https://github.com/magnum-opus-tender-hack/frontend.git synced 2024-11-24 17:23:43 +03:00
Code Issues Packages Projects Releases Wiki Activity

add tags

Browse Source
This commit is contained in:
Firesieht 2022-10-22 00:34:07 +03:00
parent efd9a7fe1f
commit 6f7d42ce48
8 changed files with 2886 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2795
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

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

1
pages/api/consts.ts Normal file
View File

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

12
pages/api/fetch.ts Normal file
View File

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

67
pages/index.tsx
View File

@ -2,69 +2,18 @@ import type { NextPage } from 'next'
import Head from 'next/head' import Head from 'next/head'
import Image from 'next/image' import Image from 'next/image'
import styles from '../styles/Home.module.css' 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 Home: NextPage = () => {
const [goods, setGoods] = useState([])
return ( return (
<div className={styles.container}> <div className={styles.container}>
<Head> <Search onData={(data)=>setGoods(data)}></Search>
<title>Create Next App</title> <div>{goods}</div>
<meta name="description" content="Generated by create next app" /> <TagSearch onData={(data)=>setGoods(data)}></TagSearch>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.tsx</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation &rarr;</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn &rarr;</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/canary/examples"
className={styles.card}
>
<h2>Examples &rarr;</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h2>Deploy &rarr;</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div> </div>
) )
} }

20
сomponents/search/index.tsx Normal file
View File

@ -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 />
);
}

0
сomponents/search/search.module.css Normal file
View File

48
сomponents/tagSearch/index.tsx Normal file
View File

@ -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>
);
}