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, svn_link: string,
is_fork: Boolean 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 ? {image ?
<figure><img src={image} alt={alt || "No Alt"} /></figure>: null} <figure><img src={image} alt={alt || "No Alt"} /></figure>: null}
<div className="card-body"> <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> <a href={svn_link}>{title}</a>
{/* <div className="badge badge-secondary">NEW</div> */} {/* <div className="badge badge-secondary">NEW</div> */}
</h2> </h2>
<p>{description}</p> <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">Fashion</div>
<div className="badge badge-outline">Products</div> */} <div className="badge badge-outline">Products</div> */}
{Badges ? Badges : ""} {Badges ? Badges : ""}
@ -70,26 +70,26 @@ const [translateY, setTranslateY] = useState(0)
fetchData() fetchData()
}, []) }, [])
return <> return <>
<div className="hero min-h-screen"> <div className="min-h-screen hero">
<div className="hero-content flex-col lg:flex-row duration-1000 text-center" style={{ transform: `translateY(${translateY}%)`}}> <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" /> */} {/* <img src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.jpg" className="max-w-sm rounded-lg shadow-2xl" /> */}
<div> <div>
<h1 className="text-5xl font-bold text-highlight lg:mt-20">Projects</h1> <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> {/* <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> */} <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) => { {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={<> 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"> <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 ? {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} : null}
</div> </div>
<div className="md:inline-flex"> <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) => { {d.topics.filter((e:string) => !e.includes('github-include-on-site')).map((topic:string,i:number) => {
return <div className="badge badge-outline ">{topic}</div> return <div className="truncate badge badge-outline" key={i}><span className="truncate">{topic}</span></div>
})} })}
</div> </div>
</>}/> </>}/>