-
-
Notifications
You must be signed in to change notification settings - Fork 806
/
Home.jsx
142 lines (139 loc) · 5.6 KB
/
Home.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
import { useState, useEffect, useContext } from "react";
import useFetch from "common/hooks/useFetch";
import { Link } from "react-router-dom";
import "./home.css";
import { RiSlideshow4Line } from "react-icons/ri";
import { BiShareAlt, BiAddToQueue } from "react-icons/bi";
import { BsGithub } from "react-icons/bs";
import { FiStar } from "react-icons/fi";
import { FaLightbulb } from 'react-icons/fa';
import { ReactComponent as Flower } from "images/icon-flower.svg";
import { MdManageSearch } from "react-icons/md";
import YoutubeVideoEmbed from 'common/components/YouTubeEmbed';
import FeaturedPlays from "common/playlists/FeaturedPlays";
import Contributors from "./Contributors";
import { SearchContext } from "common/search/search-context";
const Home = () => {
const [gitHubStars, setGitHubStars] = useState("...");
const { data } = useFetch("https://api.github.com/repos/atapas/react-play");
const { setSearchTerm, searchTerm, setFilterQuery } =
useContext(SearchContext);
useEffect(() => {
setGitHubStars(data.stargazers_count);
setSearchTerm("");
setFilterQuery({
level: "",
tags: [],
creator: "",
language: ""
});
}, [data, setSearchTerm, searchTerm, setFilterQuery]);
return (
<div>
<section className="app-home-body">
<div className="home-bg-graphics">
<Flower className="home-bg-graphics-sm" />
<Flower className="home-bg-graphics-rg" />
<Flower className="home-bg-graphics-lg" />
</div>
<div className="app-home-body-content">
<h2 className="body-title">
Start <strong>React Code</strong> Arena <br />
with ReactPlay
</h2>
<p className="body-desc">
ReactPlay is an open-source platform to learn, create and share
ReactJS projects with the developer community. Start by browsing the
plays or exploring the source code.
</p>
<div className="body-c2a">
<Link to="/plays" className="body-c2a-btn body-c2a-btn--primary">
<MdManageSearch className="icon" />
<span className="btn-label">Browse</span>
</Link>
<a
href="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/atapas/react-play"
target="_blank"
rel="noopener noreferrer"
className="body-c2a-btn"
>
<BsGithub className="icon" />
<span className="btn-label">
GitHub{" "}
<div className="label-info-more">
<FiStar /> <div className="more-label">{gitHubStars}</div>
</div>{" "}
</span>
</a>
</div>
<div className="video">
<YoutubeVideoEmbed videoId="XrWonrp296w" title="🤩 Introducing ReactPlay - An Opensource Platform to Create, Learn, and Share ReactJS Projects" />
</div>
</div>
</section>
<section className="home-features">
<ul className="list-home-features">
<li className="home-features-item">
<div className="item-icon">
<RiSlideshow4Line
className="icon"
color="var(--color-neutral-90)"
/>
</div>
<h3 className="item-title">Learn </h3>
<p className="item-desc">
Learn how to "Think in React" and build applications inspired by
several plays(source code & demos). Get to the source code of it,
find related article, or even a YouTube video. Learn from the
expert code reviews.
</p>
</li>
<li className="home-features-item">
<div className="item-icon">
<BiAddToQueue className="icon" color="var(--color-neutral-90)" />
</div>
<h3 className="item-title">Create </h3>
<p className="item-desc">
Create your own plays and own them by following a few simple
steps. Learned something new? Perfect to present as a play. You
can also contribute to the existing plays. Your play will be
reviewed by the experts before being made public.
</p>
</li>
<li className="home-features-item">
<div className="item-icon">
<BiShareAlt className="icon" color="var(--color-neutral-90)" />
</div>
<h3 className="item-title">Socialize </h3>
<p className="item-desc">
Share your plays with the community. The best way of building in
public is by sharing the learning. You can share your plays on
social media platforms like Facebook, Twitter, LinkedIn, to name a
few, just with a single click.
</p>
</li>
</ul>
<div className="home-ideas">
<FaLightbulb className="icon" color="var(--color-brand-primary)" size='48px'/>
<p className="ideas-lead">Not sure how to get started?</p>
<p className="ideas-title">We have got lot of ideas</p>
<Link to="/ideas" className="home-anchor">
<span className="text">Get started with some ideas</span>
</Link>
</div>
</section>
<section className="home-plays">
<FeaturedPlays />
<div className="home-plays-footer">
<Link to="/plays" className="home-anchor">
<span className="text">View all Plays</span>
</Link>
</div>
</section>
<section className="home-contributors">
<Contributors />
</section>
</div>
);
};
export default Home;