saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-04-19 10:51:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Grid based layout for resource cards using tailwind instead of using primereat carousel component, this fixed the bug

Browse Source
This commit is contained in:
austinkelsay 2025-03-18 13:41:20 -05:00
parent 080d616630
commit 4fb258211d
1 changed files with 23 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/content/carousels/GenericCarousel.js
View File

@ -1,34 +1,14 @@
import React, { useState, useEffect, useCallback, useMemo } from 'react';
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Carousel } from 'primereact/carousel';
import TemplateSkeleton from '@/components/content/carousels/skeletons/TemplateSkeleton';
import { VideoTemplate } from '@/components/content/carousels/templates/VideoTemplate';
import { DocumentTemplate } from '@/components/content/carousels/templates/DocumentTemplate';
import { CourseTemplate } from '@/components/content/carousels/templates/CourseTemplate';
import { CombinedTemplate } from '@/components/content/carousels/templates/CombinedTemplate';
import debounce from 'lodash/debounce';
const responsiveOptions = [
{
breakpoint: '3000px',
numVisible: 3,
},
{
breakpoint: '1462px',
numVisible: 2,
},
{
breakpoint: '575px',
numVisible: 1,
}
];
export default function GenericCarousel({items, selectedTopic, title}) {
const [carousels, setCarousels] = useState([]);
const [lessons, setLessons] = useState([]);
const memoizedItems = useMemo(() => items, [items]);
useEffect(() => {
axios.get('/api/lessons').then(res => {
if (res.data) {
@ -41,60 +21,30 @@ export default function GenericCarousel({items, selectedTopic, title}) {
});
}, []);
const getItemsPerCarousel = useCallback(() => {
const width = window.innerWidth;
if (width <= 575) return 1;
if (width <= 1462) return 2;
return 3;
}, []);
const updateCarousels = useCallback(() => {
const itemsPerCarousel = getItemsPerCarousel();
const newCarousels = [];
for (let i = 0; i < memoizedItems.length; i += itemsPerCarousel) {
newCarousels.push(memoizedItems.slice(i, i + itemsPerCarousel));
const renderItem = (item) => {
if (!item) return <TemplateSkeleton key={Math.random()} />;
if (item.topics?.includes('video') && item.topics?.includes('document')) {
return <CombinedTemplate key={item.id} resource={item} isLesson={lessons.includes(item?.d)} />;
} else if (item.type === 'document') {
return <DocumentTemplate key={item.id} document={item} isLesson={lessons.includes(item?.d)} />;
} else if (item.type === 'video') {
return <VideoTemplate key={item.id} video={item} isLesson={lessons.includes(item?.d)} />;
} else if (item.type === 'course') {
return <CourseTemplate key={item.id} course={item} />;
}
setCarousels(newCarousels);
}, [memoizedItems, getItemsPerCarousel]);
useEffect(() => {
updateCarousels();
const debouncedHandleResize = debounce(updateCarousels, 250);
window.addEventListener('resize', debouncedHandleResize);
return () => {
window.removeEventListener('resize', debouncedHandleResize);
};
}, [updateCarousels, memoizedItems]);
return <TemplateSkeleton key={Math.random()} />;
};
return (
<>
{carousels.map((carouselItems, index) => (
<Carousel
key={index}
value={carouselItems}
itemTemplate={(item) => {
if (carouselItems.length > 0) {
if (item.topics?.includes('video') && item.topics?.includes('document')) {
return <CombinedTemplate key={item.id} resource={item} isLesson={lessons.includes(item?.d)} />;
} else if (item.type === 'document') {
return <DocumentTemplate key={item.id} document={item} isLesson={lessons.includes(item?.d)} />;
} else if (item.type === 'video') {
return <VideoTemplate key={item.id} video={item} isLesson={lessons.includes(item?.d)} />;
} else if (item.type === 'course') {
return <CourseTemplate key={item.id} course={item} />;
}
}
return <TemplateSkeleton key={Math.random()} />;
}}
responsiveOptions={responsiveOptions}
className="mb-4"
pt={{
previousButton: { className: 'hidden' },
nextButton: { className: 'hidden' }
}}
/>
))}
</>
<div className="w-full px-4 mb-4">
<div className="grid grid-cols-2 gap-4 max-w-full max-tab:grid-cols-1 lg:grid-cols-3">
{items.map((item, index) => (
<div key={item?.id || index} className="w-full min-w-0">
{renderItem(item)}
</div>
))}
</div>
</div>
);
}