use optimized image for card display

This commit is contained in:
2025-04-11 18:39:56 +02:00
parent 1ffb72729e
commit 62f0f0d0f0

View File

@@ -1,5 +1,6 @@
'use client' 'use client'
import { OptimizedImage } from '@/components/optimized-image'
import type { ElementType } from 'react' import type { ElementType } from 'react'
import slugify from 'slugify' import slugify from 'slugify'
@@ -16,7 +17,11 @@ export function JokerCard({ name, img, h = 3 }: JokerCardProps) {
className={'flex scroll-mt-36 flex-col items-center gap-2'} className={'flex scroll-mt-36 flex-col items-center gap-2'}
id={`${slugify(name, { lower: true, strict: true })}-toc`} id={`${slugify(name, { lower: true, strict: true })}-toc`}
> >
<img src={img} alt={name} className={'!m-0 max-w-24 rounded-md'} /> <OptimizedImage
src={img}
alt={name}
className={'!m-0 max-w-24 rounded-md'}
/>
<div className={'flex flex-col gap-1'}> <div className={'flex flex-col gap-1'}>
<Heading className={'!m-0 text-nowrap font-medium text-sm'}> <Heading className={'!m-0 text-nowrap font-medium text-sm'}>
{name} {name}