From bd9d31c525eab5dfa43fa70f4135a5d0fbfde466 Mon Sep 17 00:00:00 2001
From: cedoor <me@cedoor.dev>
Date: Thu, 9 Nov 2023 16:30:02 +0000
Subject: [PATCH 1/2] fix(website): show carousel after breakpoint loads

Former-commit-id: e17fbb4aec0841229b06b904e3c6e09fa8237c0e
---
 apps/website/src/app/learn/page.tsx      |  2 --
 apps/website/src/components/Carousel.tsx | 19 +++++++++++++++----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/apps/website/src/app/learn/page.tsx b/apps/website/src/app/learn/page.tsx
index e341d126..02ec4719 100644
--- a/apps/website/src/app/learn/page.tsx
+++ b/apps/website/src/app/learn/page.tsx
@@ -301,7 +301,6 @@ await verifyProof(verificationKey, fullProof)`,
                     <Carousel
                         title="Videos"
                         sizes={{
-                            base: 1,
                             md: 2,
                             lg: 4
                         }}
@@ -311,7 +310,6 @@ await verifyProof(verificationKey, fullProof)`,
                     <Carousel
                         title="Articles"
                         sizes={{
-                            base: 1,
                             md: 2,
                             lg: 4
                         }}
diff --git a/apps/website/src/components/Carousel.tsx b/apps/website/src/components/Carousel.tsx
index 079e9a72..983a1697 100644
--- a/apps/website/src/components/Carousel.tsx
+++ b/apps/website/src/components/Carousel.tsx
@@ -52,7 +52,7 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
                 </Heading>
 
                 {type !== "projects" && (
-                    <HStack justify="center">
+                    <HStack visibility={!size ? "hidden" : "visible"}>
                         <IconButton
                             onClick={previousProject}
                             variant="link"
@@ -84,6 +84,7 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
                                 key={project.name + i}
                                 href={project.links.github}
                                 isExternal
+                                visibility={!size ? "hidden" : "visible"}
                             >
                                 <Box px="3">
                                     <ProjectCard
@@ -97,7 +98,12 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
 
                     {type === "articles" &&
                         articles.map((article, i) => (
-                            <Box px="3" minW={`${100 / size!}%`} key={article.title + i}>
+                            <Box
+                                visibility={!size ? "hidden" : "visible"}
+                                px="3"
+                                minW={`${100 / size!}%`}
+                                key={article.title + i}
+                            >
                                 <ArticleCard
                                     key={i}
                                     title={article.title}
@@ -109,7 +115,12 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
 
                     {type === "videos" &&
                         videos.map((video, i) => (
-                            <Box px="3" minW={`${100 / size!}%`} key={video.title + i}>
+                            <Box
+                                visibility={!size ? "hidden" : "visible"}
+                                px="3"
+                                minW={`${100 / size!}%`}
+                                key={video.title + i}
+                            >
                                 <VideoCard key={i} title={video.title} embeddedVideoUrl={video.embeddedUrl} />
                             </Box>
                         ))}
@@ -120,7 +131,7 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
                 <HStack w="100%">
                     <Box flex="1" />
 
-                    <HStack flex="1" justify="center">
+                    <HStack flex="1" justify="center" visibility={!size ? "hidden" : "visible"}>
                         <IconButton
                             onClick={previousProject}
                             variant="link"

From a1a33faa32cd7793446353a3827e4ffbfd2b061c Mon Sep 17 00:00:00 2001
From: cedoor <me@cedoor.dev>
Date: Thu, 9 Nov 2023 16:52:46 +0000
Subject: [PATCH 2/2] fix(website): add size to use effect dependencies

Former-commit-id: ac339ea15f396313db1839637cdde74fd5dafdd3
---
 apps/website/src/components/Carousel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/website/src/components/Carousel.tsx b/apps/website/src/components/Carousel.tsx
index 983a1697..0730498b 100644
--- a/apps/website/src/components/Carousel.tsx
+++ b/apps/website/src/components/Carousel.tsx
@@ -42,7 +42,7 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
         } else {
             setIndex((prevIndex) => prevIndex - 1)
         }
-    }, [index])
+    }, [index, size])
 
     return (
         <VStack align="left" w="full" {...props} spacing="12">