import { createMemo, For, Show } from 'solid-js';
export function Card250T8(props) {
const thumbnails = () => props.card?.data?.thumbnails;
const showCard = () => props.card?.data?.valid;
const cardbackground = () => props.card?.data?.bg_image;
const heading = 'Top Categories'; // props.card?.data?.ctitle
return (
<div
class='-mx-5 bg-[#EEF1FA] bg-cover bg-center pb-5'
style={{ 'background-image': url(${cardbackground()}) }}
data-card-type={props.cardType}
data-card-id={props.cardId}
>
0}>
<div
class='flex justify-between pt-6 pb-4'
style={{ display: heading ? 'flex' : 'none' }}
>
Heading
<div class='grid grid-cols-2 gap-3'>
<For each={thumbnails()}>
{(thumbnail, index) => (
<div class='flex aspect-square flex-col justify-between bg-white p-3'>
<img
data-index={index()}
class='h-full w-full object-cover'
src={`${props.imageBasePath()}${thumbnail.img}`}
alt={thumbnail.lbl}
/>
<span class='pt-2 text-center text-sm'>
{thumbnail.pdname}
</span>
</div>
)}
</For>
</div>
</div>
</div>
</Show>
);
}
import { createMemo, For, Show } from 'solid-js';
export function Card250T8(props) {
const thumbnails = () => props.card?.data?.thumbnails;
const showCard = () => props.card?.data?.valid;
const cardbackground = () => props.card?.data?.bg_image;
const heading = 'Top Categories'; // props.card?.data?.ctitle
return (
<div
class='-mx-5 bg-[#EEF1FA] bg-cover bg-center pb-5'
style={{ 'background-image':
url(${cardbackground()})}}data-card-type={props.cardType}
data-card-id={props.cardId}
>
0}>
<div
class='flex justify-between pt-6 pb-4'
style={{ display: heading ? 'flex' : 'none' }}
>
Heading
);
}