Something went wrong. Try again.
My amazing website
Something went wrong. Try again.
2.1 kB · 98 lines
Astro
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899---import { Icon } from "astro-icon/components";
interface Props { href: string; name: string; description?: string; icon?: string | null; stars: number; repo?: string | null; compact?: boolean;}
const { href, name, description, icon, stars, repo, compact = false,} = Astro.props;---
<a href={href} target="_blank" rel="noopener noreferrer" class:list={[ "group flex gap-3 panel-link", compact ? "flex-row items-center p-3" : "flex-col p-4 h-full", ]}> <div class:list={["flex flex-row items-center gap-3", compact && "flex-1"]}> { icon ? ( <img src={icon} alt={name} width={compact ? 24 : 32} height={compact ? 24 : 32} class:list={[ "rounded shrink-0 object-contain", compact ? "w-6 h-6" : "w-8 h-8", ]} /> ) : ( <div class:list={[ "bg-bg rounded flex items-center justify-center shrink-0", compact ? "w-6 h-6" : "w-8 h-8", ]} > <Icon name="fa7-solid:code" class:list={["text-fg-lighter", compact ? "w-3 h-3" : "w-4 h-4"]} /> </div> ) }
<span class:list={[ "group-hover-special", !compact && "font-medium", ]} > {name} </span> </div>
{ compact && ( <span class="text-fg-lighter text-sm flex items-center gap-1"> <Icon name="fa7-solid:star" class="w-3 h-3" /> {stars} </span> ) }
{ !compact && ( <> {description && <p class="text-fg-lighter text-sm">{description}</p>} <div class="flex flex-row items-center gap-2 mt-auto text-fg-lighter text-sm"> <Icon name="fa7-solid:star" class="w-5 h-5" /> <span>{stars}</span> {repo && ( <> <span class="mx-1">·</span> <Icon name="fa7-brands:github" class="w-5 h-5" /> </> )} </div> </> ) }</a>