diff --git a/apps/website/src/components/Carousel.tsx b/apps/website/src/components/Carousel.tsx index 2353138c2..079e9a72b 100644 --- a/apps/website/src/components/Carousel.tsx +++ b/apps/website/src/components/Carousel.tsx @@ -8,6 +8,7 @@ import projects from "../data/projects.json" import videos from "../data/videos.json" import IconArrowLeft from "../icons/IconArrowLeft" import IconArrowRight from "../icons/IconArrowRight" +import { getDataLength } from "../utils/getDataLength" import ArticleCard from "./ArticleCard" import ProjectCard from "./ProjectCard" import VideoCard from "./VideoCard" @@ -28,7 +29,7 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps const size = useBreakpointValue(sizes) const nextProject = useCallback(() => { - if (index + 1 === Math.ceil(projects.length / size!)) { + if (index + 1 === Math.ceil(getDataLength(type) / size!)) { setIndex(0) } else { setIndex((prevIndex) => prevIndex + 1) @@ -37,7 +38,7 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps const previousProject = useCallback(() => { if (index === 0) { - setIndex(Math.ceil(projects.length / size!) - 1) + setIndex(Math.ceil(getDataLength(type) / size!) - 1) } else { setIndex((prevIndex) => prevIndex - 1) } diff --git a/apps/website/src/utils/getDataLength.ts b/apps/website/src/utils/getDataLength.ts new file mode 100644 index 000000000..daf17cefb --- /dev/null +++ b/apps/website/src/utils/getDataLength.ts @@ -0,0 +1,16 @@ +import projects from "../data/projects.json" +import videos from "../data/videos.json" +import articles from "../data/articles.json" + +export function getDataLength(type: "projects" | "videos" | "articles"): number { + switch (type) { + case "projects": + return projects.length + case "videos": + return videos.length + case "articles": + return articles.length + default: + return 0 + } +}