home.arpa/src/components/ServiceCard.astro
2025-01-14 22:46:41 -05:00

24 lines
730 B
Text

---
export interface ServiceProps {
serviceName: string;
serviceUrl?: string;
}
const { serviceName, serviceUrl } = Astro.props;
const formattedName = serviceName.toLowerCase().replace(/\s+/g, "-");
const svgFile = `/icons/${formattedName}.svg`;
const defaultDomain = "home.arpa";
const href = serviceUrl ?? `https://${formattedName}.${defaultDomain}`;
---
<a href={href} target="_blank" rel="noopener noreferrer" aria-label={`Open ${serviceName}`}>
<div class="flex items-center space-x-2 p-4 bg-neutral-700 rounded-lg shadow-md hover:bg-neutral-600 transition">
<div>
<img src={svgFile} alt={`${serviceName} icon`} class="sm:w-12 w-10 aspect-square" />
</div>
<span>{serviceName}</span>
</div>
</a>