├── .eslintrc.json ├── .gitignore ├── CONTRIBUTING.md ├── README.md ├── components ├── Header.jsx ├── Navbar.jsx ├── Repo.jsx ├── Repositories.jsx └── UserProfile.jsx ├── firebase.js ├── next.config.js ├── package.json ├── pages ├── _app.js ├── api │ └── hello.js └── index.js ├── postcss.config.js ├── public ├── default_image.png └── favicon.png ├── styles └── globals.css ├── tailwind.config.js └── yarn.lock /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.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 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution guide 2 | 3 | If you're interested in contributing to this project, great! This file should help you get started. 4 | 5 | ## Types of contribution 6 | 7 | There are many ways you can help improve this repository! For example: 8 | 9 | - **Write a brand-new example:** for example, you might notice that there are no 10 | examples for a particular. 11 | - **Improve an existing example:** for example, 12 | you might notice a problem with an existing example, or some way it could be made more helpful. 13 | - **Fix a bug:** we have a list of issues, 14 | or maybe you found your own. 15 | 16 | ## Good first issues 17 | 18 | - [Examples needed] 19 | - [Help wanted] 20 | 21 | ## Setup 22 | 23 | To contribute live examples all you need is a text editor, git, a GitHub account, and Nodejs. 24 | 25 | As far as text/code editors go, there are more editors than you can shake a stick at, so it's down to personal preference. [Visual Studio](https://code.visualstudio.com/download) and [Atom](https://atom.io/) are great editors we can definitely recommend. 26 | 27 | For more information on setting up Git on your machine, [read this article](https://help.github.com/articles/set-up-git/). 28 | 29 | With the above dependencies satisfied, [create your new account on Github](https://github.com/join). 30 | 31 | Lastly, [install Nodejs for your operating system](https://nodejs.org/). 32 | 33 | ### Fork and clone 34 | 35 | Next up, you need to fork and clone the repo to be able to contribute to it. You can [learn about forking on Github](https://help.github.com/articles/fork-a-repo). Once you have your own fork, [clone it to your local machine](https://help.github.com/articles/cloning-a-repository/). 36 | 37 | ## Testing 38 | 39 | Once you've written an example you can run a local server to try it out. 40 | 41 | Once you're satisfied, the final step is to [submit your pull request](https://help.github.com/articles/creating-a-pull-request/). 42 | 43 | ## Thank you! 44 | 45 | Thank you for your contribution ~ o/\o 46 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | live site - https://gitalt.netlify.app/ 4 | 5 | ### Screenshots 📷 6 | 7 | ![image](https://user-images.githubusercontent.com/85151171/193634737-39777042-30df-4b2a-8afd-634a02ad90e5.png) 8 | 9 | ![image](https://user-images.githubusercontent.com/85151171/193634920-c9ce60c1-9491-4ed9-875a-46c79589b760.png) 10 | 11 | ## Steps / Guidance 12 | * You can search any github authorized user in this app and checkout there profile 13 | * for searching the user you can see a search bar on the top left 14 | * once you write user's github username in the search bar then press enter to get the details of the user 15 | * and you check his repositories maximum upto 30, thats the repo limit from GitHub API 16 | 17 | 18 | ## Getting Started 19 | 20 | First, run the development server: 21 | 22 | ```bash 23 | npm run dev 24 | # or 25 | yarn dev 26 | ``` 27 | 28 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 29 | 30 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 31 | 32 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 33 | 34 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 35 | 36 | ## Learn More 37 | 38 | To learn more about Next.js, take a look at the following resources: 39 | 40 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 41 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 42 | 43 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 44 | 45 | ## Deploy on Vercel 46 | 47 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 48 | 49 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 50 | -------------------------------------------------------------------------------- /components/Header.jsx: -------------------------------------------------------------------------------- 1 | import { signInWithPopup, signOut } from 'firebase/auth' 2 | import { useState } from 'react' 3 | import { AiFillGithub } from 'react-icons/ai' 4 | import { BiBell } from 'react-icons/bi' 5 | import { CgFormatSlash } from 'react-icons/cg' 6 | import { FiLogIn } from 'react-icons/fi' 7 | import { HiOutlineMenu } from 'react-icons/hi' 8 | import { IoMdArrowDropdown } from 'react-icons/io' 9 | import { MdLogout } from 'react-icons/md' 10 | import { auth, provider } from '../firebase' 11 | 12 | const Navbar = ({ searchValue, setSearchValue, fetchUser }) => { 13 | 14 | const [currentUser, setCurrentUser] = useState(null) 15 | const [showModal, setShowModal] = useState(false) 16 | const [showMenu, setShowMenu] = useState(false) 17 | 18 | const handleSignIn = () => { 19 | signInWithPopup(auth, provider) 20 | .then((result) => { 21 | setCurrentUser(result.user) 22 | }).catch((error) => { 23 | console.log(error) 24 | }); 25 | } 26 | 27 | const handleSignOut = () => { 28 | signOut(auth).then(() => console.log("Signed Out")) 29 | setCurrentUser(null) 30 | } 31 | 32 | return ( 33 | <> 34 | {/* Header */} 35 |
36 | 37 |
setShowMenu(!showMenu)} className='md:hidden hover:text-[#BABBBD] text-white my-auto cursor-pointer' > 38 | 39 |
40 | 41 |
42 |
43 | 44 |
45 |
46 | 47 | {/* mobile menu navbar */} 48 | {showMenu && ( 49 |
50 | {/* search input */} 51 |
52 |
53 | fetchUser(e)} onChange={(e) => setSearchValue(e.target.value)} type="text" className='bg-[#0D1117] text-[#C3C3C4] transition-all duration-300 ease-in-out w-full outline-none border-[1px] border-[#31363C] rounded-md pl-3 text-sm py-1 placeholder:text-[#C3C3C4] focus:bg-[#171A22] ' placeholder='Search or jump to...' /> 54 |
55 | 56 |
57 |
58 |
59 | 60 | {/* navbar links */} 61 |
62 | {/* Pull requests */} 63 |
64 |

Pull requests

65 |
66 | 67 | {/* Issues */} 68 |
69 |

Issues

70 |
71 | 72 | {/* Marketplace */} 73 |
74 |

Marketplace

75 |
76 | 77 | {/* Explore */} 78 |
79 |

Explore

80 |
81 | 82 | {/* User Profile */} 83 | {currentUser &&
84 |

85 | user 86 | {currentUser.reloadUserInfo.screenName} 87 |

88 |
} 89 | 90 | {/* Sign In */} 91 |
92 | {currentUser ? ( 93 |

Sign out

94 | ) : ( 95 |

Sign In

96 | )} 97 |
98 | 99 |
100 |
101 | )} 102 | 103 | {/* search bar after md breakpoint */} 104 |
105 | 106 | {/* search input */} 107 |
108 |
109 | fetchUser(e)} onChange={(e) => setSearchValue(e.target.value)} type="text" className='bg-[#0D1117] text-[#C3C3C4] transition-all duration-300 ease-in-out w-[220px] lg:w-[300px] outline-none border-[1px] border-[#31363C] rounded-lg pl-3 py-1 focus:w-[280px] lg:focus:w-[500px] placeholder:text-[#C3C3C4] focus:bg-[#171A22] text-sm ' placeholder='Search or jump to...' /> 110 |
111 | 112 |
113 |
114 |
115 | 116 | {/* navbar links */} 117 |
118 | {/* Pull requests */} 119 |

Pull requests

120 | 121 | {/* Issues */} 122 |

Issues

123 | 124 | {/* Marketplace */} 125 |

Marketplace

126 | 127 | {/* Explore */} 128 |

Explore

129 |
130 |
131 | 132 | {/* user image */} 133 |

134 | 135 | 136 | {/* user image */} 137 | {currentUser ? 138 |
setShowModal(!showModal)} className='hidden top-[1.10rem] md:inline-flex absolute right-4 items-center space-x-[1px] cursor-pointer'> 139 |
140 | 141 |
142 | 143 |
144 | :

145 | Sign In 146 | 147 |

148 | } 149 | 150 | 151 | {/* modal */} 152 | {showModal &&
setShowModal(false)} className='absolute bg-[#161A23] text-[#C9D1D9] border-[1px] border-[#31363C] rounded-md right-5 z-50 top-[50px] ' > 153 | 154 | {/* tooltip */} 155 |
156 |
157 |
158 | {/* tooltip left border */} 159 |
160 | {/* tooltip right border */} 161 |
162 |
163 | 164 |
165 |

Signed in as

166 | {currentUser.reloadUserInfo.screenName} 167 |
168 |

Sign Out

169 |
170 | } 171 |
172 | 173 | ) 174 | } 175 | 176 | export default Navbar -------------------------------------------------------------------------------- /components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { AiOutlineDatabase, AiOutlineStar } from 'react-icons/ai' 3 | import { FiBox } from 'react-icons/fi' 4 | import { IoBookOutline } from 'react-icons/io5' 5 | import { RiBookMarkLine } from 'react-icons/ri' 6 | import Repositories from './Repositories' 7 | 8 | const Navbar = ({ user, setUserNotFound, setPleaseSearchUser }) => { 9 | 10 | const [overview, setOverview] = useState(false) 11 | const [repositories, setRepositories] = useState(true) 12 | const [projects, setProjects] = useState(false) 13 | const [packages, setPackages] = useState(false) 14 | const [stars, setStars] = useState(false) 15 | 16 | return ( 17 | <> 18 | {Object.keys(user).length !== 0 ? (setPleaseSearchUser(false), 19 |
20 | {user.login ? (setUserNotFound(false),
21 | {/* Overview */} 22 |
{ setOverview(true), setRepositories(false), setPackages(false), setProjects(false), setStars(false) }} className='overview flex space-x-2 items-center px-2 py-[4px] cursor-pointer hover:bg-[#20262D] rounded-md relative'> 23 | 24 | 25 | Overview 26 | 27 | {overview &&
} 28 |
29 | 30 | {/* Repositories */} 31 |
{ setOverview(false), setRepositories(true), setPackages(false), setProjects(false), setStars(false) }} className='repositories flex space-x-2 items-center px-2 py-[4px] cursor-pointer hover:bg-[#20262D] rounded-md relative '> 32 | 33 | Repositories 34 | {repositories &&
} 35 |
36 | 37 | {/* Projects */} 38 |
{ setOverview(false), setRepositories(false), setPackages(false), setProjects(true), setStars(false) }} className='flex space-x-2 items-center px-2 py-[4px] cursor-pointer hover:bg-[#20262D] rounded-md relative '> 39 | 40 | Projects 41 | {projects &&
} 42 |
43 | 44 | {/* Packages */} 45 |
{ setOverview(false), setRepositories(false), setPackages(true), setProjects(false), setStars(false) }} className='flex space-x-2 items-center px-2 py-[4px] cursor-pointer hover:bg-[#20262D] rounded-md relative '> 46 | 47 | Packages 48 | {packages &&
} 49 |
50 | 51 | {/* Stars */} 52 |
{ setOverview(false), setRepositories(false), setPackages(false), setProjects(false), setStars(true) }} className='flex space-x-2 items-center px-2 py-[4px] cursor-pointer hover:bg-[#20262D] rounded-md relative '> 53 | 54 | Stars 55 | {stars &&
} 56 |
57 |
58 | ) : setUserNotFound(true)} 59 | 60 |
61 | ) : ( 62 | setPleaseSearchUser(true) 63 | )} 64 | 65 | ) 66 | } 67 | 68 | export default Navbar -------------------------------------------------------------------------------- /components/Repo.jsx: -------------------------------------------------------------------------------- 1 | import moment from 'moment' 2 | import React from 'react' 3 | import { AiOutlineStar } from 'react-icons/ai' 4 | import { BsFillCircleFill } from 'react-icons/bs' 5 | import { TbGitFork } from 'react-icons/tb' 6 | 7 | 8 | const Repo = ({ id, html_url, name, description, language, stargazers_count, forks_count, updated_at }) => { 9 | 10 | 11 | const languageDetector = (language) => { 12 | switch (language) { 13 | case 'JavaScript': 14 | return '#F1E15B' 15 | 16 | case 'HTML': 17 | return '#E24C27' 18 | 19 | case 'CSS': 20 | return '#563D7C' 21 | 22 | case 'Python': 23 | return '#3572A5' 24 | 25 | case 'C++': 26 | return '#F24A7D' 27 | 28 | case 'Ruby': 29 | return '#563D7C' 30 | 31 | case 'TypeScript': 32 | return '#3178C6' 33 | 34 | case 'PHP': 35 | return '#4E5D94' 36 | 37 | case 'Shell': 38 | return '#88E151' 39 | 40 | case 'C#': 41 | return '#178701' 42 | 43 | case 'Julia': 44 | return '#A370BB' 45 | 46 | case 'Go': 47 | return '#01ADD9' 48 | 49 | case 'C': 50 | return '#555555' 51 | 52 | case 'Jypyter Notebook': 53 | return '#DB5B0A' 54 | 55 | default: 56 | return '#555555'; 57 | } 58 | } 59 | 60 | const currDate = new Date(updated_at).getTime() 61 | 62 | function timeSince(timeStamp) { 63 | var time = new Date(timeStamp); 64 | var now = new Date(), 65 | secondsPast = (now.getTime() - time.getTime()) / 1000; 66 | var exactTime = time.getHours() + ' : ' + time.getMinutes(); 67 | if (secondsPast < 60) { 68 | return parseInt(secondsPast) + 'seconds' 69 | } 70 | if (secondsPast < 3600) { 71 | return parseInt(secondsPast / 60) + 'minutes' 72 | } 73 | if (secondsPast <= 86400) { 74 | return parseInt(secondsPast / 3600) + 'hours' 75 | } 76 | if (secondsPast > 86400) { 77 | // var day = time.getDate(); 78 | // var month = time.toDateString() 79 | // .match(/ [a-zA-Z]*/)[0] 80 | // .replace(' ', ''); 81 | // var year = time.getFullYear() == now.getFullYear() ? '' : ' ' + time.getFullYear(); 82 | // return { 83 | // date: day + ' ' + month + year, 84 | // exactTime: exactTime 85 | // }; 86 | return parseInt(secondsPast / 86400) + ' days' 87 | } 88 | } 89 | 90 | return ( 91 |
92 |
93 | {/* repo name */} 94 |
95 | 96 |

{name}

97 | 98 |
99 | 100 |
101 | {/* Description */} 102 |

{description}

103 |
104 | 105 |
106 | {/* most used language */} 107 |
108 | 109 |

{language ? language : 'No lang'}

110 |
111 | 112 | {/* star */} 113 | {stargazers_count !== 0 && 114 |
115 | 116 |

{stargazers_count}

117 |
118 | } 119 | 120 | {/* fork */} 121 | {forks_count !== 0 && 122 |
123 | 124 |

{forks_count}

125 |
126 | } 127 | 128 | {/* Upadated */} 129 |

130 | Updated{" "}{timeSince(currDate)}{" "}ago 131 |

132 | 133 |
134 | {/* Upadated */} 135 |

136 | Updated{" "}{timeSince(currDate)}{" "}ago 137 |

138 |
139 |
140 | ) 141 | } 142 | export default Repo -------------------------------------------------------------------------------- /components/Repositories.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import Repo from './Repo' 3 | 4 | 5 | const Repositories = ({ user }) => { 6 | 7 | const [repos, setRepos] = useState([]) 8 | 9 | useEffect(() => { 10 | const options = { method: 'GET' }; 11 | fetch(`https://api.github.com/users/${user?.login}/repos`, options) 12 | .then(response => response.json()) 13 | .then(response => setRepos(response)) 14 | .catch(err => console.error(err)); 15 | }, [user]) 16 | 17 | return ( 18 | <> 19 | {Object.keys(user).length !== 0 && ( 20 |
21 |
22 |
23 | {/* Mapping the repos here */} 24 | {repos.map(({ id, html_url, name, description, language, stargazers_count, forks_count, updated_at }) => { 25 | return 26 | })} 27 | {/*
*/} 28 |
29 |
30 | 31 | )} 32 | 33 | ) 34 | } 35 | 36 | export default Repositories -------------------------------------------------------------------------------- /components/UserProfile.jsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image' 2 | import React, { useState } from 'react' 3 | import { BiLink } from 'react-icons/bi' 4 | import { BsTwitter } from 'react-icons/bs' 5 | import { HiOutlineMail } from 'react-icons/hi' 6 | import { MdOutlineLocationOn } from 'react-icons/md' 7 | import { TbUsers } from 'react-icons/tb' 8 | import default_image from '../public/default_image.png' 9 | 10 | 11 | const UserProfile = ({ user }) => { 12 | 13 | const [follow, setFollow] = useState(false) 14 | 15 | return ( 16 | <> 17 | {user && user.login && ( 18 |
19 | {/* profile and names */} 20 |
21 | {/* profile image */} 22 |
23 | {user.avatar_url ? 24 | : 25 | default user} 26 |
27 |
28 |

29 | {/* Name */} 30 |

{user.name}

31 | {/* username */} 32 |

{user.login}

33 |

34 |
35 |
36 | 37 |
38 |
39 | 40 | {/* User Bio */} 41 | {user.bio &&
42 | {/* bio */} 43 |

{user.bio}

44 |
} 45 | 46 | {/* Mobile Follow Button */} 47 |
48 | 49 |
50 | 51 | {/* followers and following after md */} 52 |
53 |
54 | {/* followers */} 55 |
56 | 57 | {user.followers > 1000 ? (user.followers / 1000).toFixed(1) + 'k' : user.followers} 58 |

followers

59 |
60 | {/* dot */} 61 |

·

62 | {/* following */} 63 |
64 | {user.following > 1000 ? (user.following / 1000).toFixed(1) + 'k' : user.following} 65 |

following

66 |
67 |
68 |
69 | 70 |
71 | {/* location */} 72 | {user.location &&
73 | 74 |

{user.location}

75 |
} 76 | 77 | {/* email */} 78 |
79 | 80 |

JohnDoe@gmail.com

81 |
82 | 83 | {/* site or portfolio */} 84 | {user.blog &&
85 | 86 | {user.blog} 87 |
} 88 | 89 | {/* twitter */} 90 | {user.twitter_username &&
91 | 92 | {user.twitter_username} 93 |
} 94 |
95 | 96 | 97 | {/* followings and followers */} 98 |
99 |
100 | {/* followers */} 101 |
102 | 103 | {user.followers > 1000 ? (user.followers / 1000).toFixed(1) + 'k' : user.followers} 104 |

followers

105 |
106 | {/* dot */} 107 |

·

108 | {/* following */} 109 |
110 | {user.following > 1000 ? (user.following / 1000).toFixed(1) + 'k' : user.following} 111 |

following

112 |
113 |
114 |
115 | 116 | 117 | {/* Follow Button */} 118 |
119 | 120 |
121 | 122 |
123 |
124 |
)} 125 | 126 | ) 127 | } 128 | 129 | export default UserProfile -------------------------------------------------------------------------------- /firebase.js: -------------------------------------------------------------------------------- 1 | // Import the functions you need from the SDKs you need 2 | import { initializeApp } from "firebase/app"; 3 | import { getAuth, GithubAuthProvider } from "firebase/auth"; 4 | // TODO: Add SDKs for Firebase products that you want to use 5 | // https://firebase.google.com/docs/web/setup#available-libraries 6 | 7 | // Your web app's Firebase configuration 8 | // For Firebase JS SDK v7.20.0 and later, measurementId is optional 9 | const firebaseConfig = { 10 | apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, 11 | authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, 12 | projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, 13 | storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET, 14 | messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID, 15 | appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID, 16 | measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID, 17 | }; 18 | // Initialize Firebase 19 | const app = initializeApp(firebaseConfig); 20 | export const auth = getAuth(app) 21 | export const provider = new GithubAuthProvider() -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "light-vue-assignment", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "firebase": "^9.9.1", 13 | "firebase-tools": "^11.4.1", 14 | "moment": "^2.29.4", 15 | "moment-timezone": "^0.5.34", 16 | "next": "12.2.3", 17 | "react": "18.2.0", 18 | "react-dom": "18.2.0", 19 | "react-icons": "^4.4.0", 20 | "react-moment": "^1.1.2", 21 | "tailwind-scrollbar": "^1.3.1" 22 | }, 23 | "devDependencies": { 24 | "autoprefixer": "^10.4.8", 25 | "eslint": "8.20.0", 26 | "eslint-config-next": "12.2.3", 27 | "postcss": "^8.4.14", 28 | "tailwindcss": "^3.1.7" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import Head from 'next/head' 2 | import { useState } from 'react' 3 | import Header from '../components/Header' 4 | import Navbar from '../components/Navbar' 5 | import Repositories from '../components/Repositories' 6 | import UserProfile from '../components/UserProfile' 7 | 8 | export default function Home() { 9 | 10 | const [searchValue, setSearchValue] = useState('') 11 | const [user, setUser] = useState({}) 12 | const [userNotFound, setUserNotFound] = useState(false) 13 | const [pleaseSearchUser, setPleaseSearchUser] = useState(false) 14 | 15 | const fetchUser = (e) => { 16 | if (e.key === 'Enter') { 17 | const options = { method: 'GET' }; 18 | fetch(`https://api.github.com/users/${searchValue}`, options) 19 | .then(response => response.json()) 20 | .then(response => setUser(response)) 21 | .catch(err => console.error(err + '💀💀💀💀')); 22 | setSearchValue('') 23 | } 24 | } 25 | 26 | return ( 27 |
28 | 29 | GitHub 30 | 31 | 32 | 33 | 34 | {/* Header */} 35 |
36 | 37 |
38 | {/* please search user heading */} 39 | {pleaseSearchUser &&
40 |

Please search a user with username

41 |
} 42 | 43 | {/* user not found heading */} 44 | {userNotFound &&
45 |

User not found

46 |
} 47 | 48 | {/* header line */} 49 | {user.login &&
} 50 | 51 | {/* user profile and navbar */} 52 |
53 | 54 | 55 |
56 |
57 | 58 |
59 | ) 60 | } 61 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/default_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hemantwasthere/git-alt/94ee21e1fbf44822aabddeebb9f23300af5ffdda/public/default_image.png -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hemantwasthere/git-alt/94ee21e1fbf44822aabddeebb9f23300af5ffdda/public/favicon.png -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | body { 6 | background-color: #0d1117; 7 | } 8 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./pages/**/*.{js,ts,jsx,tsx}", 5 | "./components/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: { 9 | screens: { 10 | 'nn': '890px', 11 | } 12 | }, 13 | }, 14 | plugins: [require('tailwind-scrollbar')], 15 | } 16 | --------------------------------------------------------------------------------