add verstka

pages/api/fetch.ts

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

pages/index.tsx

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

store/reducers/nodesInputReducer.ts

@@ -14,7 +14,6 @@ export interface IHint{
 
 export interface IProduct{
     name: string;
-    category: string;
     id:number,
     score:number,
     characteristic: {

styles/Home.module.css

@@ -1,129 +1,9 @@
-.container {
+.container{
-  padding: 0 2rem;
-}
-
-.main {
-  min-height: 100vh;
-  padding: 4rem 0;
-  flex: 1;
   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);
-  }
-}

styles/globals.css

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

сomponents/ProductsView/index.tsx

@@ -3,24 +3,15 @@ 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}>
+                getProducts.map(el=> <ProductCard {...el}></ProductCard>)
-                        <div>
-                            {el.score}
-                        </div>
-                        <div>
-                            {
-                               el.characteristic == undefined? "":el.characteristic.map(e=><div><div>{e.name}</div><div>{e.value}</div></div>)
-                            }
-                        </div>
-                        <div onClick={()=>fetcher.post("/score/"+el.id)}>Посмотреть</div>
-                </Card>)
             }
 
         </div>

сomponents/card/card.module.css

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

сomponents/card/index.tsx

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

сomponents/search/index.tsx

@@ -14,7 +14,6 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{
     const dispatch = useAppDispatch();
     const getHints = useAppSelector(hints);
     const [autoCompleteValue, setAutoCompleteValue] = useState("")
-
     const onChange = (text:string) =>{
         if (text.length >= 3 && text.length%3 == 0){
             dispatch(
@@ -59,12 +58,15 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{
     }
     return(
         <AutoComplete
+            dropdownMatchSelectWidth={252}
             options={getHints.map((el)=>el.value)}
             onSelect={onSelect as any}
             value={autoCompleteValue}
             onChange={(e)=>setAutoCompleteValue(e)}
         >
             <Input.Search  prefix={tags}
+            style={{ width: "50vw" }}
+            color="red-6"
             className={styles.search}
             onChange={(e)=>onChange(e.target.value)} 
             value={data}

сomponents/search/search.module.css

@@ -1,3 +1,26 @@
-.search{
+
-    
+
+.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;
 }