From 755b24a79ff2654940c7189d3ba670b3aa0d19af Mon Sep 17 00:00:00 2001 From: Firesieht Date: Sat, 22 Oct 2022 22:40:21 +0300 Subject: [PATCH] add verstka --- pages/api/fetch.ts | 1 + pages/index.tsx | 5 +- store/reducers/nodesInputReducer.ts | 1 - styles/Home.module.css | 128 +--------------------------- styles/globals.css | 8 +- сomponents/ProductsView/index.tsx | 17 +--- сomponents/card/card.module.css | 114 +++++++++++++++++++++++++ сomponents/card/index.tsx | 45 ++++++++++ сomponents/search/index.tsx | 4 +- сomponents/search/search.module.css | 27 +++++- 10 files changed, 205 insertions(+), 145 deletions(-) create mode 100644 сomponents/card/card.module.css create mode 100644 сomponents/card/index.tsx diff --git a/pages/api/fetch.ts b/pages/api/fetch.ts index 8685ee8..ed6e065 100644 --- a/pages/api/fetch.ts +++ b/pages/api/fetch.ts @@ -5,6 +5,7 @@ import { host } from "./consts" export const fetcher = axios.create( { baseURL: host, + timeout: 60000 } ) diff --git a/pages/index.tsx b/pages/index.tsx index 7874cc6..95ebb20 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -41,7 +41,10 @@ const Home: NextPage = () => { return (
setGoods(data)}> - + { + getProducts.length == 0? null: + } +
) } diff --git a/store/reducers/nodesInputReducer.ts b/store/reducers/nodesInputReducer.ts index 096d987..55513f6 100644 --- a/store/reducers/nodesInputReducer.ts +++ b/store/reducers/nodesInputReducer.ts @@ -14,7 +14,6 @@ export interface IHint{ export interface IProduct{ name: string; - category: string; id:number, score:number, characteristic: { diff --git a/styles/Home.module.css b/styles/Home.module.css index bd50f42..b8f4c65 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -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); - } -} diff --git a/styles/globals.css b/styles/globals.css index 4f18421..199d3bf 100644 --- a/styles/globals.css +++ b/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; - } + } } diff --git a/сomponents/ProductsView/index.tsx b/сomponents/ProductsView/index.tsx index b8998e1..efc86c0 100644 --- a/сomponents/ProductsView/index.tsx +++ b/с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( -
+
{ - getProducts.map(el=> -
- {el.score} -
-
- { - el.characteristic == undefined? "":el.characteristic.map(e=>
{e.name}
{e.value}
) - } -
-
fetcher.post("/score/"+el.id)}>Посмотреть
- ) + getProducts.map(el=> ) }
diff --git a/сomponents/card/card.module.css b/сomponents/card/card.module.css new file mode 100644 index 0000000..4c0b1ce --- /dev/null +++ b/с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; + +} \ No newline at end of file diff --git a/сomponents/card/index.tsx b/сomponents/card/index.tsx new file mode 100644 index 0000000..1b92a05 --- /dev/null +++ b/с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 = (props) =>{ + const [opened, setOpened] = useState(false) + + const onClick = () =>{ + setOpened(true) + fetcher.post("/score/" + props.id) + } + return( + props.characteristic == undefined? null: +
+
{props.name}
+
+
{props.score} прсмотров
+
{props.characteristic.length} характеристик
+
+
ID:{props.id}
+
onClick()} className={styles.aboutBtn}>Подробнее
+ {opened? +
+
+
setOpened(false)}>+
+
{props.name}
+
+
{props.score} прсмотров
+
ID:{props.id}
+
{props.characteristic.length} характеристик
+ { + props.characteristic.map(el=>
+
{el.name}:
+
{el.value}
+
) + } +
+
+
: null + } +
+ ); +} \ No newline at end of file diff --git a/сomponents/search/index.tsx b/сomponents/search/index.tsx index 46db4f0..9df547c 100644 --- a/сomponents/search/index.tsx +++ b/с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( el.value)} onSelect={onSelect as any} value={autoCompleteValue} onChange={(e)=>setAutoCompleteValue(e)} > onChange(e.target.value)} value={data} diff --git a/сomponents/search/search.module.css b/сomponents/search/search.module.css index 0afc672..66af200 100644 --- a/сomponents/search/search.module.css +++ b/с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; } \ No newline at end of file