Skip to content

Commit 8961885

Browse files
souhaib-benbouzidsouhaib-benbouzid
committed
👷🏾‍♂️ Top Projects & Articles
1 parent 2e9fe98 commit 8961885

File tree

9 files changed

+315
-373
lines changed

9 files changed

+315
-373
lines changed

‎frontend/src/apps/main/scenes/landing/header/index.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,21 +33,21 @@ const useStyles = makeStyles((theme) => ({
3333
justifyContent: "center",
3434
textAlign: "center",
3535
flexDirection: "column",
36-
[theme.breakpoints.up("md")]: {
37-
padding: theme.spacing(6),
38-
},
36+
minHeight: "90vh",
37+
3938
[theme.breakpoints.down("sm")]: {
40-
height: "80vh",
39+
height: "85vh",
4140
},
4241
},
4342
buttons: {
4443
padding: theme.spacing(4),
4544
},
4645
header: {
4746
padding: theme.spacing(2),
47+
color: theme.palette.text.secondary,
4848
},
4949
socialMedia: {
50-
padding: theme.spacing(2),
50+
padding: "48px 29px",
5151
},
5252
}));
5353

‎frontend/src/apps/main/scenes/landing/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { TopArticles } from "./top-articles";
99
import { TopProjects } from "./top-projects";
1010
import { WhatAndWhy } from "./what-and-why";
1111
import { connect } from "react-redux";
12+
import { fetchProjectsList } from "t9/apps/main/redux/actions/projects-scene";
1213

1314
export const LandingScene = ({
1415
topProjects,

‎frontend/src/apps/main/scenes/landing/top-articles/index.tsx‎

Lines changed: 138 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,142 @@
1-
import "./style";
1+
import { Theme, createStyles, makeStyles } from "@material-ui/core/styles";
22
import { Article } from "t9/types/fullstack";
3-
import { LinkV2 } from "src/components/link-v2";
3+
import Button from "@material-ui/core/Button";
4+
import Card from "@material-ui/core/Card";
5+
import CardActionArea from "@material-ui/core/CardActionArea";
6+
import CardActions from "@material-ui/core/CardActions";
7+
import CardContent from "@material-ui/core/CardContent";
8+
import CardMedia from "@material-ui/core/CardMedia";
9+
import Grid from "@material-ui/core/Grid";
10+
import { GridSpacing } from "@material-ui/core";
411
import React from "react";
12+
import Skeleton from "@material-ui/lab/Skeleton/Skeleton";
13+
import Typography from "@material-ui/core/Typography";
514

6-
interface TopArticlesProps {
7-
topArticles: Article[] | null;
8-
}
9-
10-
export const TopArticles = ({ topArticles }: TopArticlesProps) => (
11-
<section className="top-articles">
12-
<header>
13-
<h1 className="title">Read Community Articles</h1>
14-
<p className="sub-title">
15-
Read awesome articles, written by <strong>Algerian Developers</strong>
16-
</p>
17-
</header>
18-
<div className="articles">
19-
{topArticles ? (
20-
topArticles.map((article, index) => (
21-
<div className="article" key={`article-${index}`}>
22-
<div
23-
className="image"
24-
style={{ backgroundImage: `url(${article.image})` }}
25-
/>
26-
<div className="info">
27-
<div className="title">{article.title}</div>
28-
<div className="description">{article.description}</div>
29-
</div>
30-
<LinkV2
31-
className="btn btn__primary"
32-
id="buttons__1"
33-
href={`/Articles/${article.slug}`}
34-
>
35-
Read Article
36-
</LinkV2>
37-
</div>
38-
))
39-
) : (
40-
<div>Loading Top Articles ...</div>
41-
)}
42-
</div>
43-
<LinkV2 className=" btn btn__secondary" id="buttons__2" to="/Articles">
44-
Explore More Articles
45-
</LinkV2>
46-
</section>
15+
const useStyles = makeStyles((theme: Theme) =>
16+
createStyles({
17+
root: {
18+
minHeight: "80vh",
19+
[theme.breakpoints.up("lg")]: {
20+
minHeight: "40vh",
21+
margin: `15vh 0`,
22+
},
23+
},
24+
title: {
25+
textAlign: "center",
26+
margin: "60px 0",
27+
color: theme.palette.text.secondary,
28+
},
29+
subTitle: {
30+
textAlign: "center",
31+
marginBottom: "60px",
32+
},
33+
TopArticles: {
34+
flexGrow: 1,
35+
paddingBottom: theme.spacing(4),
36+
},
37+
searchRoot: {
38+
paddingTop: 100,
39+
width: "90%",
40+
maxWidth: 300,
41+
"& > *": {
42+
width: "100%",
43+
height: 200,
44+
},
45+
},
46+
cardRoot: {
47+
maxWidth: 300,
48+
width: "90vw",
49+
},
50+
media: {
51+
height: 300,
52+
},
53+
}),
4754
);
55+
56+
export const TopArticles = (props: { topArticles: Article[] | null }) => {
57+
const [spacing] = React.useState<GridSpacing>(2);
58+
const classes = useStyles();
59+
60+
return (
61+
<section className={classes.root}>
62+
<Typography className={classes.title} variant="h2">
63+
Read Community Articles
64+
</Typography>
65+
<Typography className={classes.subTitle} variant="h4">
66+
Read awesome articles, written by Algerian Developers
67+
</Typography>
68+
<Grid
69+
container
70+
justify="center"
71+
className={classes.TopArticles}
72+
spacing={spacing}
73+
>
74+
<Grid item xs={12}>
75+
<Grid container justify="center" spacing={spacing}>
76+
{props.topArticles
77+
? props.topArticles.map((article) => (
78+
<Grid key={`article-${article.slug}`} item>
79+
<Card className={classes.cardRoot}>
80+
<CardActionArea>
81+
<CardMedia
82+
className={classes.media}
83+
image={article.image}
84+
title={article.title}
85+
/>
86+
<CardContent>
87+
<Typography gutterBottom variant="h5" component="h2">
88+
{article.title}
89+
</Typography>
90+
<Typography
91+
variant="body2"
92+
color="textSecondary"
93+
component="p"
94+
>
95+
{article.description}
96+
</Typography>
97+
</CardContent>
98+
</CardActionArea>
99+
<CardActions>
100+
<Button size="small" color="primary">
101+
Try
102+
</Button>
103+
<Button size="small" color="primary">
104+
Contribute
105+
</Button>
106+
</CardActions>
107+
</Card>
108+
</Grid>
109+
))
110+
: [1, 2, 3].map((id) => (
111+
<Grid key={`project-${id}`} item>
112+
<Card className={classes.cardRoot}>
113+
<CardActionArea>
114+
<Skeleton
115+
animation="wave"
116+
variant="rect"
117+
className={classes.media}
118+
/>
119+
<CardContent>
120+
<React.Fragment>
121+
<Skeleton
122+
animation="wave"
123+
height={10}
124+
style={{ marginBottom: 6 }}
125+
/>
126+
<Skeleton
127+
animation="wave"
128+
height={10}
129+
width="80%"
130+
/>
131+
</React.Fragment>
132+
</CardContent>
133+
</CardActionArea>
134+
</Card>
135+
</Grid>
136+
))}
137+
</Grid>
138+
</Grid>
139+
</Grid>
140+
</section>
141+
);
142+
};

‎frontend/src/apps/main/scenes/landing/top-articles/style.scss‎

Lines changed: 0 additions & 100 deletions
This file was deleted.

0 commit comments

Comments
 (0)