I’m working on a frontend project and having trouble with displaying data from Basehub CMS in a carousel. Here’s what I’ve tried:
const ProjectSlider = async () => {
return (
<DataFetcher
query={[
{
projectList: {
entries: {
title: true,
summary: {
text: true
},
thumbnail: { src: true, width: true, height: true, description: true }
}
}
}
]}
>
{async ([result]) => {
'use server';
if (!result.projectList.entries.length) {
return <div>No projects available</div>;
}
const projectEntries = result.projectList.entries;
return (
<div className='full-height-container min-h-[400px]'>
<NavMenu />
<CarouselWrapper className='flex-grow relative'>
<div className='flex-container h-full'>
{projectEntries.map((project, idx) => (
<SlideItem key={idx} className='h-full flex-1'>
<ImageContainer className='flex-1 bg-gray-100 p-4 flex-center'>
<img
src={project.thumbnail?.src}
alt={project.thumbnail?.description}
className='max-w-full max-h-full'
/>
</ImageContainer>
<InfoPanel className='p-6 w-[500px] flex-col-start gap-4'>
<h2 className='text-2xl font-bold'>{project.title}</h2>
<p>{project.summary?.text}</p>
</InfoPanel>
</SlideItem>
))}
</div>
</CarouselWrapper>
</div>
);
}}
</DataFetcher>
);
};
I think the issue might be that I’m mixing server and client components in the same file. I tried separating the slide items into their own component, but then only the first item shows up. I’m using a carousel library, but it doesn’t seem to work well with Basehub. Any ideas on how to fix this?