Skip to content

Commit d52a0e9

Browse files
NeonGamerBot-QKzeon-neon[bot]
NeonGamerBot-QK
and
zeon-neon[bot]
authored
Rm/fonts (#22)
<!-- hint: follow the conventional commits look at CONTRIBUTING.md make sure this repo would take a PR. --> ## delete me --------- Signed-off-by: zeon-neon[bot] <136533918+zeon-neon[bot]@users.noreply.github.com> Co-authored-by: zeon-neon[bot] <136533918+zeon-neon[bot]@users.noreply.github.com>
1 parent 48188ad commit d52a0e9

File tree

1 file changed

+157
-89
lines changed

1 file changed

+157
-89
lines changed

‎src/components/Projects/index.tsx‎

Lines changed: 157 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,169 @@
1-
import React, { useEffect, useState } from "react"
2-
import "./style.css"
3-
import { LuGitFork, LuGlobe } from "react-icons/lu"
1+
import React, { useEffect, useState } from "react";
2+
import "./style.css";
43
/**
5-
*
6-
* @param param0
7-
* @returns
4+
*
5+
* @param param0
6+
* @returns
87
*/
9-
export function Card({ title, description, image,alt, Badges, svn_link, is_fork} : {
10-
title: string ,
11-
description: string,
12-
image?: string,
13-
alt?: string,
14-
Badges?: any,
15-
svn_link: string,
16-
is_fork: Boolean
8+
export function Card({
9+
title,
10+
description,
11+
image,
12+
alt,
13+
Badges,
14+
svn_link,
15+
is_fork,
16+
}: {
17+
title: string;
18+
description: string;
19+
image?: string;
20+
alt?: string;
21+
Badges?: any;
22+
svn_link: string;
23+
is_fork: Boolean;
1724
}) {
18-
return <div style={{ background: "var(--surface0)"}}className="shadow-xl card md:w-80">
19-
{image ?
20-
<figure><img src={image} alt={alt || "No Alt"} /></figure>: null}
21-
<div className="card-body">
22-
<h2 className="text-center card-title text-highlight">{is_fork ? <LuGitFork /> : null}
23-
<a href={svn_link}>{title}</a>
24-
{/* <div className="badge badge-secondary">NEW</div> */}
25-
</h2>
26-
<p>{description}</p>
27-
<div className="justify-end card-actions">
28-
{/* <div className="badge badge-outline">Fashion</div>
25+
return (
26+
<div
27+
style={{ background: "var(--surface0)" }}
28+
className="shadow-xl card md:w-80"
29+
>
30+
{image ? (
31+
<figure>
32+
<img src={image} alt={alt || "No Alt"} />
33+
</figure>
34+
) : null}
35+
<div className="card-body">
36+
<h2 className="text-center card-title text-highlight">
37+
<a href={svn_link}>{title}</a>
38+
{/* <div className="badge badge-secondary">NEW</div> */}
39+
</h2>
40+
<p>{description}</p>
41+
<div className="justify-end card-actions">
42+
{/* <div className="badge badge-outline">Fashion</div>
2943
<div className="badge badge-outline">Products</div> */}
30-
{Badges ? Badges : ""}
44+
{Badges ? Badges : ""}
45+
</div>
3146
</div>
3247
</div>
33-
</div>
48+
);
3449
}
3550
// oh boy i cannot WAIT for myself to add projects in via git
3651
export default function Projects() {
37-
// most projects should be loaded via github
38-
// otherwise they will all be concacted with the github.json file
39-
const [githubData, setGithubData] = useState ([])
40-
const [translateY, setTranslateY] = useState(0)
52+
// most projects should be loaded via github
53+
// otherwise they will all be concacted with the github.json file
54+
const [githubData, setGithubData] = useState([]);
55+
const [translateY, setTranslateY] = useState(0);
4156

42-
const fetchData = () => {
43-
return Promise.all([fetch(`https://api.github.com/users/NeonGamerBot-QK/repos?per_page=100`)
44-
.then((response) => response.json()),fetch(`https://api.github.com/users/NeonGamerBot-QK/repos?per_page=100?page=2`)
45-
.then((response) => response.json())])
57+
const fetchData = () => {
58+
return Promise.all([
59+
fetch(
60+
`https://api.github.com/users/NeonGamerBot-QK/repos?per_page=100`,
61+
).then((response) => response.json()),
62+
fetch(
63+
`https://api.github.com/users/NeonGamerBot-QK/repos?per_page=100?page=2`,
64+
).then((response) => response.json()),
65+
]).then((data) => {
66+
if (process.env.NODE_ENV !== "production") console.log(data[0], data[1]);
67+
const idsThatAreFound: any = {};
68+
const items = [...data[0], ...data[1]]
69+
.filter((e) => e.topics.includes("github-include-on-site"))
70+
.filter(function (item, pos, self) {
71+
if (idsThatAreFound[item.id]) return false;
72+
idsThatAreFound[item.id] = true;
73+
return true;
74+
});
4675

47-
.then((data) =>
48-
{
49-
if(process.env.NODE_ENV !== "production") console.log(data[0], data[1])
50-
const idsThatAreFound:any = {}
51-
const items = [...data[0], ...data[1]]
52-
.filter(e => e.topics.includes('github-include-on-site'))
53-
.filter(function(item, pos, self) {
54-
if(idsThatAreFound[item.id]) return false;
55-
idsThatAreFound[item.id] = true
56-
return true;
57-
})
58-
59-
console.log()
60-
if(process.env.NODE_ENV !== "production") console.log(items)
61-
//@ts-ignore
62-
setGithubData(items)
63-
})
64-
}
65-
useEffect (() => {
66-
fetchData()
67-
}, [])
68-
return <>
69-
<div className="min-h-screen hero">
70-
<div className="flex-col text-center duration-1000 hero-content lg:flex-row" style={{ transform: `translateY(${translateY}%)`}}>
71-
{/* <img src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.jpg" className="max-w-sm rounded-lg shadow-2xl" /> */}
72-
<div>
73-
<h1 className="text-5xl font-bold text-highlight lg:mt-20">Projects</h1>
74-
{/* <p className="py-6">Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.</p>
76+
console.log();
77+
if (process.env.NODE_ENV !== "production") console.log(items);
78+
//@ts-ignore
79+
setGithubData(items);
80+
});
81+
};
82+
useEffect(() => {
83+
fetchData();
84+
}, []);
85+
return (
86+
<>
87+
<div className="min-h-screen hero">
88+
<div
89+
className="flex-col text-center duration-1000 hero-content lg:flex-row"
90+
style={{ transform: `translateY(${translateY}%)` }}
91+
>
92+
{/* <img src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.jpg" className="max-w-sm rounded-lg shadow-2xl" /> */}
93+
<div>
94+
<h1 className="text-5xl font-bold text-highlight lg:mt-20">
95+
Projects
96+
</h1>
97+
{/* <p className="py-6">Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.</p>
7598
<button className="btn btn-primary">Get Started</button> */}
76-
<div className="flex grid grid-cols-2 gap-2 mt-5 text-center duration-1000 md:gap-6" style={{ transform: `translateY(${-translateY}%)` }}>
77-
{githubData.length > 0 ? githubData.map((d: any) => {
78-
return <Card title={d.name} description={d.description} key={d.id} svn_link={d.html_url} is_fork={d.fork}Badges={<>
79-
<div className="inline-flex">
80-
81-
<a target="_blank" href={d.html_url + '/fork'} style={{ background: "var(--mantle)", borderRadius: "50%" }} className="rounded-full btn btn-change mauve"><LuGitFork /></a>
82-
{d.homepage ?
83-
<a target="_blank" href={d.homepage} style={{ background: "var(--mantle)", borderRadius: "50%" }} className="rounded-full btn btn-change mauve"><LuGlobe /></a>
84-
: null}
85-
</div>
86-
<div className="hidden grid-cols-3 max-w-60 lg:inline-flex" >
87-
{d.topics.filter((e:string) => !e.includes('github-include-on-site')).map((topic:string,i:number) => {
88-
return <div className="truncate badge badge-outline" key={i}><span className="truncate">{topic}</span></div>
89-
})}
90-
</div>
91-
</>}/>
92-
93-
}) : <div>
94-
<span className="loading loading-bars loading-lg mauve font-5xl"></span>
95-
</div>}
96-
</div>
97-
</div>
98-
</div>
99-
</div>
100-
</>
101-
}
99+
<div
100+
className="flex grid grid-cols-2 gap-2 mt-5 text-center duration-1000 md:gap-6"
101+
style={{ transform: `translateY(${-translateY}%)` }}
102+
>
103+
{githubData.length > 0 ? (
104+
githubData.map((d: any) => {
105+
return (
106+
<Card
107+
title={d.name}
108+
description={d.description}
109+
key={d.id}
110+
svn_link={d.html_url}
111+
is_fork={d.fork}
112+
Badges={
113+
<>
114+
<div className="inline-flex">
115+
<a
116+
target="_blank"
117+
href={d.html_url + "/fork"}
118+
style={{
119+
background: "var(--mantle)",
120+
borderRadius: "50%",
121+
}}
122+
className="rounded-full btn btn-change mauve"
123+
></a>
124+
{d.homepage ? (
125+
<a
126+
target="_blank"
127+
href={d.homepage}
128+
style={{
129+
background: "var(--mantle)",
130+
borderRadius: "50%",
131+
}}
132+
className="rounded-full btn btn-change mauve"
133+
></a>
134+
) : null}
135+
</div>
136+
<div className="hidden grid-cols-3 max-w-60 lg:inline-flex">
137+
{d.topics
138+
.filter(
139+
(e: string) =>
140+
!e.includes("github-include-on-site"),
141+
)
142+
.map((topic: string, i: number) => {
143+
return (
144+
<div
145+
className="truncate badge badge-outline"
146+
key={i}
147+
>
148+
<span className="truncate">{topic}</span>
149+
</div>
150+
);
151+
})}
152+
</div>
153+
</>
154+
}
155+
/>
156+
);
157+
})
158+
) : (
159+
<div>
160+
<span className="loading loading-bars loading-lg mauve font-5xl"></span>
161+
</div>
162+
)}
163+
</div>
164+
</div>
165+
</div>
166+
</div>
167+
</>
168+
);
169+
}

0 commit comments

Comments
 (0)