mirror of
https://github.com/magnum-opus-tender-hack/frontend.git
synced 2024-11-21 15:56:35 +03:00
add verstka
This commit is contained in:
Firesieht
parent
8a98ea23a8
commit
755b24a79f
|
|
@ -5,6 +5,7 @@ import { host } from "./consts"
|
|||
export const fetcher = axios.create(
|
||||
{
|
||||
baseURL: host,
|
||||
timeout: 60000
|
||||
}
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ export interface IHint{
|
|||
|
||||
export interface IProduct{
|
||||
name: string;
|
||||
category: string;
|
||||
id:number,
|
||||
score:number,
|
||||
characteristic: {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
<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>)
|
||||
getProducts.map(el=> <ProductCard {...el}></ProductCard>)
|
||||
}
|
||||
|
||||
</div>
|
||||
|
|
|
|||
114
сomponents/card/card.module.css
Normal file
114
сomponents/card/card.module.css
Normal 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;
|
||||
|
||||
}
|
||||
45
сomponents/card/index.tsx
Normal file
45
сomponents/card/index.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user