Adjust Badges

This commit is contained in:
Saahil dutta 2024-06-29 00:01:42 -04:00
parent 665b957ea6
commit 13cdbe1fab
Signed by: neon
GPG key ID: 8A8B64515254CFC6

View file

@ -15,16 +15,16 @@ export function Card({ title, description, image,alt, Badges, svn_link, is_fork}
svn_link: string,
is_fork: Boolean
}) {
return <div style={{ background: "var(--surface0)"}}className="card md:w-80 shadow-xl">
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="card-title text-center text-highlight">{is_fork ? <LuGitFork /> : null}
<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="card-actions justify-end">
<div className="justify-end card-actions">
{/* <div className="badge badge-outline">Fashion</div>
<div className="badge badge-outline">Products</div> */}
{Badges ? Badges : ""}
@ -70,26 +70,26 @@ const [translateY, setTranslateY] = useState(0)
fetchData()
}, [])
return <>
<div className="hero min-h-screen">
<div className="hero-content flex-col lg:flex-row duration-1000 text-center" style={{ transform: `translateY(${translateY}%)`}}>
<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="grid flex grid-cols-2 md:gap-6 gap-2 text-center mt-5 duration-1000" style={{ transform: `translateY(${-translateY}%)` }}>
<div className="flex grid grid-cols-2 gap-2 mt-5 text-center duration-1000 md:gap-6" style={{ transform: `translateY(${-translateY}%)` }}>
{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="btn btn-change rounded-full mauve"><LuGitFork /></a>
<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="btn btn-change rounded-full mauve"><LuGlobe /></a>
<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="md:inline-flex">
{d.topics.filter((e:string) => !e.includes('github-include-on-site')).map((topic:string) => {
return <div className="badge badge-outline ">{topic}</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>
</>}/>