import Carousel from "nuka-carousel";
const Reader({ /* Items and things passed in here */}) {
// Some buffer code here is not shown
return (
<Carousel
withoutControls={true}
renderAnnounceSlideMessage={undefined}
enableKeyboardControls={true}
swiping={true}
dragging={false}
speed={fullscreen ? 0 : 500}
slideIndex={initialIndex}
slidesToScroll="auto"
afterSlide={(endSlideIndex) => {
markRead(items[endSlideIndex]!);
}}
beforeSlide={(_, endSlideIndex) => {
if (endSlideIndex == newBufferedItems.length - 1) {
fetchNextPage();
}
debouncedReplace.current(newBufferedItems, endSlideIndex);
}}
className="min-h-full w-full"
>
{newBufferedItems?.map((item, index) => (
<ScrollArea
// It does now allow me to scroll on this like it should
key={item.id}
className="h-full overflow-x-auto overflow-y-visible"
>
<Markdown
renderer={{
image: (src, alt, title) => {
return (
<img
className="mb-2 mt-3.5 h-auto w-full rounded-[3px] border border-[#f1f1f2] dark:border-neutral-800"
alt={alt}
src={src}
key={src + alt + title}
/>
);
},
}}
value={item.website_content!}
/>
</ScrollArea>
))}
</Carousel>
);
});