Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: updated update page with new design #46

Merged
merged 1 commit into from
Nov 9, 2024
Merged

feat: updated update page with new design #46

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
222 changes: 142 additions & 80 deletions packages/web/src/components/UpdatePage/UpdatePage.jsx
View file
Open in desktop
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>
);
}
Loading