├── .gitignore
├── CONTRIBUTING.md
├── README.md
├── package-lock.json
├── package.json
├── public
├── 192114009-0830321a-d227-4a4d-8411-6c03b54d7ce6.png
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
└── src
├── App.jsx
├── app.css
├── components
├── Contributors
│ ├── index.css
│ └── index.jsx
├── Footer
│ ├── index.css
│ └── index.jsx
├── Header
│ ├── index.css
│ └── index.jsx
├── Home
│ ├── index.css
│ └── index.jsx
├── Mode
│ ├── index.css
│ └── index.jsx
└── RepoContributors
│ ├── index.css
│ └── index.jsx
├── helpers
├── Api.js
├── reducer.js
└── store.js
├── index.css
├── index.js
├── repos.json
└── styled-components
├── Buttons
├── primary
│ ├── index.css
│ └── index.jsx
└── secondary
│ ├── index.css
│ └── index.jsx
├── ContributorCard
├── index.css
└── index.jsx
└── RepoCard
├── index.css
└── index.jsx
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | 1. Pull requests can be submitted to any opted-in repository on GitHub or GitLab.
2 | 2. The pull request must contain commits you made yourself.
3 | 3. If a maintainer reports your pull request as spam, it will not be counted toward your participation in Hacktoberfest.
4 | 4. If a maintainer reports behavior that’s not in line with the project’s code of conduct, you will be ineligible to participate.
5 | This year, the first 40,000 participants can earn a T-shirt.
6 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
HacktoberFest 2022 React
2 |
3 |
4 |
5 |
6 |
7 |
8 |
10 |
11 |
12 | 
13 | 
14 | 
15 | 
16 |
17 |
18 | # Upload Components to be used in future
19 |
20 | Use this project to make your first contribution to an open source project on GitHub. Practice making your first pull request to a public repository before doing the real thing!
21 |
22 | # What is Hacktoberfest?
23 |
24 | Hacktoberfest is a program by Digital Ocean, DEV and Github, where you can easily win a T-Shirt just by making 4 pull requests in the month of October to any open source projects on Github.
25 |
26 | ## Steps to follow:
27 |
28 | ### 1. Register for Hacktoberfest
29 |
30 | ##### https://hacktoberfest.com/
31 |
32 | ### 2. Add/Fix component
33 |
34 | Add or fix the component if you found any issue.
35 |
36 | ### 3. Create Pull Request:
37 |
38 | Once you have completed these steps, you are ready to start contributing by clicking on Create Pull Request.
39 |
40 | ### 4. Give this Project a Star:
41 |
42 | If you liked working on this project, please share this project as much as you can and star this project to help as many people in opensource as you can.
43 |
44 |
45 | ## Note:
46 |
47 | 1. Don't Create Pull Request to update "readme.md" File.
48 | 2. Maintain proper folder structure.
49 | 3. In case you need to add an external package, install it by using npm. Don't push the complete package file here
50 |
51 |
52 | ### Steps to run the project
53 | * Fork the repo
54 | * Clone into local
55 | * Run npm install
56 | * Run npm start
57 |
58 | ### Issues to fix:
59 | * Fix all the buttons
60 | * Improve box-shadow in light mode
61 | * Make dark mode as default
62 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "hacktoberfest2022-react-app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@reduxjs/toolkit": "^1.8.5",
7 | "@testing-library/jest-dom": "^5.16.5",
8 | "@testing-library/react": "^13.4.0",
9 | "@testing-library/user-event": "^13.5.0",
10 | "axios": "^0.27.2",
11 | "react": "^18.2.0",
12 | "react-dom": "^18.2.0",
13 | "react-redux": "^8.0.4",
14 | "react-router-dom": "^6.4.1",
15 | "react-scripts": "5.0.1",
16 | "web-vitals": "^2.1.4"
17 | },
18 | "scripts": {
19 | "start": "react-scripts start",
20 | "build": "react-scripts build",
21 | "test": "react-scripts test",
22 | "eject": "react-scripts eject"
23 | },
24 | "eslintConfig": {
25 | "extends": [
26 | "react-app",
27 | "react-app/jest"
28 | ]
29 | },
30 | "browserslist": {
31 | "production": [
32 | ">0.2%",
33 | "not dead",
34 | "not op_mini all"
35 | ],
36 | "development": [
37 | "last 1 chrome version",
38 | "last 1 firefox version",
39 | "last 1 safari version"
40 | ]
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/public/192114009-0830321a-d227-4a4d-8411-6c03b54d7ce6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dikshantrajput/hacktoberfest-2022-react/e7cf1566ecb9b81457cee3476a8aaf661b6b1b52/public/192114009-0830321a-d227-4a4d-8411-6c03b54d7ce6.png
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dikshantrajput/hacktoberfest-2022-react/e7cf1566ecb9b81457cee3476a8aaf661b6b1b52/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
19 |
20 |
22 |
23 |
32 | Hacktoberfest 2022
33 |
34 |
35 |
36 |
37 |
38 |
48 |
51 |
54 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dikshantrajput/hacktoberfest-2022-react/e7cf1566ecb9b81457cee3476a8aaf661b6b1b52/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dikshantrajput/hacktoberfest-2022-react/e7cf1566ecb9b81457cee3476a8aaf661b6b1b52/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import Footer from "./components/Footer";
2 | import Header from "./components/Header";
3 | import {
4 | Routes,
5 | Route
6 | } from "react-router-dom";
7 | import Home from "./components/Home";
8 | import Contributors from "./components/Contributors";
9 | import './app.css';
10 | import { useSelector } from 'react-redux'
11 | function App() {
12 | const mode = useSelector((state) => state.mode.value);
13 | console.log(mode);
14 | return (
15 |
16 |
17 |
18 |
19 |
20 | } />
21 | } />
22 |
23 |
24 |
25 |
26 |
27 |
28 |
17 | {repos.map((repo) => {
18 | return ;
19 | })}
20 |
21 | );
22 | }
23 |
24 | export default Contributors
--------------------------------------------------------------------------------
/src/components/Footer/index.css:
--------------------------------------------------------------------------------
1 | footer {
2 | padding: 1rem;
3 | margin-top: 1rem;
4 | }
5 | .footer__light {
6 | box-shadow: 0px -3px 7px 0px #355764;
7 | /* Added Font-Weight */
8 | font-weight: 600;
9 | }
10 | .footer__dark {
11 | box-shadow: 0px -2px 5px 0px var(--shadow-color);
12 | }
13 | .footer-a {
14 | color: #34c0eb;
15 | padding-right: 20px;
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/Footer/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './index.css';
3 | import { useSelector } from 'react-redux';
4 |
5 | function Footer() {
6 | const mode = useSelector((state) => state.mode.value);
7 |
8 | return (
9 |
41 | );
42 | }
43 |
44 | export default Footer;
45 |
--------------------------------------------------------------------------------
/src/components/Header/index.css:
--------------------------------------------------------------------------------
1 | header {
2 | display: flex;
3 | align-items: center;
4 | justify-content: space-between;
5 | padding: 1rem;
6 | margin-bottom: 1rem;
7 | }
8 | .header__dark {
9 | box-shadow: 0px 2px 4px 0px var(--shadow-color);
10 | }
11 | .header__light {
12 | /* box-shadow: 0px 2px 4px 0px var(--black-color); */
13 | box-shadow: 0px 3px 7px 0px #355764;
14 | }
15 | .brand__container a,
16 | .header__nav__list__item a {
17 | color: var(--white-color);
18 | font-size: 1.1rem;
19 | padding-right: 20px;
20 | }
21 | .brand__container__light a,
22 | .header__nav__list__item__light a {
23 | color: var(--black-color);
24 | font-size: 1.1rem;
25 | /* Added Font Weight */
26 | font-weight: 600;
27 | padding-right: 20px;
28 | }
29 |
30 | span {
31 | font-weight: 600;
32 | }
33 |
34 | header nav {
35 | flex: 0.5;
36 | }
37 |
38 | .header__nav__list {
39 | display: flex;
40 | align-items: center;
41 | justify-content: space-around;
42 | }
43 |
44 | .header__nav__list__item a {
45 | font-size: 1.1rem;
46 | font-weight: 600;
47 | }
48 |
49 | .brand__container a:hover,
50 | .header__nav__list__item a:hover {
51 | color: var(--cyan-color);
52 | }
53 |
54 | @media (max-width: 767.98px) {
55 | header {
56 | position: relative;
57 | margin-bottom: 45px;
58 | }
59 |
60 | .navbar {
61 | position: absolute;
62 | left: 0;
63 | bottom: -45px;
64 | width: 100%;
65 | border-bottom: 1px solid #ccc;
66 | overflow: hidden;
67 | }
68 | .navbar ul {
69 | padding: 0;
70 | }
71 |
72 | .navbar li a {
73 | padding: 0 5px;
74 | font-size: 0.9em;
75 | }
76 |
77 | .header__nav__list {
78 | margin: 0 auto;
79 | }
80 | }
81 |
82 | @media (max-width: 350px) {
83 | .navbar li a {
84 | font-size: 0.75em;
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/src/components/Header/index.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "react-router-dom";
3 | import "./index.css";
4 | import Mode from "../Mode";
5 | import { useSelector } from "react-redux";
6 | function Header() {
7 | const mode = useSelector((state) => state.mode.value);
8 |
9 | return (
10 |
60 | );
61 | }
62 |
63 | export default Header;
64 |
--------------------------------------------------------------------------------
/src/components/Home/index.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
2 |
3 | * {
4 | font-family: "Montserrat", sans-serif;
5 | }
6 |
7 | .cards {
8 | margin: 3.5rem 0;
9 | }
10 |
--------------------------------------------------------------------------------
/src/components/Home/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import Repos from '../../repos.json';
3 | import './index.css';
4 | import RepoCard from '../../styled-components/RepoCard';
5 | import PrinmaryButton from '../../styled-components/Buttons/primary';
6 |
7 | function Home() {
8 | const [repos, setRepos] = useState([]);
9 |
10 | useEffect(() => {
11 | if (Repos.repos) {
12 | setRepos(Repos.repos);
13 | }
14 | }, []);
15 |
16 | return (
17 |
18 | Contribute now on any one of these and get your profile listed in the
19 | contributors section
20 |
28 |
29 | {repos.map((repo) => {
30 | return (
31 |
38 | );
39 | })}
40 |
41 |
9 |
13 |
14 | );
15 | }
16 | export default Mode
--------------------------------------------------------------------------------
/src/components/RepoContributors/index.css:
--------------------------------------------------------------------------------
1 | .repo__name {
2 | margin-bottom: 1rem;
3 | text-transform: capitalize;
4 | color: rgb(36, 119, 234);
5 | }
6 |
7 | .load__more__container {
8 | width: 100%;
9 | text-align: right;
10 | margin: 2rem 0;
11 | }
12 |
13 | .load__more__container button {
14 | font-size: 1.05rem;
15 | }
16 | .contributor__container {
17 | display: flex;
18 | justify-content: flex-between;
19 | flex-wrap: wrap;
20 | align-items: center;
21 | }
22 |
23 | .contributor__container::after {
24 | content: "";
25 | flex: auto;
26 | }
--------------------------------------------------------------------------------
/src/components/RepoContributors/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 | import { getData } from '../../helpers/Api'
3 | import SecondaryButton from '../../styled-components/Buttons/secondary'
4 | import ContributorCard from '../../styled-components/ContributorCard'
5 | import './index.css'
6 |
7 | function RepoContributors({repo}) {
8 | const [pageNo, setPageNo] = useState(1)
9 | const [contributors, setContributors] = useState([])
10 | const [loadMore, setLoadMore] = useState(true)
11 |
12 | const getAllContributorsOfRepo = async (userName,repoName,page)=>{
13 | let options = {}
14 | let url = `https://api.github.com/repos/${userName}/${repoName}/contributors?per_page=10&page=${page}`
15 | const repoContributos = await getData(url,options)
16 | setContributors(repoContributos)
17 | if(repoContributos.length <10) {
18 | return setLoadMore(false)
19 | }
20 | }
21 |
22 | const loadMoreContributors = ()=>{
23 | setPageNo((prev)=>prev+1)
24 | getAllContributorsOfRepo(repo?.username, repo?.reponame,pageNo)
25 | }
26 |
27 | useEffect(() => {
28 | getAllContributorsOfRepo(repo?.username, repo?.reponame, pageNo)
29 | }, [pageNo, repo?.reponame, repo?.username])
30 |
31 | return (
32 |
33 |
{repo?.reponame}
34 |
35 | {contributors.map((contributor) => {
36 | return (
37 |
38 | );
39 | })}
40 |
41 | {loadMore && (
42 |
43 |
47 |
48 | )}
49 |
9 |
10 |
11 |
12 |
13 |
14 | {login}
15 |
16 |
19 |
20 |
13 |
17 |
{title}
18 |
19 |
{body}
20 |
21 |