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

new section

This commit is contained in:
VividTruthKeeper 2022-07-29 15:20:28 +05:00
parent 0c43d5f983
commit d212071fa0
3 changed files with 154 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/about_us/Statistic.tsx Normal file
View File

@ -0,0 +1,18 @@
// Types
interface Props {
count: number;
title: string;
}
const Statistic = ({ count, title }: Props) => {
return (
<div className="stat">
<div className="stat-square">
<span>{count}</span>
</div>
<p className="stat-title">{title}</p>
</div>
);
};
export default Statistic;

90
src/pages/AboutUs.tsx
View File

@ -7,6 +7,9 @@ import { getAbout } from "../helpers/apiRequests";
import { highlightColor } from "../helpers/otherVariables";
import { hosting } from "../links";
// Components
import Statistic from "../components/about_us/Statistic";
const AboutUs = () => {
const [about, setAbout]: [any, React.Dispatch<any>] = useState();
@ -50,10 +53,95 @@ const AboutUs = () => {
<img src={hosting + about[0].img} alt="" />
</div>
) : (
<Skeleton height={"100%"} />
<Skeleton height={"49.8rem"} />
)}
</div>
</div>
<div className="about-us-middle">
{about ? (
<div className="aub-wrapper">
<Statistic
count={about[0].tournment_number}
title={about[0].tournment_title}
/>
<Statistic
count={about[0].organisation_number}
title={about[0].organisation_title}
/>
<Statistic
count={about[0].graduate_number}
title={about[0].graduate_title}
/>
<Statistic
count={about[0].places_number}
title={about[0].places_title}
/>
</div>
) : (
<div className="group-skeleton">
<div className="group">
<Skeleton
className="fchild"
highlightColor={highlightColor}
width={"13.5rem"}
height={"13.5rem"}
style={{ borderRadius: "0.5rem" }}
/>
<Skeleton
highlightColor={highlightColor}
height={"2.14rem"}
width={"18rem"}
count={2}
/>
</div>
<div className="group">
<Skeleton
className="fchild"
highlightColor={highlightColor}
width={"13.5rem"}
height={"13.5rem"}
style={{ borderRadius: "0.5rem" }}
/>
<Skeleton
highlightColor={highlightColor}
height={"2.14rem"}
width={"18rem"}
count={2}
/>
</div>
<div className="group">
<Skeleton
className="fchild"
highlightColor={highlightColor}
width={"13.5rem"}
height={"13.5rem"}
style={{ borderRadius: "0.5rem" }}
/>
<Skeleton
highlightColor={highlightColor}
height={"2.14rem"}
width={"18rem"}
count={2}
/>
</div>
<div className="group">
<Skeleton
className="fchild"
highlightColor={highlightColor}
width={"13.5rem"}
height={"13.5rem"}
style={{ borderRadius: "0.5rem" }}
/>
<Skeleton
highlightColor={highlightColor}
height={"2.14rem"}
width={"18rem"}
count={2}
/>
</div>
</div>
)}
</div>
</div>
</div>
</main>

47
src/styles/_about-us.scss
View File

@ -35,3 +35,50 @@
}
}
}
.group-skeleton {
display: flex;
align-items: center;
justify-content: space-around;
.group {
display: flex;
flex-direction: column;
align-items: center;
}
.fchild {
margin-bottom: 2.4rem;
}
}
.aub-wrapper {
display: flex;
align-items: flex-start;
justify-content: space-around;
}
.stat {
display: flex;
flex-direction: column;
gap: 2.4rem;
align-items: center;
}
.stat-square {
@include flex-c;
font-weight: bold;
width: 13.5rem;
height: 13.5rem;
background: $base-green;
color: #fff;
font-size: 3.2rem;
border-radius: 0.5rem;
}
.stat-title {
text-align: center;
font-weight: bold;
font-size: 1.8rem;
max-width: 20rem;
}