375 lines
8.8 KiB
JavaScript
375 lines
8.8 KiB
JavaScript
import React from "react";
|
||
import styled, { keyframes } from 'styled-components';
|
||
import SVGIcon from "../../components/UI/Icon/SVGIcon";
|
||
import Pagination from "../../components/UI/Pagination";
|
||
import { HashLoader } from 'react-spinners';
|
||
|
||
const ChatSVG = () => {
|
||
return <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9.06 9.06 0 0 0 8 15z"/></svg>;
|
||
}
|
||
|
||
const Box = styled.div`
|
||
box-shadow: 0 2px 1px #00000010;
|
||
border: 1px solid #c2c4c2;
|
||
border-radius: 14px;
|
||
`;
|
||
|
||
const BackButton = styled.button`
|
||
border: 1px solid #c2c4c2;
|
||
display: inline-block;
|
||
padding: 12px 16px;
|
||
border-radius: 14px;
|
||
|
||
background: #ffffff;
|
||
color: gray;
|
||
box-shadow: 0 2px 1px #00000010;
|
||
|
||
font-size: 12pt;
|
||
float: left;
|
||
|
||
& ${SVGIcon} {
|
||
transform: translate(-4px, 2px)
|
||
}
|
||
`;
|
||
const Title = styled.div`
|
||
text-align: center;
|
||
height: 100px;
|
||
padding-top: 32px;
|
||
|
||
z-index: 1;
|
||
position: relative;
|
||
top: 0;
|
||
|
||
& h2 {
|
||
font-weight: 600;
|
||
text-align: center;
|
||
padding: 0;
|
||
display: inline-block;
|
||
transform: translateY(6px);
|
||
}
|
||
`;
|
||
const FilterForm = styled.div`
|
||
display: inline-block;
|
||
float: right
|
||
`;
|
||
|
||
const FilterOption = styled(Box)`
|
||
display: inline-block;
|
||
border: 1px solid #c2c4c2;
|
||
border-radius: 14px;
|
||
padding: 6px 10px;
|
||
margin: 0 12px;
|
||
font-size: 11pt;
|
||
width: 160px;
|
||
|
||
& input[type=text] {
|
||
margin: 0 8px;
|
||
display: inline-block;
|
||
width: 20px;
|
||
border: 0;
|
||
border-bottom: 1px solid gray;
|
||
outline: none;
|
||
padding-bottom: 2px;
|
||
}
|
||
`;
|
||
|
||
const FilterSetting = styled.div`
|
||
border-top: 1px solid #c2c4c2;
|
||
margin-top: 6px;
|
||
padding-top: 8px;
|
||
font-size: 10pt;
|
||
transform: translate(4px)
|
||
`;
|
||
|
||
const FilterButton = styled.button`
|
||
background: royalblue;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 20px;
|
||
float: right;
|
||
margin: 0 10px;
|
||
box-shadow: 0 2px 1px #00000020;
|
||
transition: 250ms ease;
|
||
|
||
transform: translateY(12px);
|
||
|
||
&:hover {
|
||
box-shadow: 0 2px 2px #00000060;
|
||
}
|
||
`;
|
||
|
||
const UserList = styled.div`
|
||
margin: 32px auto;
|
||
margin-bottom: 0;
|
||
display: block;
|
||
`;
|
||
|
||
|
||
const ContactButton = styled.button`
|
||
background: white;
|
||
border: 2px solid royalblue;
|
||
border-radius: 12px;
|
||
color: royalblue;
|
||
font-weight: 600;
|
||
line-height: 20px;
|
||
transition: 150ms ease;
|
||
width: 100%;
|
||
font-size: 10.5pt;
|
||
height: 36px;
|
||
opacity: 0;
|
||
padding: 0px 10px;
|
||
clip-path: border-box;
|
||
box-sizing: border-box;
|
||
|
||
& svg {
|
||
fill: royalblue;
|
||
margin: 0;
|
||
margin-right: 6px;
|
||
transform: translateY(2px);
|
||
}
|
||
|
||
&:hover {
|
||
color: white;
|
||
background: royalblue;
|
||
}
|
||
&:hover svg {
|
||
fill: white
|
||
}
|
||
`;
|
||
|
||
const UserAppear = keyframes`
|
||
0%, 50% {
|
||
opacity: 0;
|
||
transform: scale(1.05)
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: scale(1)
|
||
}
|
||
`;
|
||
|
||
const UserCard = styled(Box)`
|
||
display: inline-block;
|
||
padding: 10px;
|
||
padding-top: 20px;
|
||
background: white;
|
||
|
||
width: 200px;
|
||
height: 256px;
|
||
|
||
margin-right: 20px;
|
||
margin-bottom: 84px;
|
||
|
||
text-align: center;
|
||
|
||
animation: ${UserAppear} 500ms ease;
|
||
|
||
& h4 {
|
||
margin: 10px 0;
|
||
font-weight: 600;
|
||
}
|
||
& p {
|
||
margin: 10px 0;
|
||
height: 74px;
|
||
color: gray;
|
||
font-size: 10pt;
|
||
}
|
||
|
||
transition: 150ms ease;
|
||
&:hover > ${ContactButton} {
|
||
opacity: 1;
|
||
padding: 6px 10px;
|
||
}
|
||
&:hover {
|
||
height: 300px;
|
||
margin-bottom: 40px;
|
||
}
|
||
`;
|
||
|
||
const Badges = styled.div`
|
||
height: 0px;
|
||
`;
|
||
|
||
const LeftBadge = styled.div`
|
||
float: left;
|
||
transform: translate(90%, -100%);
|
||
background: lightgray;
|
||
border: 3px solid white;
|
||
border-radius: 100px;
|
||
width: 36px; height: 36px;
|
||
`;
|
||
|
||
const RightBadge = styled(LeftBadge)`
|
||
float: right;
|
||
transform: translate(-75%, -100%);
|
||
background: limegreen;
|
||
& p {
|
||
transform: translateY(6px);
|
||
font-size: 11pt;
|
||
font-weight: 600;
|
||
color: white;
|
||
text-shadow: 0 2px 1px #00000040;
|
||
margin: 0;
|
||
height: auto;
|
||
}
|
||
`;
|
||
|
||
const LoadingText = styled.h2`
|
||
text-align: center;
|
||
line-height: 3.5em;
|
||
margin: 0;
|
||
padding: 100px 0;
|
||
|
||
& span {
|
||
display: inline;
|
||
margin: 0px auto
|
||
}
|
||
`;
|
||
|
||
class UserDisplay extends React.Component {
|
||
|
||
/** @type {{ value: import('../../API/User').User[] }} */
|
||
props;
|
||
|
||
constructor(props) {
|
||
super(props);
|
||
}
|
||
|
||
render() {
|
||
return (
|
||
<div>123
|
||
{
|
||
this.props.value.map(x => {
|
||
return (
|
||
<UserCard>
|
||
<SVGIcon src='/images/icons/user.svg' width='100' height='100' />
|
||
<Badges>
|
||
<LeftBadge>
|
||
<SVGIcon src='/images/icons/question.svg' style={{margin: '5px 0'}} width='20' height='20' />
|
||
</LeftBadge>
|
||
<RightBadge>
|
||
<p>?</p>
|
||
</RightBadge>
|
||
</Badges>
|
||
|
||
<h4 className="inner-element">User, 0</h4>
|
||
<p>No description provided.</p>
|
||
|
||
<ContactButton>
|
||
<ChatSVG />
|
||
Перейти в чат
|
||
</ContactButton>
|
||
|
||
</UserCard>
|
||
)
|
||
})
|
||
}
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
class Users extends React.Component {
|
||
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
data: [{}],
|
||
loading: false
|
||
}
|
||
}
|
||
|
||
componentDidMount() {
|
||
|
||
}
|
||
|
||
render() {
|
||
return (
|
||
<UserList>
|
||
|
||
<h2 style={{textAlign: 'center', lineHeight: '11pt', marginBottom: 32}}>
|
||
Выбери соседа
|
||
<br/>
|
||
<br/>
|
||
<span style={{ fontSize: '11pt', fontWeight: 500 }}>
|
||
Не забывай, с этим человеком<br/>
|
||
придется жить бок-о-бок!
|
||
</span>
|
||
</h2>
|
||
|
||
{
|
||
this.state.loading ?
|
||
<UserDisplay value={this.state.data} /> :
|
||
<LoadingText>
|
||
Пожалуйста подождите, идет загрузка данных<br/>
|
||
<HashLoader color='#0077aa' />
|
||
</LoadingText>
|
||
}
|
||
|
||
</UserList>
|
||
)
|
||
}
|
||
}
|
||
|
||
class Filters extends React.Component {
|
||
render() {
|
||
return (
|
||
<FilterForm>
|
||
<FilterOption>
|
||
Совместимость
|
||
|
||
<FilterSetting>
|
||
от
|
||
<input type='text' />
|
||
до
|
||
<input type='text' />
|
||
</FilterSetting>
|
||
|
||
</FilterOption>
|
||
|
||
<FilterOption>
|
||
Возраст
|
||
|
||
<FilterSetting>
|
||
от
|
||
<input type='text' />
|
||
до
|
||
<input type='text' />
|
||
</FilterSetting>
|
||
|
||
</FilterOption>
|
||
|
||
<FilterButton>
|
||
<SVGIcon src='/images/icons/search.svg' width='18' height='18' />
|
||
</FilterButton>
|
||
</FilterForm>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default class Tinder extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {};
|
||
}
|
||
|
||
render() {
|
||
return (
|
||
<>
|
||
<Title>
|
||
<BackButton>
|
||
<SVGIcon src='/images/icons/left-arrow-light.svg' width={10} height={16}/>
|
||
Вернуться назад
|
||
</BackButton>
|
||
|
||
<Filters />
|
||
</Title>
|
||
|
||
<div style={{transform: 'translateY(-100px)', position: 'relative', top:0, zIndex: 0}}>
|
||
<Users />
|
||
<Pagination pages={0} />
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
} |