mirror of
https://github.com/jorgev259/soc_site-astro.git
synced 2025-06-29 07:57:41 +00:00
45 lines
1.2 KiB
Text
45 lines
1.2 KiB
Text
---
|
|
import { Image } from 'astro:assets'
|
|
|
|
type Props =
|
|
| { title?: string | null; href: string; image: string; loading?: false }
|
|
| { title?: string; href?: string; image?: string; loading: true }
|
|
|
|
const { props } = Astro
|
|
const { title, href, image, loading = false } = props
|
|
---
|
|
|
|
<a
|
|
href={href}
|
|
class:list={['block w-full mt-2.5 rounded-md bg-dark ', loading ? 'cursor-default' : 'hover:bg-dark-hover group']}
|
|
>
|
|
{
|
|
loading ? (
|
|
<div class='pt-2.5'>
|
|
<div class='rounded-md animate-pulse bg-gray size-40 mx-auto' />
|
|
</div>
|
|
) : (
|
|
<Image
|
|
src={`https://cdn.sittingonclouds.net${image}`}
|
|
alt={`${title} cover`}
|
|
height={500}
|
|
width={500}
|
|
quality='low'
|
|
class='rounded-md scale-95 group-hover:scale-100 transition-transform'
|
|
/>
|
|
)
|
|
}
|
|
|
|
{
|
|
loading ? (
|
|
<div class='animate-pulse p-2.5 px-4'>
|
|
<div class='space-y-3'>
|
|
<div class='h-2 rounded-md bg-gray' />
|
|
<div class='h-2 rounded-md bg-gray' />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div class='group-hover:text-hover-link group-hover:underline text-base font-bold p-1 text-center'>{title}</div>
|
|
)
|
|
}
|
|
</a>
|