Merge branch 'main' into remove-bug

This commit is contained in:
Ilia vasilenko 2022-10-22 22:45:54 +03:00 committed by GitHub
commit 1e7aca6808
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 213 additions and 142 deletions

View File

@ -5,5 +5,6 @@ import { host } from "./consts"
export const fetcher = axios.create(
{
baseURL: host,
timeout: 60000
}
)

View File

@ -35,7 +35,10 @@ const Home: NextPage = () => {
return (
<div className={styles.container}>
<Search onData={(data)=>setGoods(data)}></Search>
<ProductsView></ProductsView>
{
getProducts.length == 0? null:<ProductsView></ProductsView>
}
</div>
)
}

View File

@ -14,8 +14,9 @@ export interface IHint{
export interface IProduct{
name: string;
category: string;
characteristics: {
id:number,
score:number,
characteristic: {
name: string;
value: string;
}[];

View File

@ -1,129 +1,9 @@
.container {
padding: 0 2rem;
}
.main {
min-height: 100vh;
padding: 4rem 0;
flex: 1;
.container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap:100px;
padding:100px;
}
.footer {
display: flex;
flex: 1;
padding: 2rem 0;
border-top: 1px solid #eaeaea;
justify-content: center;
align-items: center;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.title a {
color: #0070f3;
text-decoration: none;
}
.title a:hover,
.title a:focus,
.title a:active {
text-decoration: underline;
}
.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
}
.title,
.description {
text-align: center;
}
.description {
margin: 4rem 0;
line-height: 1.5;
font-size: 1.5rem;
}
.code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}
.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
}
.card {
margin: 1rem;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px;
}
.card:hover,
.card:focus,
.card:active {
color: #0070f3;
border-color: #0070f3;
}
.card h2 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.logo {
height: 1em;
margin-left: 0.5rem;
}
@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
}
@media (prefers-color-scheme: dark) {
.card,
.footer {
border-color: #222;
}
.code {
background: #111;
}
.logo img {
filter: invert(1);
}
}

View File

@ -1,5 +1,6 @@
html,
body {
transition: 0.3s;
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
@ -19,8 +20,9 @@ a {
html {
color-scheme: dark;
}
body {
body {
transition: 0.3s;
color: white;
background: black;
}
}
}

View File

@ -1,24 +1,17 @@
import { Card } from "antd";
import React from "react";
import { useAppSelector } from "../../hooks";
import { fetcher } from "../../pages/api/fetch";
import { products } from "../../store/reducers/nodesInputReducer";
import { ProductCard } from "../card";
import styles from "../card/card.module.css"
export const ProductsView:React.FC = () =>{
const getProducts = useAppSelector(products)
console.log(getProducts)
return(
<div>
<div className={styles.productWrapper}>
{
getProducts.map(el=> <Card title={el.name} bordered={true}>
<div>
{el.category}
</div>
<div>
{
el.characteristics == undefined? "":el.characteristics.toString()
}
</div>
</Card>)
getProducts.map(el=> <ProductCard {...el}></ProductCard>)
}
</div>

View File

@ -0,0 +1,114 @@
.card{
display: flex;
flex-direction: column;
gap:15px;
font-size: 14px;
border: 1px solid #BDBDBD;
background: #FBFBFB;
padding: 25px;
border-radius: 17px;
width: 280px;
height: 300px;
justify-content: space-between;
transition: 0.3s;
}
.name{
font-size: 16px;
font-weight: 500;
}
.red{
font-weight: 500;
color: #DB2B21;
}
.blue{
font-weight: 500;
color: #2566ec;
}
.id{
color:#BDBDBD
}
.prWrap{
display: flex;
gap: 15px;
flex-direction: row;
}
.aboutBtn{
font-weight: 500;
color:#FBFBFB;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 10px;
border-radius: 17px;
background-color: #DB2B21;
cursor: pointer;
transition: 0.3s;
}
.aboutBtn:hover{
transition: 0.3s;
opacity: 0.6;
}
.productWrapper{
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap:50px;
align-items: center;
justify-content: center;
width: 100%;
}
.filter{
width: 100%;
height: 100vh;
position: fixed;
top:0px;
left:0px;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
}
.popup{
display: flex;
flex-direction: column;
gap:15px;
font-size: 14px;
border: 1px solid #BDBDBD;
background: #FBFBFB;
padding: 35px 50px;
border-radius: 17px;
width: 60%;
height: 60vh;
transition: 0.3s;
align-items: center;
position: relative;
}
.cross{
font-size: 40px;
cursor: pointer;
transform: rotate(45deg);
position: absolute;
top:0px;
right: 15px;
}
.h1{
font-size: 20px;
font-weight: 500;
}
.charWrap{
display: flex;
width: 100%;
flex-direction: column;
gap:15px;
font-size: 16px;
}

View File

@ -0,0 +1,45 @@
import React, { useState } from "react";
import { fetcher } from "../../pages/api/fetch";
import { IProduct } from "../../store/reducers/nodesInputReducer";
import styles from "./card.module.css"
export const ProductCard: React.FC<IProduct> = (props) =>{
const [opened, setOpened] = useState(false)
const onClick = () =>{
setOpened(true)
fetcher.post("/score/" + props.id)
}
return(
props.characteristic == undefined? null:
<div className={styles.card}>
<div className={styles.name}>{props.name}</div>
<div className={styles.prWrap}>
<div className={styles.score}> <span className={styles.red}>{props.score}</span> прсмотров</div>
<div className={styles.characteristic}> <span className={styles.blue}>{props.characteristic.length}</span> характеристик</div>
</div>
<div className={styles.id}>ID:{props.id}</div>
<div onClick={()=>onClick()} className={styles.aboutBtn}>Подробнее</div>
{opened?
<div className={styles.filter}>
<div className={styles.popup}>
<div className={styles.cross} onClick={()=>setOpened(false)}>+</div>
<div className={styles.h1}>{props.name}</div>
<div className={styles.charWrap}>
<div className={styles.score}> <span className={styles.red}>{props.score}</span> прсмотров</div>
<div className={styles.id}>ID:{props.id}</div>
<div className={styles.characteristic}> <span className={styles.blue}>{props.characteristic.length}</span> характеристик</div>
{
props.characteristic.map(el=><div className={styles.prWrap}>
<div className={styles.name}>{el.name}:</div>
<div>{el.value}</div>
</div>)
}
</div>
</div>
</div> : null
}
</div>
);
}

View File

@ -3,6 +3,8 @@ import { AutoComplete, Input, Tag } from 'antd';
import { useAppDispatch, useAppSelector } from "../../hooks";
import { createNode, deleteNode, hints, INode, nodes, products } from "../../store/reducers/nodesInputReducer";
import { createHints, search } from "../../store/reducers/asyncActions";
import styles from "./search.module.css"
export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{
@ -105,8 +107,12 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{
value={autoCompleteValue}
onChange={(e: any)=>setAutoCompleteValue(e)}
// onSearch={handleSearch}
dropdownMatchSelectWidth={252}
>
<Input.Search prefix={tags}
style={{ width: "50vw" }}
color="red-6"
className={styles.search}
onChange={(e)=>onChange(e.target.value)}
value={data}
onSearch={(e) => onEnter(e)}

View File

@ -0,0 +1,26 @@
.search button{
border: 1px solid #BDBDBD;
border-radius: 0px 17px 17px 0px !important;
background-color: #DB2B21;
}
.search button:hover{
border: 1px solid #BDBDBD;
border-radius: 0px 17px 17px 0px !important;
background-color: #DB2B21;
}
.search.ant-input-group-addonn{
background-color: #e7eef7 !important;
}
.search input{
}
.search.ant-input-affix-wrapper-lg{
background-color: #FBFBFB !important;
border-radius: 17px !important;
}