-
- {item.feedback}
-
-
-
-
-
- {item.name}
-
-
- {item.role}, {item.company}
-
-
-
+
+
{item.feedback}
+
+
+
+
{item.name}
+
+ {item.role}, {item.company}
+
+
-)
+
+);
+
+const groupArrayIntoChunks = (
+ inputArray: FeedbackItem[],
+ chunkSize: number,
+): FeedbackItem[][] => {
+ if (chunkSize <= 0) {
+ // Handle invalid chunk size (zero or negative value)
+ console.error("Invalid chunk size");
+ return [];
+ }
+
+ const groupedArray: FeedbackItem[][] = [];
+ for (let i = 0; i < inputArray.length; i += chunkSize) {
+ // Calculate the end index for the current chunk
+ const endIndex = Math.min(i + chunkSize, inputArray.length);
+ // Slice the input array to create a chunk
+ const chunk = inputArray.slice(i, endIndex);
+ // Push the chunk to the grouped array
+ groupedArray.push(chunk);
+ }
+
+ console.log(groupedArray);
+ return groupedArray;
+};
const FeedbackCarousel = ({ items }: FeedbackCarouselProps) => {
+ const [groupedFeedback, setGroupedFeedback] = useState
(
+ groupArrayIntoChunks(items, 4),
+ );
+ const size = useElementSize("feedback-carousel");
+ const availableSpace = size ? Math.floor(size.width / 365) : 1;
+ const itemsPerSlide = availableSpace > 4 ? 4 : availableSpace;
+
+ useEffect(() => {
+ setGroupedFeedback(groupArrayIntoChunks(items, 4));
+ }, [items, itemsPerSlide]);
+
const {
- carouselFragment,
- slideToPrevItem,
- slideToNextItem,
- useListenToCustomEvent
- } = useSpringCarousel({
- withLoop: true,
- itemsPerSlide: 4,
- items: items.map((item) => ({
- id: item.id,
- renderItem: ,
- })),
- });
-
- return {carouselFragment}
;
+ carouselFragment,
+ slideToPrevItem,
+ slideToNextItem,
+ useListenToCustomEvent,
+ slideToItem,
+ } = useTransitionCarousel({
+ items: groupedFeedback.map((group, index) => ({
+ id: index,
+ renderItem: group.map((item) => FeedbackCard(item)),
+ })),
+ });
+
+ return (
+
+ {groupedFeedback?.length && carouselFragment}
+ {groupedFeedback?.length}
+
+ {Array.from({ length: items.length }).map((_, index) => (
+
+