github/semaphore
1
1
Fork 0
mirror of https://github.com/semaphore-protocol/semaphore.git synced 2026-04-28 03:00:41 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #445 from semaphore-protocol/fix/carousel

Browse Source 
Load Carousel items only after the breakpoint is defined

Former-commit-id: 173d051962
This commit is contained in:
Cedoor
2023-11-09 16:55:20 +00:00
committed by GitHub
parent 942259c295 a1a33faa32
commit 8b9a34a2f0
2 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/website/src/app/learn/page.tsx
View File

@@ -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
}}

21
apps/website/src/components/Carousel.tsx
View File

@@ -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">
@@ -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"