Skip to content

Commit 9889516

Browse files
gndz07gndz07
committed
refactor: repo header
1 parent 1157a23 commit 9889516

File tree

6 files changed

+79
-48
lines changed

6 files changed

+79
-48
lines changed

‎components/RepoHeader.jsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import styles from '../styles/RepoHeader.module.css'
2+
3+
export default function RepoHeader({ data }) {
4+
return (
5+
<div>
6+
<div className={styles.name_container}>
7+
<img className={styles.avatar} src={data?.owner?.avatar_url}/>
8+
<h2 className={styles.repo_name}>{data?.full_name}</h2>
9+
</div>
10+
<p className={styles.description}>{data?.description}</p>
11+
</div>
12+
)
13+
}

‎pages/[name].js‎

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import styles from '../styles/RepoPage.module.css'
44
import { useEffect, useState, useMemo } from 'react'
55
import Link from 'next/link'
66
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
7+
import RepoHeader from '../components/RepoHeader'
78

89
export async function getStaticPaths() {
910
return {
@@ -77,7 +78,7 @@ export default function RepoStatPage ({ repoData, issues}) {
7778
<div className={containerStyles.container}>
7879
<Head>
7980
<title>{displayedData?.full_name}</title>
80-
<meta name="Github Indicators Explorer" content="Generated by create next app" />
81+
<meta name="Github Indicators Explorer" content={`${displayedData?.full_name} indicator`} />
8182
<link rel="icon" href="/favicon.ico" />
8283
</Head>
8384

@@ -86,31 +87,29 @@ export default function RepoStatPage ({ repoData, issues}) {
8687
<p className={styles.choose_repo}>Choose another repository</p>
8788
</Link>
8889

89-
<div>
90-
<div className={styles.name_container}>
91-
<img className={styles.avatar} src={displayedData?.owner?.avatar_url}/>
92-
<h2 className={styles.repo_name}>{displayedData?.full_name}</h2>
93-
</div>
94-
<p className={styles.description}>{displayedData?.description}</p>
90+
<RepoHeader data={displayedData} />
91+
92+
<div className={styles.option_container}>
93+
<p className={styles.data_option} style={{ backgroundColor: "#C2DEFB" }}>Open issues</p>
94+
<p className={styles.data_option} style={{ backgroundColor: "#FFCCB6" }}>Collaborators</p>
9595
</div>
9696

9797
<div className={styles.graph_container}>
9898
<ResponsiveContainer width='100%' height='100%'>
99-
<LineChart
100-
data={issuesData}
101-
margin={{
102-
top: 20,
103-
right: 30,
104-
left: -10,
105-
bottom: 5,
106-
}}
107-
>
108-
<CartesianGrid strokeDasharray="3 3" />
109-
<XAxis dataKey="date" tick={false} tickLine={false} />
110-
<YAxis tick={false} tickLine={false} />
111-
<Tooltip />
112-
<Line type="monotone" dataKey="issues" stroke="#C2DEFB" dot={false} />
113-
</LineChart>
99+
<LineChart
100+
data={issuesData}
101+
margin={{
102+
top: 20,
103+
right: 30,
104+
left: -10,
105+
bottom: 5,
106+
}}
107+
>
108+
<XAxis dataKey="date" tick={false} tickLine={false} />
109+
<YAxis tick={false} tickLine={false} />
110+
<Tooltip />
111+
<Line type="monotone" dataKey="issues" stroke="#C2DEFB" dot={false} />
112+
</LineChart>
114113
</ResponsiveContainer>
115114
</div>
116115
</main>

‎pages/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default function Home({ repos }) {
3535
<div className={containerStyles.container}>
3636
<Head>
3737
<title>Github Indicators Explorer</title>
38-
<meta name="Github Indicators Explorer" content="Generated by create next app" />
38+
<meta name="Github Indicators Explorer" content="Github repository indicator" />
3939
<link rel="icon" href="/favicon.ico" />
4040
</Head>
4141

‎styles/RepoCard.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
color: inherit;
99
text-decoration: none;
1010
border: 1px solid #eaeaea;
11-
border-radius: 10px;
11+
border-radius: 14px;
1212
transition: color 0.15s ease, border-color 0.15s ease;
1313
width: 100%;
1414
background-color: white;

‎styles/RepoHeader.module.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.name_container {
2+
display: flex;
3+
flex-direction: row;
4+
align-items: center;
5+
}
6+
7+
.repo_name {
8+
font-size: 50px;
9+
color: #4A4A4A;
10+
font-weight: 700;
11+
margin-left: 20px;
12+
}
13+
14+
.avatar {
15+
height: 80px;
16+
object-fit: cover;
17+
border: 1px solid #eaeaea;
18+
border-radius: 14px;
19+
background-color: white;
20+
}
21+
22+
.description {
23+
color: #8C8C8C;
24+
font-size: 20px;
25+
margin: 0 0 20px 0;
26+
}

‎styles/RepoPage.module.css‎

Lines changed: 17 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,30 @@
66
flex-direction: column;
77
}
88

9-
.name_container {
10-
display: flex;
11-
flex-direction: row;
12-
align-items: center;
13-
}
14-
15-
.repo_name {
16-
font-size: 50px;
17-
color: #4A4A4A;
18-
font-weight: 700;
19-
margin-left: 20px;
20-
}
21-
22-
.avatar {
23-
height: 80px;
24-
object-fit: cover;
25-
border: 1px solid #eaeaea;
26-
border-radius: 10px;
27-
background-color: white;
28-
}
29-
309
.choose_repo {
3110
color: #6786D3;
3211
font-size: 16px;
3312
font-weight: 700;
3413
cursor: pointer;
3514
}
3615

37-
.description {
38-
color: #8C8C8C;
39-
font-size: 20px;
16+
.option_container {
17+
display: flex;
18+
flex-direction: row;
19+
margin-bottom: 10px;
20+
}
21+
22+
.data_option {
23+
width: 130px;
24+
text-align: center;
25+
font-size: 14px;
26+
font-weight: 700;
27+
color: #604B69;
28+
border: 1px solid #eaeaea;
29+
border-radius: 14px;
30+
padding: 5px 14px;
31+
margin-right: 7px;
32+
cursor: pointer;
4033
}
4134

4235
.graph_container {

0 commit comments

Comments
 (0)