From 7885d16acbb04cba8c7946d8435cd91da5a2b319 Mon Sep 17 00:00:00 2001
From: Zhi <neozhixuan@gmail.com>
Date: Tue, 7 Nov 2023 03:16:45 +0800
Subject: [PATCH] Feature - Base UI

---
 client/components/map/FacilityCard.tsx  | 158 +++++++++++++++++++-----
 client/spa-pages/components/MapPage.tsx |  22 +---
 2 files changed, 136 insertions(+), 44 deletions(-)

diff --git a/client/components/map/FacilityCard.tsx b/client/components/map/FacilityCard.tsx
index a084de9..f0020e6 100644
--- a/client/components/map/FacilityCard.tsx
+++ b/client/components/map/FacilityCard.tsx
@@ -1,49 +1,151 @@
-import { Flex, Text, HStack, Button } from "@chakra-ui/react";
+import { Flex, Text, HStack, Button, Box, VStack, Divider } from "@chakra-ui/react";
 import { TStateFacilities } from "app-context/SheetyContext/types";
 import { Image } from "@chakra-ui/react";
+import { ChevronDownIcon, ChevronUpIcon, ExternalLinkIcon } from "@chakra-ui/icons";
 import { COLORS } from "theme";
+import React, { ReactNode, useState } from "react";
+import styles from "components/home/hideScrollbar.module.css";
+import Link from "next/link";
+
 export const FacilityCard = ({
 	facCardDetails,
 	facCardDistance,
-	width,
-	left,
 }: {
 	facCardDetails: TStateFacilities;
 	facCardDistance: number;
-	width: string;
-	left: string;
 }) => {
+	const TRANSLATION_DIST = -50;
+	const [translateY, setTranslateY] = useState(0);
+	const handleMovement = () => {
+		translateY === TRANSLATION_DIST ? setTranslateY(0) : setTranslateY(TRANSLATION_DIST);
+	};
+	const widths = ["86%", "50%", "40%", "25%"];
+	const lefts = ["7%", "25%", "30%", "37.5%"];
 	return (
 		<Flex
+			paddingBottom={2}
 			position={"fixed"}
-			height="150px"
-			width={width}
-			left={left}
+			height={"55%"}
+			width={widths}
+			left={lefts}
 			bg="white"
-			zIndex={99999}
-			bottom={"80px"}
+			zIndex={1000}
+			bottom={["-27%", "-27%", "-27%", "-27%", "-25%"]}
 			rounded="xl"
-			flexDir={"row"}
+			flexDir={"column"}
+			transform={`translateY(${translateY}%)`}
+			transition={"transform 0.3s ease-in-out"}
 		>
-			<Image height={"100%"} width="300px" src={"/placeholder.png"} alt="Image not found." />
-			<Flex flexDir={"column"} gap={2} padding={3}>
-				<Text fontSize={"xs"} as={"b"} noOfLines={[2]}>
-					{facCardDetails.channelName}
-				</Text>
-				<Text fontSize={"xs"} noOfLines={2}>
-					<span style={{ fontWeight: 800 }}>Address:</span> {facCardDetails.address}
-				</Text>
-				<Text fontSize={"xs"} noOfLines={2}>
-					<span style={{ fontWeight: 800 }}>Categories Accepted: </span>
-					{facCardDetails.categoriesAccepted.map((category) => category + ", ")}
-				</Text>
-				<HStack mt={"auto"} justify={"space-between"}>
-					<Text fontSize={"xs"} color={COLORS.Button.primary}>
-						{Math.trunc(facCardDistance * 1000)}m away
-					</Text>
-					<Button size={"xs"}>More details</Button>
+			{/* Gradient */}
+			{translateY === 0 && (
+				<Box
+					position={"fixed"}
+					height={["20%", "10%"]}
+					width={"100%"}
+					bottom={["45%", "48%", "48%", "50%", "45%"]}
+					zIndex={1001}
+					bgGradient={"linear(transparent 0%, white 60%)"}
+					// transition={translateY === 0 ? "0.5s ease-in-out" : "0s"}
+				/>
+			)}
+			{/*  */}
+			<Button maxHeight={"2%"} padding={2.5} bg={"white"} onClick={handleMovement}>
+				{translateY === 0 ? <ChevronUpIcon /> : <ChevronDownIcon />}
+			</Button>
+			<Flex
+				flexDir={"column"}
+				paddingInline={3}
+				overflowY={"scroll"}
+				className={styles.hideScrollbar}
+			>
+				<HStack gap={2}>
+					<Flex justify={"start"} width={"40%"} height={"auto"}>
+						<Image
+							height={"100%"}
+							width={"100%"}
+							src={"/placeholder.png"}
+							alt="Image not found."
+						/>
+					</Flex>
+					<VStack width={"60%"} height={"100%"} maxHeight={"100%"} alignItems={"start"}>
+						<Text fontSize={"md"} color={COLORS.Button.primary}>
+							{Math.trunc(facCardDistance * 1000)}m
+						</Text>
+						<Text fontSize={"lg"} as={"b"} noOfLines={[2]}>
+							{facCardDetails.channelName}
+						</Text>
+						<Text fontSize={"md"} noOfLines={2}>
+							{/* <span style={{ fontWeight: 800 }}>Address:</span>{" "} */}
+							{facCardDetails.address}
+						</Text>
+						<Button
+							bg={COLORS.Button.primary}
+							textColor={"white"}
+							mt={"auto"}
+							size={"md"}
+							width={"100%"}
+							gap={3}
+							padding={3}
+						>
+							<ExternalLinkIcon />
+							<Text>Get directions</Text>
+						</Button>
+					</VStack>
 				</HStack>
+				<Flex p={2} gap={2} flexDir={"column"}>
+					<Text fontSize={"sm"} as={"b"}>
+						They accept X of {facCardDetails.categoriesAccepted.length} items:
+					</Text>
+					<Flex gap={2} fontSize={"xs"} width={"100%"} wrap={"wrap"}>
+						{facCardDetails.categoriesAccepted.map((category, idx) => (
+							<ItemTab key={idx}>{category}</ItemTab>
+						))}
+					</Flex>
+					<Text fontSize={"sm"} as={"b"}>
+						They also accept these items:
+					</Text>
+					<Flex gap={2} fontSize={"xs"} width={"100%"} wrap={"wrap"}>
+						{facCardDetails.categoriesAccepted.map((category, idx) => (
+							<ItemTab key={idx}>{category}</ItemTab>
+						))}
+					</Flex>
+					<Text mt={5} fontSize={"sm"}>
+						Please check <Link href="#">here</Link> for more information.
+					</Text>
+					<Divider />
+					<Text fontSize={"sm"} as={"b"} textAlign={"center"}>
+						Still got things to recycle?
+						<br />
+						Uncle sem help you find a place for them:
+					</Text>
+					<Button
+						bg={COLORS.Button.primary}
+						textColor={"white"}
+						mt={"auto"}
+						size={"md"}
+						width={"100%"}
+						gap={3}
+						padding={3}
+					>
+						See where to recycle the rest
+					</Button>
+				</Flex>
 			</Flex>
 		</Flex>
 	);
 };
+
+const ItemTab: React.FC<{ children: ReactNode }> = ({ children }) => {
+	return (
+		<Box
+			bg={"#E0F0EF"}
+			borderRadius={"42px"}
+			minWidth={"fit-content"}
+			padding={"5px 10px"}
+			borderColor={COLORS.Button.primary}
+			border={"1px"}
+		>
+			{children}
+		</Box>
+	);
+};
diff --git a/client/spa-pages/components/MapPage.tsx b/client/spa-pages/components/MapPage.tsx
index 160e371..040ebb5 100644
--- a/client/spa-pages/components/MapPage.tsx
+++ b/client/spa-pages/components/MapPage.tsx
@@ -378,22 +378,12 @@ const MapInner = ({ setPage }: Props) => {
 					handleChangedLocation={handleChangedLocation}
 				/>
 
-				{facCardIsOpen &&
-					(isMobile ? (
-						<FacilityCard
-							facCardDetails={facCardDetails}
-							facCardDistance={facCardDistance}
-							width={"86%"}
-							left={"7%"}
-						/>
-					) : (
-						<FacilityCard
-							facCardDetails={facCardDetails}
-							facCardDistance={facCardDistance}
-							width={"50%"}
-							left={"25%"}
-						/>
-					))}
+				{facCardIsOpen && (
+					<FacilityCard
+						facCardDetails={facCardDetails}
+						facCardDistance={facCardDistance}
+					/>
+				)}
 			</Box>
 
 			{/* Keeping this for future implementations of similar idea */}