48 lines
1.3 KiB
JavaScript
48 lines
1.3 KiB
JavaScript
import Link from 'next/link'
|
|
|
|
const linkClasses = (fixed) =>
|
|
fixed
|
|
? `w-16 h-16 aspect-square block`
|
|
: 'w-12 h-12 md:w-14 md:h-14 xl:w-20 xl:h-20 aspect-square block'
|
|
|
|
const PreviewTile = ({ img, slug, title, href = false, fixed = false }) => (
|
|
<div
|
|
style={{
|
|
backgroundImage: `url(${img})`,
|
|
backgroundSize: 'cover',
|
|
width: fixed ? '4rem' : 'inherit',
|
|
height: fixed ? '4rem' : 'inherit',
|
|
}}
|
|
className={
|
|
'rounded-full border-base-200 ' +
|
|
'hover:border-0 shrink-0 border-4 hover:border aspect-square ' +
|
|
(fixed
|
|
? `w-16 -ml-4 `
|
|
: `w-12 -ml-4
|
|
md:w-14 md:-ml-4 md:border-6 md:hover:border-2
|
|
xl:w-20 xl:-ml-6 xl:border-6 xl:hover:border-2
|
|
mb-2 xl:mb-4`)
|
|
}
|
|
>
|
|
{href ? (
|
|
<a href={href} title={title} className={linkClasses(fixed)} />
|
|
) : (
|
|
<Link href={slug} title={title} className={linkClasses(fixed)}></Link>
|
|
)}
|
|
</div>
|
|
)
|
|
|
|
export const Worm = ({ list, fixed = false }) => {
|
|
return (
|
|
<div
|
|
className={
|
|
'flex flex-row flex-wrap items-center justify-center m-auto' +
|
|
(fixed ? '-mr-8 pl-8 pr-8' : '-mr-8 pl-8 pr-8 md:-mr-12 md:pl-12')
|
|
}
|
|
>
|
|
{list.map((item) => (
|
|
<PreviewTile {...item} fixed={fixed} key={item} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|