-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #46 from icssc/feat/update-page
feat: updated update page with new design
- Loading branch information
Showing
1 changed file
with
142 additions
and
80 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,108 +1,170 @@ | ||
| import { React, useState } from "react"; | ||
| import React, { useState, useEffect } from "react"; | ||
| import { | ||
| Box, | ||
| Flex, | ||
| Text, | ||
| Button, | ||
| Stack, | ||
| VStack, | ||
| HStack, | ||
| List, | ||
| ListItem, | ||
| ListIcon, | ||
| Icon, | ||
| Image, | ||
| useColorModeValue, | ||
| Container, | ||
| Heading, | ||
| Badge, | ||
| Divider, | ||
| useDisclosure, | ||
| Modal, | ||
| ModalOverlay, | ||
| ModalContent, | ||
| ModalBody, | ||
| ModalCloseButton, | ||
| } from "@chakra-ui/react"; | ||
| import { useNavigate } from "react-router-dom"; | ||
| import { ChevronRightIcon, ArrowBackIcon } from "@chakra-ui/icons"; | ||
| import { ArrowBackIcon, ExternalLinkIcon } from "@chakra-ui/icons"; | ||
| import { SiInstagram } from "react-icons/si"; | ||
| import { motion } from "framer-motion"; | ||
| import updatepage from "../../assets/images/updatepage.png"; | ||
|
|
||
| const MotionBox = motion(Box); | ||
|
|
||
| export default function UpdatePage() { | ||
| const navigate = useNavigate(); | ||
| const [screenWidth, setScreenWidth] = useState(window.screen.width); | ||
| const { isOpen, onOpen, onClose } = useDisclosure(); | ||
| const [selectedImage, setSelectedImage] = useState(""); | ||
| const [updates, setUpdates] = useState([ | ||
| { | ||
| date: "9/25/2023", | ||
| title: "Website Launch", | ||
| description: "ZotnFound is now live! Explore our new features and start finding lost items.", | ||
| items: [ | ||
| { type: "image", content: updatepage }, | ||
| { type: "text", content: "WEBSITE IS LIVE!" }, | ||
| { type: "text", content: "New user-friendly interface" }, | ||
| { type: "text", content: "Enhanced search capabilities" }, | ||
| ], | ||
| tag: "Major Update", | ||
| }, | ||
| // Add more updates here | ||
| ]); | ||
|
|
||
| const bgColor = useColorModeValue("gray.50", "gray.900"); | ||
| const cardBgColor = useColorModeValue("white", "gray.800"); | ||
| const borderColor = useColorModeValue("gray.200", "gray.600"); | ||
| const tagColor = useColorModeValue("green.500", "green.200"); | ||
|
|
||
| const handleClick = () => { | ||
| navigate("/"); | ||
| }; | ||
|
|
||
| window.onresize = () => { | ||
| setScreenWidth(window.screen.width); | ||
| const openImageModal = (imageSrc) => { | ||
| setSelectedImage(imageSrc); | ||
| onOpen(); | ||
| }; | ||
|
|
||
| return ( | ||
| <Stack alignItems="center" h="100vh"> | ||
| <Stack | ||
| marginBottom="2%" | ||
| direction={{ base: "column", md: "column", lg: "row" }} | ||
| alignItems={"center"} | ||
| justifyContent={"space-between"} | ||
| w="100vw" | ||
| > | ||
| <Flex display={screenWidth < 992 ? "none" : "block"} marginLeft={10}> | ||
| <Button onClick={handleClick} visibility={"hidden"}> | ||
| <Icon as={ArrowBackIcon} marginRight={"2%"} /> | ||
| Return Home{" "} | ||
| </Button> | ||
| </Flex> | ||
| <Flex textAlign={"center"}> | ||
| <Text fontSize={{ base: "2rem", md: "3rem" }} as="b"> | ||
| ZotnFound Updates | ||
| </Text> | ||
| </Flex> | ||
| <Flex> | ||
| <Button onClick={handleClick} marginRight={{ lg: 10 }}> | ||
| <Icon as={ArrowBackIcon} marginRight={"2%"} /> | ||
| Return Home{" "} | ||
| </Button> | ||
| </Flex> | ||
| </Stack> | ||
| <Flex direction="column"> | ||
| <Flex | ||
| direction={"column"} | ||
| minH={"80vh"} | ||
| w={{ base: "90vw", md: "50vw" }} | ||
| borderLeft={"1px"} | ||
| borderColor={"gray"} | ||
| > | ||
| <Flex | ||
| position={{ lg: "absolute" }} | ||
| right={{ lg: "20vw" }} | ||
| top={{ lg: "30vh" }} | ||
| transform={{ lg: "rotate(90deg)" }} | ||
| justifyContent={"center"} | ||
| alignItems={"center"} | ||
| > | ||
| <Text as="b" fontSize={".75rem"} marginRight={10}> | ||
| FOLLOW: | ||
| </Text> | ||
| <a href="https://www.instagram.com/zotnfound/"> | ||
| <SiInstagram size={"1.5rem"} cursor="pointer" /> | ||
| </a> | ||
| <Box minH="100vh" bg={bgColor}> | ||
| <Container maxW="container.xl" py={8}> | ||
| <Flex direction="column" align="center"> | ||
| <Flex w="full" justifyContent="space-between" mb={8} align="center"> | ||
| <Button | ||
| leftIcon={<ArrowBackIcon />} | ||
| onClick={handleClick} | ||
| size="lg" | ||
| variant="outline" | ||
| > | ||
| Return Home | ||
| </Button> | ||
| <Heading | ||
| fontSize={{ base: "3xl", md: "4xl" }} | ||
| fontWeight="extrabold" | ||
| bgGradient="linear(to-r, blue.400, purple.500)" | ||
| bgClip="text" | ||
| > | ||
| ZotnFound Updates | ||
| </Heading> | ||
| <Button | ||
| as="a" | ||
| href="https://www.instagram.com/zotnfound/" | ||
| target="_blank" | ||
| leftIcon={<Icon as={SiInstagram} />} | ||
| colorScheme="pink" | ||
| size="lg" | ||
| > | ||
| Follow Us | ||
| </Button> | ||
| </Flex> | ||
|
|
||
| {/* update messages */} | ||
| <Flex | ||
| direction={"column"} | ||
| alignItems={"flex-start"} | ||
| marginLeft="15%" | ||
| marginRight="15%" | ||
| marginBottom={"2.5"} | ||
| marginTop={"2.5"} | ||
| gap="15px" | ||
| > | ||
| <Text as="b">9/25/2023</Text> | ||
| <List> | ||
| <ListItem textAlign="left" marginBottom={"2%"}> | ||
| <ListIcon as={ChevronRightIcon} color="gray" /> | ||
| <Image w={"100vw"} src={updatepage} /> | ||
| </ListItem> | ||
| <ListItem textAlign="left"> | ||
| <ListIcon as={ChevronRightIcon} color="gray" /> | ||
| WEBSITE IS LIVE! | ||
| </ListItem> | ||
| </List> | ||
| </Flex> | ||
| {/* ^^^^^ update messages ^^^^^^*/} | ||
| <VStack spacing={12} align="stretch" w="full"> | ||
| {updates.map((update, index) => ( | ||
| <MotionBox | ||
| key={index} | ||
| initial={{ opacity: 0, y: 50 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| transition={{ duration: 0.5, delay: index * 0.1 }} | ||
| > | ||
| <Box | ||
| borderWidth={1} | ||
| borderRadius="xl" | ||
| p={8} | ||
| borderColor={borderColor} | ||
| boxShadow="xl" | ||
| bg={cardBgColor} | ||
| > | ||
| <Flex justifyContent="space-between" alignItems="center" mb={4}> | ||
| <Badge colorScheme="green" fontSize="md" px={3} py={1} borderRadius="full"> | ||
| {update.tag} | ||
| </Badge> | ||
| <Text fontSize="lg" fontWeight="medium" color="gray.500"> | ||
| {update.date} | ||
| </Text> | ||
| </Flex> | ||
| <Heading as="h3" size="xl" mb={4}> | ||
| {update.title} | ||
| </Heading> | ||
| <Text fontSize="lg" mb={6}> | ||
| {update.description} | ||
| </Text> | ||
| <Divider mb={6} /> | ||
| <List spacing={4}> | ||
| {update.items.map((item, itemIndex) => ( | ||
| <ListItem key={itemIndex}> | ||
| <HStack align="flex-start" spacing={4}> | ||
| {item.type === "image" ? ( | ||
| <Image | ||
| src={item.content} | ||
| maxW="200px" | ||
| borderRadius="md" | ||
| cursor="pointer" | ||
| onClick={() => openImageModal(item.content)} | ||
| transition="transform 0.3s" | ||
| _hover={{ transform: "scale(1.05)" }} | ||
| /> | ||
| ) : ( | ||
| <Text fontSize="lg">• {item.content}</Text> | ||
| )} | ||
| </HStack> | ||
| </ListItem> | ||
| ))} | ||
| </List> | ||
| </Box> | ||
| </MotionBox> | ||
| ))} | ||
| </VStack> | ||
| </Flex> | ||
| </Flex> | ||
| </Stack> | ||
| </Container> | ||
|
|
||
| <Modal isOpen={isOpen} onClose={onClose} size="xl"> | ||
| <ModalOverlay /> | ||
| <ModalContent> | ||
| <ModalCloseButton /> | ||
| <ModalBody p={0}> | ||
| <Image src={selectedImage} w="100%" /> | ||
| </ModalBody> | ||
| </ModalContent> | ||
| </Modal> | ||
| </Box> | ||
| ); | ||
| } |