├── public
├── favicon.ico
├── logo192.png
├── logo512.png
├── robots.txt
├── netlify.toml
├── manifest.json
└── index.html
├── src
├── Component
│ ├── StatComponent
│ │ ├── lanCount.js
│ │ ├── Theme.js
│ │ ├── UserStat.jsx
│ │ ├── RepoStat.jsx
│ │ └── LanStat.jsx
│ ├── SocialComponent
│ │ ├── socialData.js
│ │ ├── _social.scss
│ │ └── Social.jsx
│ ├── BadgeComponent
│ │ ├── Badge.jsx
│ │ ├── _badge.scss
│ │ ├── lanBadge.js
│ │ ├── FwBadge.jsx
│ │ ├── LanguageBadge.jsx
│ │ ├── fwBade.js
│ │ ├── ProfileView.jsx
│ │ └── Supporter.jsx
│ ├── Stat.jsx
│ ├── _stat.scss
│ ├── Home.jsx
│ └── _home.scss
├── Image
│ └── readmeex.jpg
├── scss
│ ├── _variables.scss
│ ├── style.scss
│ ├── _mixins.scss
│ ├── _global.scss
│ ├── style.css.map
│ └── style.css
├── index.js
├── Permanent
│ ├── _navbar.scss
│ └── Navbar.jsx
└── App.js
├── LICENSE
├── package.json
└── README.md
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anhduy1202/Git-Readme/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anhduy1202/Git-Readme/HEAD/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anhduy1202/Git-Readme/HEAD/public/logo512.png
--------------------------------------------------------------------------------
/src/Component/StatComponent/lanCount.js:
--------------------------------------------------------------------------------
1 | export const lanCountData = [1,2,3,4,5,6,7,8,9,10];
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/Image/readmeex.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anhduy1202/Git-Readme/HEAD/src/Image/readmeex.jpg
--------------------------------------------------------------------------------
/src/Component/SocialComponent/socialData.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | export const socialData = ["LinkedIn","Instagram","Twitter","Facebook","Discord","Youtube","Github"];
--------------------------------------------------------------------------------
/src/scss/_variables.scss:
--------------------------------------------------------------------------------
1 |
2 |
3 | $font-sm: 1rem;
4 | $font-md: 1.5rem;
5 | $font-mdlg: 1.75rem;
6 | $font-lg: 2rem;
7 | $font-xlg: 2.5rem;
8 |
9 | //Font-family:
10 | $code: 'Source Code Pro', monospace;
--------------------------------------------------------------------------------
/src/scss/style.scss:
--------------------------------------------------------------------------------
1 | @import './global';
2 | @import './variables';
3 | @import '../Component/stat';
4 | @import '../Component/SocialComponent/social';
5 | @import '../Permanent/navbar';
6 | @import '../Component/home';
7 | @import './mixins';
8 | @import '../Component/BadgeComponent/badge';
--------------------------------------------------------------------------------
/src/Component/StatComponent/Theme.js:
--------------------------------------------------------------------------------
1 |
2 | export const themeData = [
3 | "tokyonight","default","dark","radical","merko","onedark","cobalt","synthwave","highcontrast","dracula","pussian","vue","vue-dark","shades-of-purple","nightowl","buefy","algolia","gotham","midnight-purple","react","jolly","github_dark","outrun"
4 | ]
5 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | ReactDOM.render(
6 |
7 |
8 | ,
9 | document.getElementById('root')
10 | );
11 |
12 | // If you want to start measuring performance in your app, pass a function
13 | // to log results (for example: reportWebVitals(console.log))
14 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
15 |
--------------------------------------------------------------------------------
/src/Component/BadgeComponent/Badge.jsx:
--------------------------------------------------------------------------------
1 | import FwBadge from "./FwBadge"
2 | import LanguageBadge from "./LanguageBadge"
3 | import ProfileView from "./ProfileView"
4 | import Supporter from "./Supporter"
5 |
6 | const Badge = () => {
7 |
8 |
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | );
18 | }
19 |
20 | export default Badge;
--------------------------------------------------------------------------------
/src/scss/_mixins.scss:
--------------------------------------------------------------------------------
1 | //640px, 1024px, 1400px
2 | $breakpoints-up: ("medium" : "50em", "large" : "64em", "xlarge": "87.5em");
3 |
4 | //639px, 1023pz, 1399px
5 | $breakpoints-down: ("small" : "25em", "medium" : "63.9375em", "large": "87.4375em");
6 |
7 | @mixin breakpoint-up($size) {
8 | @media (min-width: map-get($breakpoints-up, $size)) {
9 | @content;
10 | }
11 | }
12 | @mixin breakpoint-down($size) {
13 | @media (max-width: map-get($breakpoints-down, $size)) {
14 | @content;
15 | }
16 | }
--------------------------------------------------------------------------------
/public/netlify.toml:
--------------------------------------------------------------------------------
1 | [[headers]]
2 | for = "/*"
3 | [headers.values]
4 | X-Frame-Options = "DENY"
5 | X-XSS-Protection = "1; mode=block"
6 | Content-Security-Policy = "form-action https:"
7 | Referrer-Policy = "strict-origin-when-cross-origin"
8 | Strict-Transport-Security = "max-age=2592000"
9 | Feature-Policy = "vibrate 'none'; geolocation 'none'; midi 'none'; notifications 'none'; push 'none'; sync-xhr 'none'; microphone 'none'; camera 'none'; magnetometer 'none'; gyroscope 'none'; speaker 'none'; vibrate 'none'; fullscreen 'none'; payment 'none'"
10 |
--------------------------------------------------------------------------------
/src/Permanent/_navbar.scss:
--------------------------------------------------------------------------------
1 | @import '../scss/variables';
2 | @import '../scss/mixins';
3 | .navbar-container {
4 | align-self: flex-end;
5 | margin-top: 1rem;
6 | margin-bottom: 1rem;
7 | margin-right: 3rem;
8 | @include breakpoint-down(medium){
9 | margin-left: 2rem;
10 | }
11 | a{
12 | font-size: 1.2rem;
13 | font-family: $code;
14 | font-weight: 600;
15 |
16 | }
17 | @include breakpoint-down(medium) {
18 | a{
19 | font-size: 0.9rem;
20 |
21 | }
22 | }
23 | }
--------------------------------------------------------------------------------
/src/scss/_global.scss:
--------------------------------------------------------------------------------
1 | @import "./variables";
2 | .App {
3 | height: 100vh;
4 | width: 100vw;
5 | display: flex;
6 | flex-direction: column;
7 | padding:0;
8 | font-size: $font-md;
9 | position: relative;
10 | font-family: $code;
11 | align-items: center;
12 |
13 |
14 | }
15 |
16 | html{
17 | height: 100vh;
18 | font-size: 100%;
19 | box-sizing: border-box;
20 | overflow-x: hidden;
21 | background-color: #32363b;
22 |
23 | }
24 | *, *::before, *::after {
25 | box-sizing: inherit;
26 | }
27 |
28 |
29 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/src/Component/SocialComponent/_social.scss:
--------------------------------------------------------------------------------
1 | @import '../../scss/variables';
2 |
3 | .social {
4 | &-container{
5 | width:70%;
6 | display: flex;
7 | flex-direction: column;
8 | }
9 | &-icon{
10 |
11 | min-width: 100%;
12 | margin-top: 2.5rem;
13 |
14 | }
15 | &-link{
16 | min-width: 15%;
17 | @include breakpoint-down(medium){
18 | min-width: 30%;
19 | }
20 | }
21 |
22 | }
23 |
24 | .socialStat {
25 | &-form {
26 | display: flex;
27 | min-width: 100%;
28 | }
29 |
30 | }
31 |
--------------------------------------------------------------------------------
/src/Component/Stat.jsx:
--------------------------------------------------------------------------------
1 | import LanStat from "./StatComponent/LanStat";
2 | import RepoStat from "./StatComponent/RepoStat";
3 | import UserStat from "./StatComponent/UserStat";
4 |
5 |
6 |
7 | const Stat = (props) => {
8 |
9 |
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 | {/*
18 |
19 |
20 |
21 | */}
22 |
23 | );
24 | }
25 |
26 | export default Stat;
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
2 | import Badge from './Component/BadgeComponent/Badge';
3 | import Home from './Component/Home';
4 | import Social from './Component/SocialComponent/Social';
5 | import Stat from './Component/Stat';
6 | import Navbar from './Permanent/Navbar';
7 | import './scss/style.css';
8 |
9 | function App() {
10 | return (
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 | export default App;
36 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Daniel Truong
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "readmegithub",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@material-ui/core": "^4.12.3",
7 | "@material-ui/icons": "^4.11.2",
8 | "@testing-library/jest-dom": "^5.14.1",
9 | "@testing-library/react": "^11.2.7",
10 | "@testing-library/user-event": "^12.8.3",
11 | "react": "^17.0.2",
12 | "react-dom": "^17.0.2",
13 | "react-router-dom": "^5.2.1",
14 | "react-scripts": "4.0.3",
15 | "react-use-clipboard": "^1.0.7",
16 | "web-vitals": "^1.1.2"
17 | },
18 | "scripts": {
19 | "start": "react-scripts start",
20 | "build": "CI= 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 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
 
[](https://app.netlify.com/sites/gitmee/deploys)
3 | # Git Readme: Custom Github Readme in an easier way 🥳
4 |
5 | 
6 |
7 | 👆 These badges are copy pasted from this website
8 |
9 |
10 | ## Make your Github Readme prettier in 2 steps:
11 | * Go to your Github readme to customize it
12 | * Use this website and copy the code you need 😍
13 |
14 | ### Read more about this project on my blog: https://danieltruong.hashnode.dev/git-readme-customize-your-github-readme-in-an-easier-way
15 |
16 | ## Give it a ⭐️ if you enjoy using the website
17 |
--------------------------------------------------------------------------------
/src/Component/BadgeComponent/_badge.scss:
--------------------------------------------------------------------------------
1 | @import "../../scss/variables";
2 | @import "../../scss/mixins";
3 |
4 | .badge {
5 | &-link {
6 | min-width: 35%;
7 | }
8 |
9 |
10 | }
11 |
12 | .badge-container {
13 | max-width: 100%;
14 | @include breakpoint-down(medium){
15 | margin-left: 2rem;
16 | }
17 | }
18 |
19 | .mainbadge{
20 | @include breakpoint-down(medium){
21 | max-width: 100%;
22 | }
23 | }
24 |
25 | .badgeStat{
26 | max-width: 50%;
27 | padding-bottom: 2.5rem;
28 | &-form {
29 | display: flex;
30 | min-width: 100%;
31 | margin-bottom: 1.5rem;
32 | @include breakpoint-down(medium){
33 | min-width: 80%;
34 | }
35 |
36 | }
37 | @include breakpoint-down(medium){
38 | max-width: 100%;
39 | p {
40 | font-size: 0.87rem;
41 | }
42 | }
43 | }
44 |
45 | .countStat {
46 | max-width: 50%;
47 | padding-bottom: 2rem;
48 | flex-direction: column;
49 | @include breakpoint-down(medium) {
50 | max-width: 100%;
51 | img {
52 | transform: scale(1.5);
53 | margin-left: 1rem;
54 | margin-bottom: 1rem;
55 | }
56 | }
57 |
58 |
59 | }
--------------------------------------------------------------------------------
/src/Component/_stat.scss:
--------------------------------------------------------------------------------
1 | @import '../scss/variables';
2 | @import '../scss/mixins';
3 |
4 | .stat {
5 | &-container{
6 | width:70%;
7 | display: flex;
8 | flex-direction: column;
9 | @include breakpoint-down(medium){
10 | min-width: 80%;
11 | }
12 | }
13 | }
14 | .social {
15 | &-container {
16 | @include breakpoint-down(medium){
17 | min-width: 100%;
18 | margin-left: 2rem;
19 | }
20 | }
21 |
22 | &-icon {
23 | @include breakpoint-down(medium){
24 | max-width: 100%;
25 | }
26 | }
27 | }
28 |
29 | .socialStat{
30 | @include breakpoint-down(medium) {
31 | }
32 | }
33 | .userStat, .lanStat, .socialStat, .badgeStat, .countStat{
34 | display: flex;
35 | flex-direction: row;
36 | padding-bottom: 3rem;
37 | border-bottom: 2px solid #99aab5;
38 | flex-wrap: wrap;
39 | min-width: 40%;
40 | &-form {
41 | display: flex;
42 | max-width: 50%;
43 | flex-direction: column;
44 | @include breakpoint-down(medium){
45 | max-width: 110%;
46 | margin-right: -1rem;
47 | margin-bottom: 2rem;
48 | }
49 | }
50 |
51 | }
52 |
53 | .lanStat {
54 |
55 | &-img {
56 | margin-bottom: 3rem;
57 | }
58 | }
59 |
60 |
61 | .userStat{
62 | &-img{
63 | @include breakpoint-down(medium) {
64 | max-width: 100%;
65 | }
66 | }
67 | }
--------------------------------------------------------------------------------
/src/Permanent/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import { Breadcrumbs, makeStyles } from "@material-ui/core"
2 | import { Link } from "react-router-dom"
3 | import HomeIcon from '@material-ui/icons/Home';
4 | import EqualizerIcon from '@material-ui/icons/Equalizer';
5 | import WifiIcon from '@material-ui/icons/Wifi';
6 | import LabelIcon from '@material-ui/icons/Label';
7 | const useStyles = makeStyles(() => ({
8 |
9 | link: {
10 | display:"flex",
11 | textDecoration:"none",
12 | color:"#FFFFFF"
13 | },
14 |
15 | icon: {
16 | color:"#7289DA",
17 | textDecoration:"none",
18 | paddingRight: 4
19 |
20 | },
21 | bread: {
22 | color: "#FFFFFF"
23 | }
24 | }));
25 |
26 | const Navbar = () => {
27 | const classes = useStyles();
28 | return (
29 |
50 |
51 | );
52 | }
53 |
54 | export default Navbar;
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
18 |
19 |
23 |
24 |
33 | Github Read Me
34 |
35 |
36 |
37 |
38 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/src/Component/Home.jsx:
--------------------------------------------------------------------------------
1 | import example from '../Image/readmeex.jpg';
2 |
3 | const Home = (props) => {
4 | return (
5 |
6 |
7 |
8 | The only website you'll need to make a pretty looking Readme on Github
9 |
10 |
11 |
12 | Here's an example from my Github Readme
13 |
14 | 
15 |
16 |
17 | How It Works? 🤔
18 | It's easy! Just follow these steps
19 |
20 | - Sign In/ Sign Up to your Github Account
21 | - At the homepage, click on the readme (introduce yourself)
22 | - Type anything you want
23 | - Use this website and copy the code you need 😍
24 |
25 |
26 |
27 |
28 | Credits:
29 | Awesome resources that I collect information from
30 |
44 |
45 |
46 |
47 |
Thank You!
48 |
Give it a ⭐️ if you enjoy using the website
49 |
🌞 My Github 🌞
50 |
`);
85 | const [isCopied, setCopied] = useCopyClipboard(code);
86 | const [Copied, setCop] = useState(false);
87 |
88 | useEffect(() => {
89 | setCode(``);
90 | }, [fwLink])
91 |
92 | const handleChange = (e) => {
93 | setLink(e);
94 | setCop(false);
95 | }
96 |
97 | const handleClick= () => {
98 | setCopied(code);
99 | setCop(true);
100 | }
101 |
102 | return (
103 |
104 |
105 | Frameworks/Platforms/Libraries:
106 |
107 |
108 |
126 |
127 | }
129 | aria-controls="panel1a-content"
130 | id="panel1a-header"
131 | >
132 | View Code
133 |
134 |
135 |
136 | {code}
137 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
`);
88 | const [Copied, setCop] = useState(false);
89 | const [isCopied, setCopied] = useCopyClipboard(badgeCode);
90 |
91 | useEffect(() => {
92 | setCode(``);
93 | }, [lanLink])
94 |
95 |
96 | const handleChange = (link) => {
97 | setLink(link);
98 | setCop(false);
99 | }
100 |
101 | const handleClick = () => {
102 | setCopied(badgeCode);
103 | setCop(true);
104 | }
105 | return (
106 |
107 |
108 | Programming Languages:
109 |
110 |
111 |
131 |
132 |
133 | }
135 | aria-controls="panel1a-content"
136 | id="panel1a-header"
137 | >
138 | View Code
139 |
140 |
141 |
142 | {badgeCode}
143 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
`);
88 | const [isCopied, setCopied] = useCopyClipboard(code);
89 | const [Copied, setCop] = useState(false);
90 |
91 |
92 | useEffect(() => {
93 | setCode(``);
94 |
95 | }, [username, color])
96 |
97 | const handleChange = (e) => {
98 | setUsername(e);
99 | setCop(false);
100 | if (e.length == 0) {
101 | setUsername("anhduy1202");
102 | }
103 | }
104 |
105 | const handleColor = (e) => {
106 | setColor(e);
107 | if (e.length == 0) {
108 | setColor("blue");
109 | }
110 | setCop(false);
111 | }
112 |
113 | const handleClick = () => {
114 | setCopied(code);
115 | setCop(true);
116 | }
117 |
118 | const classes = useStyles();
119 | return (
120 |
121 |
122 | Add Profile Views Count:
123 |
124 |
125 |
154 |
155 |
156 | }
158 | aria-controls="panel1a-content"
159 | id="panel1a-header"
160 | >
161 | View Code
162 |
163 |
164 |
165 | {code}
166 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
`);
77 | const classes = useStyles();
78 | const [isCopied, setCopied] = useCopyClipboard(userStatCode);
79 | const [Copied, setCop] = useState(false);
80 | useEffect(() => {
81 | setuserCode(``);
82 |
83 | }, [userName, theme])
84 |
85 | const handleChange = (e) => {
86 | setCop(false);
87 | setUserName(e);
88 | if (e.length == 0) {
89 | setUserName("anhduy1202");
90 | }
91 | }
92 | const handleTheme = (e) => {
93 | setTheme(e);
94 | setCop(false);
95 | }
96 |
97 | const handleClick = () => {
98 | setCopied(userStatCode);
99 | setCop(true);
100 | }
101 |
102 |
103 | return (
104 |
105 |
106 | Github Stats:
107 |
108 |
109 |
163 |
164 |
165 |
{
96 | setCode(` {
100 | setCop(false);
101 | setUsername(e);
102 | if (e.length == 0) {
103 | setUsername("anhduy1202");
104 | }
105 | }
106 |
107 | const handleRepo = (e) => {
108 | setCop(false);
109 | setRepo(e);
110 | if (e.length == 0) {
111 | setRepo("better-tic-tac-toe-client");
112 | }
113 | }
114 | const handleClick=()=>{
115 | setCopied(code);
116 | setCop(true);
117 | }
118 |
119 | return (
120 |
121 |
122 | Display Supporters:
123 |
124 |
125 |
157 |
158 |
159 | }
161 | aria-controls="panel1a-content"
162 | id="panel1a-header"
163 | >
164 | View Code
165 |
166 |
167 |
168 | {code}
169 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
;
80 | const classes = useStyles();
81 | const [isCopied, setCopied] = useCopyClipboard(repoCode);
82 | const [Copied, setCop] = useState(false);
83 | useEffect(() => {
84 | setRepoCode(`<img src=)
`);
85 |
86 | }, [userName, repo])
87 |
88 | const handleChange = (e) => {
89 | setCop(false);
90 | setUserName(e);
91 | if (e.length == 0) {
92 | setUserName("anhduy1202");
93 | }
94 | }
95 |
96 |
97 | const handleClick = () => {
98 | setCopied(repoCode);
99 | setCop(true);
100 | }
101 |
102 | const handleRepoChange=(e)=>{
103 | setRepo(e);
104 | setCop(false);
105 | if (e.length == 0) {
106 | setRepo("better-tic-tac-toe-client");
107 | }
108 | }
109 |
110 |
111 | return (
112 |
113 |
114 | Repo Stats:
115 |
116 |
117 |
173 |
174 |
175 |
`);
78 | const [isCopied, setCopied] = useCopyClipboard(code);
79 | const [Copied, setCop] = useState(false);
80 |
81 | useEffect(() => {
82 | setCode(` `)
83 | }, [socialLink, socialImage])
84 |
85 | const [social, setSocial] = useState("Linkedin");
86 | const handleSelect = (e) => {
87 | setSocial(e);
88 | setCop(false);
89 | if (e === "LinkedIn") {
90 | setImage("https://img.shields.io/badge/-LinkedIn-0e76a8?style=plastic&logo=linkedIn");
91 |
92 | }
93 | else if (e === "Instagram") {
94 | setImage("https://img.shields.io/badge/-Instagram-833AB4?style=plastic&logo=Instagram");
95 | }
96 | else if (e === "Twitter") {
97 | setImage("https://img.shields.io/badge/-Twitter-1DA1F2?style=plastic&logo=Twitter");
98 | }
99 | else if (e === "Youtube") {
100 | setImage("https://img.shields.io/badge/-%23FF0000.svg?style=for-the-badge&logo=YouTube&logoColor=white");
101 | }
102 | else if (e === "Facebook") {
103 | setImage("https://img.shields.io/badge/Facebook-%231877F2.svg?style=for-the-badge&logo=Facebook&logoColor=white");
104 | }
105 | else if (e === "Discord") {
106 | setImage("https://img.shields.io/badge/%3CServer%3E-%237289DA.svg?style=for-the-badge&logo=discord&logoColor=white");
107 | }
108 | else if (e === "Github") {
109 | setImage("https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white");
110 | }
111 | }
112 |
113 | const handleLink = (e) => {
114 | setLink(e);
115 | setCop(false);
116 | }
117 | const handleCopy = () => {
118 | setCopied(code);
119 | setCop(true);
120 | }
121 | return (
122 |
123 |
124 | Social Media:
125 |
126 |
127 |
164 |
165 | 
166 |
167 |
168 | }
170 | aria-controls="panel1a-content"
171 | id="panel1a-header"
172 | >
173 | View Code
174 |
175 |
176 |
177 | {code}
178 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
`);
79 | const [isCopied, setCopied] = useCopyClipboard(lanStatCode);
80 | const [Copied, setCop] = useState(false);
81 | useEffect(() => {
82 | setlanCode(``);
83 |
84 | }, [userName, theme,lanCount,layout])
85 |
86 | const handleChange = (e) => {
87 | setCop(false);
88 | setUserName(e);
89 | if (e.length == 0) {
90 | setUserName("anhduy1202");
91 | }
92 | }
93 | const handleTheme = (e) => {
94 | setTheme(e);
95 | setCop(false);
96 | }
97 |
98 | const handleClick = () => {
99 | setCopied(lanStatCode);
100 | setCop(true);
101 | }
102 |
103 | const handleLayout = (e) => {
104 | setLayout(e);
105 | setCop(false);
106 | }
107 | const handleLanCount= (e) => {
108 | setLanCount(e);
109 | setCop(false);
110 | }
111 |
112 | return (
113 |
114 |
115 |
116 | Language Stats:
117 |
118 |
119 |
201 |
202 |
203 |