Merge pull request #32 from hack4impact-calpoly/notifications-page

feat: add notifications page with back navigation

Author: blwelsh

src/app/notifications/page.tsx

@@ -0,0 +1,58 @@
+import { Box, HStack, Text, VStack } from "@chakra-ui/react";
+import { LuMailbox, LuChevronLeft, LuSettings } from "react-icons/lu";
+import Link from "next/link";
+import NotificationCard from "@/components/NotificationCard";
+
+type Notification = {
+  id: string;
+  title: string;
+  timeAgo: string;
+  icon?: string;
+  unread?: boolean;
+};
+
+export default function Page() {
+  const notifications: Notification[] = [
+    { id: "1", title: "You reached a personal best!", timeAgo: "23hr ago", icon: "🏆", unread: true },
+    { id: "2", title: "Spring Challenges are here!", timeAgo: "2 days ago", unread: false },
+    { id: "3", title: "Your weekly summary is ready", timeAgo: "4 days ago", unread: true },
+  ];
+
+  return (
+    <Box display={"flex"} alignItems={"center"} justifyContent={"center"}>
+      <VStack maxW={400} w={"full"} gap={0}>
+        <HStack w="full" px="20px" py="20px" justify="space-between">
+          <HStack gap={3} align="baseline">
+            <Link href="/" style={{ display: "inline-flex" }}>
+              <LuChevronLeft size={24} style={{ display: "block" }} />
+            </Link>
+            <Text fontSize="32px" fontWeight="semibold" lineHeight="1" display="inline">
+              Notifications
+            </Text>
+          </HStack>
+          <Link href="/settings" style={{ display: "inline-flex" }}>
+            <LuSettings size={24} style={{ display: "block" }} />
+          </Link>
+        </HStack>
+
+        <VStack w={"full"} gap={0} mb={20}>
+          {notifications.map((n) => (
+            <NotificationCard key={n.id} title={n.title} timeAgo={n.timeAgo} icon={n.icon} unread={n.unread} />
+          ))}
+        </VStack>
+        <VStack flex={1} justifyContent={"center"} alignItems={"center"}>
+          <LuMailbox size="130px" color="#16243F" />
+          <VStack mt={-8} gap={1}>
+            <Text fontSize={24}>No more notifications</Text>
+            <Text w={"200px"} textAlign={"center"} fontSize={11} fontWeight="medium" lineHeight={1}>
+              Missing notifications? Visit your <br />
+              <Text as="span" color="#0084FF" textDecoration="underline">
+                historical notifications
+              </Text>
+            </Text>
+          </VStack>
+        </VStack>
+      </VStack>
+    </Box>
+  );
+}

src/app/page.tsx

@@ -1,24 +1,32 @@
 import { Box, IconButton, Text, VStack, HStack } from "@chakra-ui/react";
 import ProgressRing from "@/components/ProgressRing";
-import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
+import { LuChevronLeft, LuChevronRight, LuBell } from "react-icons/lu";
+import Link from "next/link";
 
 export default function Home() {
   return (
     <main>
-      <Box display={"flex"} alignItems={"center"}>
-        <VStack w={"full"}>
-          <Text>Home</Text>
+      <Box display={"flex"} alignItems={"center"} justifyContent={"center"}>
+        <VStack maxW={400} w={"full"} gap={0}>
+          <HStack w={"full"} justifyContent={"space-between"} padding={"20px"}>
+            <Text fontWeight={"semibold"} fontSize={32}>
+              Hi, Ethan!
+            </Text>
+            <Link href="/notifications" style={{ display: "flex", cursor: "pointer" }}>
+              <LuBell size={24} />
+            </Link>
+          </HStack>
           {/* Progress Ring */}
           <VStack w={"full"} gap={5} padding={"20px"}>
             <HStack w={"full"} justifyContent={"space-between"}>
               <IconButton area-label="Previous Progress Ring" variant={"ghost"}>
-                <FaChevronLeft />
+                <LuChevronLeft />
               </IconButton>
               <Text fontSize={"x-large"} fontWeight={"semibold"}>
                 Today
               </Text>
               <IconButton area-label="Next Progress Ring" variant={"ghost"}>
-                <FaChevronRight />
+                <LuChevronRight />
               </IconButton>
             </HStack>
             <ProgressRing percent={70} isClockwise={false} />

src/components/NotificationCard.tsx

@@ -0,0 +1,35 @@
+import { Box, Grid, HStack, IconButton, Text, VStack } from "@chakra-ui/react";
+
+type Props = {
+  title: string;
+  timeAgo: string;
+  icon?: string;
+  unread?: boolean;
+};
+
+export default function NotificationCard({ title, timeAgo, icon, unread }: Props) {
+  return (
+    <HStack w="full" py={4} px={5} borderBottom=".5px solid" borderColor="#16243F" justify="space-between">
+      <HStack align="center" gap={8}>
+        <VStack align="flex-start" gap={0} flex={1}>
+          <Text fontSize="16px" fontWeight="semibold">
+            {title}
+          </Text>
+
+          <Text fontSize="11px" color="#16243F" opacity="60%" lineHeight="1">
+            {timeAgo}
+          </Text>
+        </VStack>
+        {icon ? (
+          <Box>
+            <Text fontSize="24px" lineHeight="1">
+              {icon}
+            </Text>
+          </Box>
+        ) : null}
+      </HStack>
+
+      {unread ? <Box w="10px" h="10px" borderRadius="full" bg="#63ADF2" /> : null}
+    </HStack>
+  );
+}