81 lines
1.9 KiB
TypeScript
81 lines
1.9 KiB
TypeScript
import React, { FC, useEffect, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import {
|
|
Tab,
|
|
TabList,
|
|
TabPanel,
|
|
TabPanels,
|
|
Tabs,
|
|
Text,
|
|
} from '@chakra-ui/react';
|
|
|
|
import { mockReview } from '../../../../mocks/landing';
|
|
import { Review } from '../../../../models';
|
|
|
|
import { ReviewCard } from './ReviewCard';
|
|
|
|
const SLIDE_CHANGE_INTERVAL = 5000;
|
|
|
|
export const ReviewsSlider: FC = () => {
|
|
const { i18n } = useTranslation();
|
|
const mockReviews: Review.View[] = mockReview.getReviewsByLocale(i18n.language);
|
|
const reviewsCount = mockReviews.length;
|
|
|
|
const [activeTab, setActiveTab] = useState(0);
|
|
const [isSlideShowStopped, setIsSlideShowStopped] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
const newActiveTab = (activeTab + 1) % reviewsCount;
|
|
setActiveTab(newActiveTab);
|
|
}, SLIDE_CHANGE_INTERVAL);
|
|
|
|
if (isSlideShowStopped) {
|
|
clearInterval(timer);
|
|
}
|
|
|
|
return () => {
|
|
clearInterval(timer);
|
|
};
|
|
}, [activeTab]);
|
|
|
|
return (
|
|
<Tabs
|
|
index={activeTab}
|
|
onChange={(selectedTab) => {
|
|
setIsSlideShowStopped(true);
|
|
setActiveTab(selectedTab);
|
|
}}
|
|
display='flex'
|
|
flexDir='column'
|
|
alignItems='center'
|
|
variant='soft-rounded'
|
|
colorScheme='gray'
|
|
>
|
|
<TabList gap={2}>
|
|
{mockReviews.map(({ id }, i) => (
|
|
<Tab
|
|
key={id}
|
|
w={4}
|
|
h={4}
|
|
p={0}
|
|
bg='gray.100'
|
|
_selected={{
|
|
bg: 'secondary.100',
|
|
}}
|
|
>
|
|
<Text visibility='hidden'>{i}</Text>
|
|
</Tab>
|
|
))}
|
|
</TabList>
|
|
<TabPanels>
|
|
{mockReviews.map(({ id, ...reviewProps }) => (
|
|
<TabPanel key={id}>
|
|
<ReviewCard {...reviewProps} />
|
|
</TabPanel>
|
|
))}
|
|
</TabPanels>
|
|
</Tabs>
|
|
);
|
|
};
|