34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import { useTranslations } from '@/i18n/utils'
|
|
import type { CollectionEntry } from 'astro:content'
|
|
import rightArrowIconSrc from '@/assets/icons/RightArrowIcon.svg'
|
|
|
|
export type CoachCardProps = CollectionEntry<'coaches'> & { lang?: string }
|
|
|
|
export const CoachCard: React.FC<CoachCardProps> = ({ data, lang, slug }) => {
|
|
const { name, description, cover, coverAlt } = data
|
|
const t = useTranslations(lang)
|
|
const coachPageLink = `/coaches/${slug}`
|
|
|
|
return (
|
|
<div className="aspect-3/4 relative h-full max-w-[262px] overflow-hidden rounded-3xl text-white md:max-w-[320px] lg:max-w-[400px]">
|
|
<img
|
|
{...cover}
|
|
loading="lazy"
|
|
decoding="async"
|
|
className="h-full w-full object-cover object-top mix-blend-luminosity"
|
|
alt={coverAlt}
|
|
/>
|
|
<a
|
|
href={coachPageLink}
|
|
data-astro-prefetch
|
|
className="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/80 via-transparent p-2 lg:p-3"
|
|
>
|
|
<div className="flex items-center justify-between gap-4">
|
|
<h3 className="text-xl font-bold uppercase text-text-light">{name}</h3>
|
|
<img {...rightArrowIconSrc} width={50} height={50} />
|
|
</div>
|
|
</a>
|
|
</div>
|
|
)
|
|
}
|