Skip to content

Commit c5756fd

Browse files
dipamsendipamsen
authored
Merge pull request #39 from metakgp/harsh/card-change
2 parents 48abf20 + 0f2a91c commit c5756fd

File tree

2 files changed

+61
-42
lines changed

2 files changed

+61
-42
lines changed

‎src/components/GithubCard.tsx‎

Lines changed: 18 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,31 @@
1-
import React from "react";
21
import "../styles/components/RepoCard.css";
32
import { REPO_DATA_TYPE } from "../utils/types";
4-
import { Link } from "react-router-dom";
53

64
const RepoCard = ({ repoData }: { repoData: REPO_DATA_TYPE }) => {
75
const repo_link = `https://github.com/metakgp/${repoData.name}`;
86

9-
const Surround = repoData.homepage ? ({ children }: { children: React.ReactNode }) => (
10-
<a href={repoData.homepage} target="_blank" rel="noreferrer" className="gh-card-container">
11-
{children}
12-
</a>
13-
) : ({ children }: { children: React.ReactNode }) => (
14-
<div className="gh-card-container">
15-
{children}
16-
</div>
17-
);
18-
197
return (
20-
<Surround>
8+
<div className="gh-card-container">
219
<div className="gh-card-header">
22-
<span className="icon">
23-
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" className="octicon">
24-
<path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path>
25-
</svg>
26-
</span>
27-
<a href={repoData.homepage ? repoData.homepage : repo_link} target="_blank" rel="noreferrer">
28-
<span className="gh-repo-name">{repoData.name}</span>
29-
</a>
30-
<a href={repo_link} target="_blank" rel="noreferrer">
10+
<div className="project-title">
3111
<span className="icon">
32-
<svg width="25" height="25" viewBox="0 0 30 30" className="octicon" >
33-
<path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"></path>
12+
<svg aria-hidden="true" height="20" viewBox="0 0 16 16" version="1.1" width="20" data-view-component="true" className="octicon">
13+
<path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path>
3414
</svg>
3515
</span>
36-
</a>
16+
<span className="gh-repo-name">{repoData.name}</span>
17+
</div>
18+
<div className="header-links">
19+
{repoData.homepage && <a href={repoData.homepage} className="header-link">Web</a>}
20+
<a href={repo_link} target="_blank" rel="noreferrer" className="header-link">
21+
<span className="icon">
22+
<svg width="20" height="20" viewBox="0 0 30 30" className="octicon" >
23+
<path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"></path>
24+
</svg>
25+
</span>
26+
Repo
27+
</a>
28+
</div>
3729
</div>
3830
<div className="gh-card-body">
3931
{repoData.description}
@@ -60,7 +52,7 @@ const RepoCard = ({ repoData }: { repoData: REPO_DATA_TYPE }) => {
6052
{repoData.forks}
6153
</div>
6254
</div>
63-
</Surround>
55+
</div>
6456
)
6557
}
6658

‎src/styles/components/RepoCard.css‎

Lines changed: 43 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
flex-direction: column;
66
justify-content: center;
77
align-items: center;
8-
background-color: #2f2f2f;
8+
background-color: hsl(0, 0%, 15%);
99
/* border: 1px solid #222; */
1010
border-radius: 0.375rem;
1111
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
@@ -15,11 +15,6 @@
1515
text-align: left;
1616
}
1717

18-
.gh-card-container:hover {
19-
text-decoration: none !important;
20-
background-color: hsl(0, 0%, 20%);
21-
}
22-
2318
.gh-card-header {
2419
display: flex;
2520
flex-direction: row;
@@ -28,6 +23,31 @@
2823
width: 100%;
2924
}
3025

26+
.gh-card-header .header-links {
27+
margin-left: auto;
28+
display: flex;
29+
align-items: center;
30+
gap: 10px;
31+
}
32+
33+
.gh-card-header .header-link {
34+
display: flex;
35+
align-items: center;
36+
gap: 6px;
37+
38+
height: 100%;
39+
padding: 4px 8px;
40+
border-radius: 5px;
41+
42+
background-color: hsl(0, 0%, 20%);
43+
color: #f3f3f3 !important;
44+
}
45+
46+
.gh-card-header .header-link:hover {
47+
text-decoration: none !important;
48+
background-color: hsl(0, 0%, 25%);
49+
}
50+
3151
.gh-card-body {
3252
width: 100%;
3353
text-wrap: wrap;
@@ -38,14 +58,6 @@
3858
height: 100%;
3959
}
4060

41-
.gh-card-footer {
42-
width: 100%;
43-
display: flex;
44-
flex-direction: row;
45-
justify-content: start;
46-
align-items: center;
47-
gap: 1rem;
48-
}
4961

5062
/* Header Objects */
5163

@@ -56,17 +68,32 @@
5668
}
5769

5870
.gh-repo-name {
59-
color: #4BA7F8;
71+
color: #e53c64;
6072
font-weight: 700;
61-
margin: 0 0.5rem;
73+
}
74+
75+
.project-title {
76+
display: flex;
77+
align-items: center;
78+
gap: 10px;
79+
80+
font-size: 1.05rem;
6281
}
6382

6483
/* Body Objects */
6584

6685
/* Footer Objects */
6786

6887
.gh-card-footer {
88+
width: 100%;
89+
display: flex;
90+
flex-direction: row;
91+
justify-content: start;
92+
align-items: center;
93+
gap: 1rem;
94+
6995
color: #f3f3f3;
96+
user-select: none;
7097
}
7198

7299
.gh-card-circle {

0 commit comments

Comments
 (0)