mirror of
https://github.com/NeonGamerBot-QK/saahild.com.git
synced 2025-06-24 10:44:21 +00:00
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>
This commit is contained in:
GitHub
parent
48188ad208
commit
d52a0e9cca
1 changed files with 157 additions and 89 deletions
|
|
@ -1,101 +1,169 @@
|
|||
import React, { useEffect, useState } from "react"
|
||||
import "./style.css"
|
||||
import { LuGitFork, LuGlobe } from "react-icons/lu"
|
||||
import React, { useEffect, useState } from "react";
|
||||
import "./style.css";
|
||||
/**
|
||||
*
|
||||
* @param param0
|
||||
* @returns
|
||||
*
|
||||
* @param param0
|
||||
* @returns
|
||||
*/
|
||||
export function Card({ title, description, image,alt, Badges, svn_link, is_fork} : {
|
||||
title: string ,
|
||||
description: string,
|
||||
image?: string,
|
||||
alt?: string,
|
||||
Badges?: any,
|
||||
svn_link: string,
|
||||
is_fork: Boolean
|
||||
export function Card({
|
||||
title,
|
||||
description,
|
||||
image,
|
||||
alt,
|
||||
Badges,
|
||||
svn_link,
|
||||
is_fork,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
image?: string;
|
||||
alt?: string;
|
||||
Badges?: any;
|
||||
svn_link: string;
|
||||
is_fork: Boolean;
|
||||
}) {
|
||||
return <div style={{ background: "var(--surface0)"}}className="shadow-xl card md:w-80">
|
||||
{image ?
|
||||
<figure><img src={image} alt={alt || "No Alt"} /></figure>: null}
|
||||
<div className="card-body">
|
||||
<h2 className="text-center card-title text-highlight">{is_fork ? <LuGitFork /> : null}
|
||||
<a href={svn_link}>{title}</a>
|
||||
{/* <div className="badge badge-secondary">NEW</div> */}
|
||||
</h2>
|
||||
<p>{description}</p>
|
||||
<div className="justify-end card-actions">
|
||||
{/* <div className="badge badge-outline">Fashion</div>
|
||||
return (
|
||||
<div
|
||||
style={{ background: "var(--surface0)" }}
|
||||
className="shadow-xl card md:w-80"
|
||||
>
|
||||
{image ? (
|
||||
<figure>
|
||||
<img src={image} alt={alt || "No Alt"} />
|
||||
</figure>
|
||||
) : null}
|
||||
<div className="card-body">
|
||||
<h2 className="text-center card-title text-highlight">
|
||||
<a href={svn_link}>{title}</a>
|
||||
{/* <div className="badge badge-secondary">NEW</div> */}
|
||||
</h2>
|
||||
<p>{description}</p>
|
||||
<div className="justify-end card-actions">
|
||||
{/* <div className="badge badge-outline">Fashion</div>
|
||||
<div className="badge badge-outline">Products</div> */}
|
||||
{Badges ? Badges : ""}
|
||||
{Badges ? Badges : ""}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// oh boy i cannot WAIT for myself to add projects in via git
|
||||
export default function Projects() {
|
||||
// most projects should be loaded via github
|
||||
// otherwise they will all be concacted with the github.json file
|
||||
const [githubData, setGithubData] = useState ([])
|
||||
const [translateY, setTranslateY] = useState(0)
|
||||
// most projects should be loaded via github
|
||||
// otherwise they will all be concacted with the github.json file
|
||||
const [githubData, setGithubData] = useState([]);
|
||||
const [translateY, setTranslateY] = useState(0);
|
||||
|
||||
const fetchData = () => {
|
||||
return Promise.all([fetch(`https://api.github.com/users/NeonGamerBot-QK/repos?per_page=100`)
|
||||
.then((response) => response.json()),fetch(`https://api.github.com/users/NeonGamerBot-QK/repos?per_page=100?page=2`)
|
||||
.then((response) => response.json())])
|
||||
const fetchData = () => {
|
||||
return Promise.all([
|
||||
fetch(
|
||||
`https://api.github.com/users/NeonGamerBot-QK/repos?per_page=100`,
|
||||
).then((response) => response.json()),
|
||||
fetch(
|
||||
`https://api.github.com/users/NeonGamerBot-QK/repos?per_page=100?page=2`,
|
||||
).then((response) => response.json()),
|
||||
]).then((data) => {
|
||||
if (process.env.NODE_ENV !== "production") console.log(data[0], data[1]);
|
||||
const idsThatAreFound: any = {};
|
||||
const items = [...data[0], ...data[1]]
|
||||
.filter((e) => e.topics.includes("github-include-on-site"))
|
||||
.filter(function (item, pos, self) {
|
||||
if (idsThatAreFound[item.id]) return false;
|
||||
idsThatAreFound[item.id] = true;
|
||||
return true;
|
||||
});
|
||||
|
||||
.then((data) =>
|
||||
{
|
||||
if(process.env.NODE_ENV !== "production") console.log(data[0], data[1])
|
||||
const idsThatAreFound:any = {}
|
||||
const items = [...data[0], ...data[1]]
|
||||
.filter(e => e.topics.includes('github-include-on-site'))
|
||||
.filter(function(item, pos, self) {
|
||||
if(idsThatAreFound[item.id]) return false;
|
||||
idsThatAreFound[item.id] = true
|
||||
return true;
|
||||
})
|
||||
|
||||
console.log()
|
||||
if(process.env.NODE_ENV !== "production") console.log(items)
|
||||
//@ts-ignore
|
||||
setGithubData(items)
|
||||
})
|
||||
}
|
||||
useEffect (() => {
|
||||
fetchData()
|
||||
}, [])
|
||||
return <>
|
||||
<div className="min-h-screen hero">
|
||||
<div className="flex-col text-center duration-1000 hero-content lg:flex-row" style={{ transform: `translateY(${translateY}%)`}}>
|
||||
{/* <img src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.jpg" className="max-w-sm rounded-lg shadow-2xl" /> */}
|
||||
<div>
|
||||
<h1 className="text-5xl font-bold text-highlight lg:mt-20">Projects</h1>
|
||||
{/* <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>
|
||||
console.log();
|
||||
if (process.env.NODE_ENV !== "production") console.log(items);
|
||||
//@ts-ignore
|
||||
setGithubData(items);
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<div className="min-h-screen hero">
|
||||
<div
|
||||
className="flex-col text-center duration-1000 hero-content lg:flex-row"
|
||||
style={{ transform: `translateY(${translateY}%)` }}
|
||||
>
|
||||
{/* <img src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.jpg" className="max-w-sm rounded-lg shadow-2xl" /> */}
|
||||
<div>
|
||||
<h1 className="text-5xl font-bold text-highlight lg:mt-20">
|
||||
Projects
|
||||
</h1>
|
||||
{/* <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>
|
||||
<button className="btn btn-primary">Get Started</button> */}
|
||||
<div className="flex grid grid-cols-2 gap-2 mt-5 text-center duration-1000 md:gap-6" style={{ transform: `translateY(${-translateY}%)` }}>
|
||||
{githubData.length > 0 ? githubData.map((d: any) => {
|
||||
return <Card title={d.name} description={d.description} key={d.id} svn_link={d.html_url} is_fork={d.fork}Badges={<>
|
||||
<div className="inline-flex">
|
||||
|
||||
<a target="_blank" href={d.html_url + '/fork'} style={{ background: "var(--mantle)", borderRadius: "50%" }} className="rounded-full btn btn-change mauve"><LuGitFork /></a>
|
||||
{d.homepage ?
|
||||
<a target="_blank" href={d.homepage} style={{ background: "var(--mantle)", borderRadius: "50%" }} className="rounded-full btn btn-change mauve"><LuGlobe /></a>
|
||||
: null}
|
||||
</div>
|
||||
<div className="hidden grid-cols-3 max-w-60 lg:inline-flex" >
|
||||
{d.topics.filter((e:string) => !e.includes('github-include-on-site')).map((topic:string,i:number) => {
|
||||
return <div className="truncate badge badge-outline" key={i}><span className="truncate">{topic}</span></div>
|
||||
})}
|
||||
</div>
|
||||
</>}/>
|
||||
|
||||
}) : <div>
|
||||
<span className="loading loading-bars loading-lg mauve font-5xl"></span>
|
||||
</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
<div
|
||||
className="flex grid grid-cols-2 gap-2 mt-5 text-center duration-1000 md:gap-6"
|
||||
style={{ transform: `translateY(${-translateY}%)` }}
|
||||
>
|
||||
{githubData.length > 0 ? (
|
||||
githubData.map((d: any) => {
|
||||
return (
|
||||
<Card
|
||||
title={d.name}
|
||||
description={d.description}
|
||||
key={d.id}
|
||||
svn_link={d.html_url}
|
||||
is_fork={d.fork}
|
||||
Badges={
|
||||
<>
|
||||
<div className="inline-flex">
|
||||
<a
|
||||
target="_blank"
|
||||
href={d.html_url + "/fork"}
|
||||
style={{
|
||||
background: "var(--mantle)",
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
className="rounded-full btn btn-change mauve"
|
||||
></a>
|
||||
{d.homepage ? (
|
||||
<a
|
||||
target="_blank"
|
||||
href={d.homepage}
|
||||
style={{
|
||||
background: "var(--mantle)",
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
className="rounded-full btn btn-change mauve"
|
||||
></a>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="hidden grid-cols-3 max-w-60 lg:inline-flex">
|
||||
{d.topics
|
||||
.filter(
|
||||
(e: string) =>
|
||||
!e.includes("github-include-on-site"),
|
||||
)
|
||||
.map((topic: string, i: number) => {
|
||||
return (
|
||||
<div
|
||||
className="truncate badge badge-outline"
|
||||
key={i}
|
||||
>
|
||||
<span className="truncate">{topic}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div>
|
||||
<span className="loading loading-bars loading-lg mauve font-5xl"></span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue