Aydogdy
/
react-typescript-chess-federation
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

structure page

This commit is contained in:
VividTruthKeeper 2022-06-29 02:28:33 +05:00
parent 9e12fab1b3
commit f1f04e19f0
11 changed files with 208 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@ -14,6 +14,7 @@ import Events from "./pages/Events";
import Rating from "./pages/Rating";
import Profile from "./pages/Profile";
import EventItem from "./pages/EventItem";
import Structure from "./pages/Structure";
const App = () => {
return (
@ -26,6 +27,7 @@ const App = () => {
<Route path="/rating" element={<Rating />} />
<Route path="/profile" element={<Profile />} />
<Route path="/event" element={<EventItem />} />
<Route path="/structure" element={<Structure />} />
</Routes>
</div>
<Footer />

54
src/components/structure/PersonInfo.tsx Normal file
View File

@ -0,0 +1,54 @@
// Modules
// Types
import { personProps } from "../../types/personProps";
// Icons
import mail from "../../icons/email.svg";
import phone from "../../icons/phone.svg";
import fb from "../../icons/facebook-green.svg";
const PersonInfo = ({
img,
position,
name,
email,
tel,
facebook,
}: personProps) => {
return (
<div className="person">
<div className="person-left">
<div className="person-img">
<img src={img} alt="" />
</div>
</div>
<div className="person-right">
<span className="person-pos">{position}</span>
<span className="person-name">{name}</span>
<div className="person-right-bottom">
<a href={`mailto:${mail}`} target={"_blank"} className="person-data">
<div className="person-icon">
<img src={mail} alt="" />
</div>
<span>{email}</span>
</a>
<a href={`tel:${mail}`} target={"_blank"} className="person-data">
<div className="person-icon">
<img src={phone} alt="" />
</div>
<span>{tel}</span>
</a>
<a href="/" target={"_blank"} className="person-data">
<div className="person-icon">
<img src={fb} alt="" />
</div>
<span>{facebook}</span>
</a>
</div>
</div>
</div>
);
};
export default PersonInfo;

3
src/icons/email.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.7913 4.16667H5.20801C4.37921 4.16667 3.58435 4.49591 2.9983 5.08196C2.41225 5.66801 2.08301 6.46287 2.08301 7.29167V17.7083C2.08301 18.5371 2.41225 19.332 2.9983 19.918C3.58435 20.5041 4.37921 20.8333 5.20801 20.8333H19.7913C20.6201 20.8333 21.415 20.5041 22.0011 19.918C22.5871 19.332 22.9163 18.5371 22.9163 17.7083V7.29167C22.9163 6.46287 22.5871 5.66801 22.0011 5.08196C21.415 4.49591 20.6201 4.16667 19.7913 4.16667ZM19.0934 6.25001L12.4997 11.1979L5.90592 6.25001H19.0934ZM19.7913 18.75H5.20801C4.93174 18.75 4.66679 18.6403 4.47144 18.4449C4.27609 18.2496 4.16634 17.9846 4.16634 17.7083V7.55209L11.8747 13.3333C12.055 13.4686 12.2743 13.5417 12.4997 13.5417C12.7251 13.5417 12.9444 13.4686 13.1247 13.3333L20.833 7.55209V17.7083C20.833 17.9846 20.7233 18.2496 20.5279 18.4449C20.3326 18.6403 20.0676 18.75 19.7913 18.75Z" fill="#01815E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 963 B

3
src/icons/facebook-green.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5413 22.9167H9.37467C9.09841 22.9167 8.83346 22.8069 8.63811 22.6116C8.44275 22.4162 8.33301 22.1513 8.33301 21.875V15.4167H6.24967C5.97341 15.4167 5.70846 15.3069 5.51311 15.1116C5.31775 14.9162 5.20801 14.6513 5.20801 14.375V10.625C5.20801 10.3487 5.31775 10.0838 5.51311 9.88843C5.70846 9.69308 5.97341 9.58333 6.24967 9.58333H8.33301V7.8125C8.40602 6.22537 9.10449 4.73171 10.2757 3.65811C11.4469 2.58451 12.9955 2.01832 14.583 2.08333H17.708C17.9843 2.08333 18.2492 2.19308 18.4446 2.38843C18.6399 2.58378 18.7497 2.84873 18.7497 3.125V6.875C18.7497 7.15127 18.6399 7.41622 18.4446 7.61157C18.2492 7.80692 17.9843 7.91666 17.708 7.91666H14.583V9.58333H17.708C17.8688 9.58211 18.0278 9.61816 18.1724 9.68864C18.3169 9.75912 18.4432 9.86213 18.5413 9.98958C18.6384 10.119 18.7039 10.2691 18.7329 10.4282C18.7618 10.5873 18.7533 10.751 18.708 10.9062L17.6663 14.6562C17.6033 14.8816 17.4663 15.0791 17.2773 15.217C17.0884 15.355 16.8585 15.4253 16.6247 15.4167H14.583V21.875C14.583 22.1513 14.4733 22.4162 14.2779 22.6116C14.0826 22.8069 13.8176 22.9167 13.5413 22.9167ZM10.4163 20.8333H12.4997V14.375C12.4997 14.0987 12.6094 13.8338 12.8048 13.6384C13.0001 13.4431 13.2651 13.3333 13.5413 13.3333H15.8747L16.333 11.6667H13.5413C13.2651 11.6667 13.0001 11.5569 12.8048 11.3616C12.6094 11.1662 12.4997 10.9013 12.4997 10.625V7.8125C12.5264 7.27822 12.7577 6.7747 13.1455 6.40625C13.5333 6.0378 14.0481 5.83266 14.583 5.83333H16.6663V4.16666H14.583C13.5484 4.10363 12.5307 4.45107 11.7507 5.13361C10.9707 5.81614 10.4912 6.77871 10.4163 7.8125V10.625C10.4163 10.9013 10.3066 11.1662 10.1112 11.3616C9.91589 11.5569 9.65094 11.6667 9.37467 11.6667H7.29134V13.3333H9.37467C9.65094 13.3333 9.91589 13.4431 10.1112 13.6384C10.3066 13.8338 10.4163 14.0987 10.4163 14.375V20.8333Z" fill="#01815E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

3
src/icons/phone.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.1247 22.9167C13.8719 22.9112 9.79479 21.2193 6.78759 18.2121C3.78039 15.2049 2.08852 11.1278 2.08301 6.87501C2.08301 5.60418 2.58784 4.3854 3.48645 3.48679C4.38507 2.58818 5.60385 2.08334 6.87467 2.08334C7.14378 2.08129 7.41243 2.10571 7.67676 2.15626C7.93229 2.19407 8.18349 2.25687 8.42676 2.34376C8.59785 2.40379 8.75031 2.50744 8.86906 2.64446C8.98781 2.78148 9.06874 2.94712 9.10384 3.12501L10.5309 9.37501C10.5694 9.54466 10.5648 9.72124 10.5175 9.88864C10.4701 10.056 10.3817 10.2089 10.2601 10.3333C10.1247 10.4792 10.1143 10.4896 8.83301 11.1563C9.85904 13.4071 11.6593 15.2148 13.9059 16.25C14.583 14.9583 14.5934 14.9479 14.7393 14.8125C14.8637 14.6909 15.0166 14.6025 15.184 14.5551C15.3514 14.5078 15.5279 14.5032 15.6976 14.5417L21.9476 15.9688C22.1198 16.0087 22.279 16.0918 22.4102 16.2103C22.5414 16.3287 22.6403 16.4786 22.6976 16.6458C22.7855 16.8931 22.8517 17.1475 22.8955 17.4063C22.9374 17.6681 22.9583 17.9328 22.958 18.1979C22.9388 19.4633 22.4198 20.6697 21.5142 21.5538C20.6087 22.4379 19.3902 22.9278 18.1247 22.9167ZM6.87467 4.16667C6.15722 4.16942 5.46994 4.45564 4.96263 4.96296C4.45531 5.47027 4.16909 6.15756 4.16634 6.87501C4.1691 10.5761 5.64059 14.1249 8.25769 16.742C10.8748 19.3591 14.4235 20.8306 18.1247 20.8333C18.8421 20.8306 19.5294 20.5444 20.0367 20.0371C20.544 19.5297 20.8303 18.8425 20.833 18.125V17.7813L15.9997 16.6667L15.6976 17.2396C15.2288 18.1458 14.8851 18.8021 14.0101 18.4479C12.2839 17.8301 10.7171 16.8355 9.42336 15.5363C8.12965 14.2372 7.14157 12.6662 6.53092 10.9375C6.15592 10.125 6.86426 9.75001 7.76009 9.28126L8.33301 9.00001L7.21842 4.16667H6.87467Z" fill="#01815E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/images/arkady.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
src/images/sasha.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

79
src/pages/Structure.tsx Normal file
View File

@ -0,0 +1,79 @@
// Modules
import { v4 as uuidv4 } from "uuid";
// Components
import PersonInfo from "../components/structure/PersonInfo";
import SectionTitle from "../components/global/SectionTitle";
// Images
import arkady from "../images/arkady.jpg";
import sasha from "../images/sasha.jpg";
// Types
import { personProps } from "../types/personProps";
const personData: personProps[] = [
{
img: arkady,
position: "Assistant to the FIDE President",
name: "Kiselev, Konstantin",
email: "fidepresident@fide.com",
tel: "+993 65 65-65-65",
facebook: "@fidepresident",
},
{
img: sasha,
position: "FIDE President",
name: "Dvorkovich, Arkady",
email: "fidepresident@fide.com",
tel: "+993 65 65-65-65",
facebook: "@fidepresident",
},
{
img: arkady,
position: "Assistant to the FIDE President",
name: "Kiselev, Konstantin",
email: "fidepresident@fide.com",
tel: "+993 65 65-65-65",
facebook: "@fidepresident",
},
{
img: sasha,
position: "FIDE President",
name: "Dvorkovich, Arkady",
email: "fidepresident@fide.com",
tel: "+993 65 65-65-65",
facebook: "@fidepresident",
},
];
// Link: /structure
const Structure = () => {
return (
<main className="structure">
<div className="container">
<div className="structure-inner">
<SectionTitle title={"Структура федерации"} />
<div className="structure-content">
{personData.map((person) => {
return (
<PersonInfo
key={uuidv4()}
img={person.img}
email={person.email}
name={person.name}
position={person.position}
tel={person.tel}
facebook={person.facebook}
/>
);
})}
</div>
</div>
</div>
</main>
);
};
export default Structure;

55
src/styles/_structure.scss Normal file
View File

@ -0,0 +1,55 @@
.structure-inner {
padding: 8rem 0 16rem 0;
display: flex;
flex-direction: column;
gap: 4.8rem;
}
.person {
background: #ffffff;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
border-radius: 5px;
display: flex;
gap: 4rem;
padding: 4rem;
}
.person-right {
display: flex;
flex-direction: column;
}
.person-pos {
color: #7d7d7d;
font-size: 2.4rem;
font-weight: bold;
}
.person-name {
margin-bottom: 2.6rem;
color: $base-green;
font-size: 2.4rem;
font-weight: bold;
}
.person-data {
display: flex;
align-items: center;
gap: 1.6rem;
span {
font-size: 1.6rem;
}
}
.structure-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4.8rem;
}
.person-right-bottom {
display: flex;
flex-direction: column;
gap: 2rem;
}

1
src/styles/style.scss
View File

@ -11,3 +11,4 @@
@import "./rating";
@import "./profile";
@import "./event-item";
@import "./structure";

8
src/types/personProps.ts Normal file
View File

@ -0,0 +1,8 @@
export interface personProps {
img: string;
position: string;
name: string;
email: string;
tel: string;
facebook: string;
}