-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[SCSE-264] Implement Memories Section (#101)
* [SCSE-264] Implement Memories Section * [SCSE-264] Implement Memories Section * style: enhance ui * fix: unique key for footer social links * update jest test * fix linting errors * fixed home memories carousel autoscroll bug --------- Co-authored-by: Jing Qiang <[email protected]>
- Loading branch information
1 parent
3bbcee6
commit 7180e2a
Showing
17 changed files
with
471 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { memoriesData } from "./memoriesData" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { HomeMemoriesCarouselProps } from "../components/HomeMemoriesCarousel"; | ||
|
|
||
| export let memoriesData: HomeMemoriesCarouselProps["images"] = [ | ||
| { | ||
| src: | ||
| "https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80", | ||
| alt: "back to school", | ||
| }, | ||
| { | ||
| src: | ||
| "https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80", | ||
| alt: "students doing project work together", | ||
| }, | ||
| { | ||
| src: | ||
| "https://images.unsplash.com/photo-1537202108838-e7072bad1927?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=892&q=80", | ||
| alt: "library", | ||
| }, | ||
| { | ||
| src: | ||
| "https://images.unsplash.com/photo-1580537782437-8d6a0ca13de6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80", | ||
| alt: "beautiful campus", | ||
| }, | ||
| { | ||
| src: | ||
| "https://plus.unsplash.com/premium_photo-1683887034179-c498b684dd57?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1738&q=80", | ||
| alt: "scse friends", | ||
| }, | ||
| { | ||
| src: | ||
| "https://images.unsplash.com/photo-1527529482837-4698179dc6ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80", | ||
| alt: "scse networking event", | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import { Box, Flex } from "@chakra-ui/react"; | ||
| import { FramedText} from "ui"; | ||
| import { memoriesData } from "../api"; | ||
| import { HomeMemoriesCarousel } from "@/features/home/components/HomeMemoriesCarousel"; | ||
|
|
||
| export const HomeMemories = () => { | ||
| return ( | ||
| <> | ||
| <Flex // Outer box | ||
| pos={"relative"} | ||
| h={"90vh"} | ||
| backgroundColor={"brand.navy.dark"} | ||
| flexDir={"column"} | ||
| justify={"center"} | ||
| > | ||
| <Flex // Top Section | ||
| pos={"relative"} | ||
| w={"100%"} | ||
| h={"45%"} | ||
| flexDir={"column"} | ||
| justifyContent={"end"} | ||
| alignItems={"center"} | ||
| > | ||
| <Box // Banner image | ||
| pos={"absolute"} | ||
| backgroundImage={"/home/home-memories-top-banner.png"} | ||
| backgroundPosition={"top"} | ||
| backgroundRepeat={"no-repeat"} | ||
| backgroundSize={"cover"} | ||
| w={"100%"} | ||
| h={"100%"} | ||
| /> | ||
| <Box | ||
| pos={"relative"} | ||
| backgroundColor={"brand.navy.dark"} | ||
| h={"max-content"} | ||
| w={"max-content"} | ||
| paddingX={"64px"} | ||
| paddingY={"24px"} | ||
| borderRadius={"37px 37px 0px 0px"} | ||
| borderBottom={"1px dashed #FFFFFF"} | ||
| > | ||
| <FramedText text={"Memories"} /> | ||
| </Box> | ||
| </Flex> | ||
| <Flex h={["55%", "55%", "65%", "65%"]} w={"100%"} justifyContent={"center"} alignItems={"center"}> | ||
| <Box w={"85%"} height={"35vh"}> | ||
| <HomeMemoriesCarousel images={memoriesData} autoSlide /> | ||
| </Box> | ||
| </Flex> | ||
| </Flex> | ||
| </> | ||
| ); | ||
| }; |
133 changes: 133 additions & 0 deletions
133
apps/web/features/home/components/HomeMemoriesCarousel.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| import { useState, useEffect } from "react"; | ||
| import { Box, Flex, Icon, Image, useBreakpointValue } from "@chakra-ui/react"; | ||
| import { FaChevronLeft, FaChevronRight, FaCameraRetro } from "react-icons/fa"; | ||
| import { keyframes } from "@emotion/react"; | ||
|
|
||
| export interface HomeMemoriesCarouselProps { | ||
| images: Array<{ | ||
| src: string; | ||
| alt: string; | ||
| }>; | ||
| autoSlide?: boolean; | ||
| autoSlideInterval?: number; | ||
| } | ||
|
|
||
| export const HomeMemoriesCarousel = (props: HomeMemoriesCarouselProps) => { | ||
| const { | ||
| images, | ||
| autoSlide = false, | ||
| autoSlideInterval = 5000, | ||
| } = props; | ||
|
|
||
| const imageEndOffset = useBreakpointValue({ base: 1, sm: 2, md: 3 }) ?? 1; | ||
| const imageWidth = useBreakpointValue({ base: 100, sm: 50, md: 33 }) ?? 100; | ||
|
|
||
| const [curr, setCurr] = useState(0); | ||
|
|
||
| const prev = () => setCurr((curr) => (curr === 0 ? images?.length - imageEndOffset : curr - 1)); | ||
| const next = () => setCurr((curr) => (curr === images?.length - imageEndOffset ? 0 : curr + 1)); | ||
|
|
||
| // Auto Slide | ||
| useEffect(() => { | ||
| if (!autoSlide) return; | ||
| const slideInterval = setInterval(next, autoSlideInterval); | ||
| return () => clearInterval(slideInterval); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [next]); | ||
|
|
||
| return ( | ||
| <Flex | ||
| position={"relative"} | ||
| w={"100%"} | ||
| h={"100%"} | ||
| flexDir={"row"} | ||
| > | ||
| <Icon | ||
| as={FaCameraRetro} | ||
| position={"absolute"} | ||
| zIndex={10} | ||
| boxSize={"48px"} | ||
| background={"brand.navy.dark"} | ||
| transform={"rotate(-30deg) translateY(-18px) translateX(36px)"} | ||
| animation={`${cameraAnimation} 2s infinite`} | ||
| /> | ||
| {/* Left Arrow */} | ||
| <Flex | ||
| zIndex={2} | ||
| backgroundColor={"brand.navy.dark"} | ||
| alignItems={"center"} | ||
| paddingRight={"8px"} | ||
| > | ||
| <Icon | ||
| as={FaChevronLeft} | ||
| onClick={prev} | ||
| boxSize={["24px", "32px", "32px", "32px"]} | ||
| color={"white"} | ||
| cursor={"pointer"} | ||
| /> | ||
| </Flex> | ||
|
|
||
| {/* Images */} | ||
| <Flex | ||
| overflow={"hidden"}> | ||
| <Flex | ||
| zIndex={1} | ||
| transition={"ease-out"} | ||
| transitionDuration={"500ms"} | ||
| transform={`translateX(-${curr * imageWidth}%)`} | ||
| h={"100%"} | ||
| > | ||
| {images.map(image => ( | ||
| // eslint-disable-next-line @next/next/no-img-element | ||
| <Box | ||
| key={image.alt} | ||
| minWidth={`${imageWidth}%`} | ||
| maxWidth={`${imageWidth}%`} | ||
| overflow={"hidden"} | ||
| > | ||
| <Image | ||
| src={image.src} | ||
| alt={image.alt} | ||
| paddingX={"4px"} | ||
| style={{ | ||
| objectFit: 'cover', | ||
| width: '100%', | ||
| height: '100%', | ||
| }} | ||
| _hover={{ | ||
| // transform: 'scale(1.1)', | ||
| paddingX: '24px', | ||
| paddingY: '12px' | ||
| }} | ||
| transition={"ease-in-out"} | ||
| transitionDuration={"100ms"} | ||
| /> | ||
| </Box> | ||
| ))} | ||
| </Flex> | ||
| </Flex> | ||
|
|
||
| {/* Right Arrow */} | ||
| <Flex | ||
| zIndex={2} | ||
| backgroundColor={"brand.navy.dark"} | ||
| alignItems={"center"} | ||
| paddingLeft={"8px"} | ||
| > | ||
| <Icon | ||
| as={FaChevronRight} | ||
| onClick={next} | ||
| boxSize={["24px", "32px", "32px", "32px"]} | ||
| color={"white"} | ||
| cursor={"pointer"} | ||
| /> | ||
| </Flex> | ||
| </Flex> | ||
| ) | ||
| } | ||
|
|
||
| const cameraAnimation = keyframes` | ||
| 0% { color: #EF8891 } | ||
| 50% { color: #DD616B } | ||
| 100% { color: #EF8891 } | ||
| `; |
Oops, something went wrong.
7180e2aThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
website-ui-storybook – ./packages/ui
website-ui-storybook-cse-it.vercel.app
website-ui-storybook-git-main-cse-it.vercel.app
storybook.ui.dev.ntuscse.com