saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-06 18:31:00 +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 axios from 'axios';
import { Carousel } from 'primereact/carousel';
import TemplateSkeleton from '@/components/content/carousels/skeletons/TemplateSkeleton'; import TemplateSkeleton from '@/components/content/carousels/skeletons/TemplateSkeleton';
import { VideoTemplate } from '@/components/content/carousels/templates/VideoTemplate'; import { VideoTemplate } from '@/components/content/carousels/templates/VideoTemplate';
import { DocumentTemplate } from '@/components/content/carousels/templates/DocumentTemplate'; import { DocumentTemplate } from '@/components/content/carousels/templates/DocumentTemplate';
import { CourseTemplate } from '@/components/content/carousels/templates/CourseTemplate'; import { CourseTemplate } from '@/components/content/carousels/templates/CourseTemplate';
import { CombinedTemplate } from '@/components/content/carousels/templates/CombinedTemplate'; 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}) { export default function GenericCarousel({items, selectedTopic, title}) {
const [carousels, setCarousels] = useState([]);
const [lessons, setLessons] = useState([]); const [lessons, setLessons] = useState([]);
const memoizedItems = useMemo(() => items, [items]);
useEffect(() => { useEffect(() => {
axios.get('/api/lessons').then(res => { axios.get('/api/lessons').then(res => {
if (res.data) { if (res.data) {
@ -41,60 +21,30 @@ export default function GenericCarousel({items, selectedTopic, title}) {
}); });
}, []); }, []);
const getItemsPerCarousel = useCallback(() => { const renderItem = (item) => {
const width = window.innerWidth; if (!item) return <TemplateSkeleton key={Math.random()} />;
if (width <= 575) return 1;
if (width <= 1462) return 2; if (item.topics?.includes('video') && item.topics?.includes('document')) {
return 3; 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)} />;
const updateCarousels = useCallback(() => { } else if (item.type === 'video') {
const itemsPerCarousel = getItemsPerCarousel(); return <VideoTemplate key={item.id} video={item} isLesson={lessons.includes(item?.d)} />;
const newCarousels = []; } else if (item.type === 'course') {
for (let i = 0; i < memoizedItems.length; i += itemsPerCarousel) { return <CourseTemplate key={item.id} course={item} />;
newCarousels.push(memoizedItems.slice(i, i + itemsPerCarousel));
} }
setCarousels(newCarousels); return <TemplateSkeleton key={Math.random()} />;
}, [memoizedItems, getItemsPerCarousel]); };
useEffect(() => {
updateCarousels();
const debouncedHandleResize = debounce(updateCarousels, 250);
window.addEventListener('resize', debouncedHandleResize);
return () => {
window.removeEventListener('resize', debouncedHandleResize);
};
}, [updateCarousels, memoizedItems]);
return ( return (
<> <div className="w-full px-4 mb-4">
{carousels.map((carouselItems, index) => ( <div className="grid grid-cols-2 gap-4 max-w-full max-tab:grid-cols-1 lg:grid-cols-3">
<Carousel {items.map((item, index) => (
key={index} <div key={item?.id || index} className="w-full min-w-0">
value={carouselItems} {renderItem(item)}
itemTemplate={(item) => { </div>
if (carouselItems.length > 0) { ))}
if (item.topics?.includes('video') && item.topics?.includes('document')) { </div>
return <CombinedTemplate key={item.id} resource={item} isLesson={lessons.includes(item?.d)} />; </div>
} 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' }
}}
/>
))}
</>
); );
} }