Merge pull request #18 from CS-ZSC/feat/components/board

feat: `Board` component

Author: hulxv

app/layout.tsx

@@ -5,6 +5,7 @@ import Header from "@/components/ui/internal/header";
 import Footer from "@/components/ui/internal/footer";
 import "./global.css";
 import { AnimatePresence } from "framer-motion";
+import { Toaster } from "@/components/ui/toaster";
 
 export const metadata: Metadata = {
   title: "IEEE ZSB",
@@ -25,6 +26,7 @@ export default function RootLayout({
             <AnimatePresence mode="wait">{children}</AnimatePresence>
             <Footer />
           </Stack>
+          <Toaster />
         </Provider>
       </body>
     </html>

app/page.tsx

@@ -7,6 +7,7 @@ import SloganTypingEffect from "@/components/ui/internal/home/slogan-typing-effe
 import { useWindowType } from "@/hooks/use-window-type";
 import { useEffect, useRef } from "react";
 import Events from "@/components/ui/internal/home/events";
+import Board from "@/components/ui/internal/board";
 // import data from "../fakedata.json";
 // import Image from "next/image";
 
@@ -126,6 +127,7 @@ export default function Home() {
         <SloganTypingEffect />
       </Flex>
       <Events />
+      <Board />
 
     </PageWrapper>
   );

components/ui/internal/board/index.tsx

@@ -0,0 +1,131 @@
+import { useWindowType } from "@/hooks/use-window-type";
+import { Avatar, Box, Heading, HStack, IconButton, Separator, Stack, Text, useClipboard, Wrap } from "@chakra-ui/react";
+import { HiOutlineMail, HiCheck } from "react-icons/hi";
+
+import React from "react";
+import Card from "@/components/ui/internal/card";
+import { Tooltip } from "@/components/ui/tooltip";
+import { toaster } from "@/components/ui/toaster"
+interface Position {
+    name: string;
+    position: string;
+    avatarSrc: string;
+    email: string;
+}
+
+interface BoardProps {
+    description?: string;
+    title?: string;
+    positions?: Position[];
+}
+
+export default function Board({ }: BoardProps) {
+    const { isDesktop } = useWindowType();
+    return (
+        <Card>
+            <Stack align={"center"}>
+                <Heading fontWeight={"bold"} size={isDesktop ? "4xl" : "2xl"} color={"text-3"}>
+                    Board
+                </Heading>
+                <Text>
+                    Meet the heart and soul behind this website — a team of passionate and dedicated students who pour their energy and creativity into making it extraordinary. Here are our amazing Executive Board members!
+                </Text>
+            </Stack>
+            <Stack w="full">
+                <Heading alignSelf={"center"}>Executive Board</Heading>
+                <Separator size={"lg"} borderColor={"secondary"} />
+            </Stack>
+
+            <Wrap gap={2} padding={8} justify={"space-around"} borderColor={"text-5"} borderWidth={"4px"} borderRadius={"2xl"} borderStyle={"dashed"} w="full" h="full">
+                {positions.map((pos, i) => <PositionCard position={pos} key={i} />)}
+            </Wrap>
+
+        </Card>
+
+    );
+}
+
+
+function PositionCard({ position }: { position: Position }) {
+    const { isDesktop } = useWindowType();
+    const clipboard = useClipboard({ value: position.email, timeout: 2000 });
+    return (
+        <Stack w={isDesktop ? "240px" : "160px"} align={"center"} spaceY={0}>
+            <Box h="full" w="full">
+
+                <Avatar.Root
+                    w={"full"}
+                    h={"full"}
+                    shape="rounded"
+                >
+                    <Avatar.Fallback name={position.name} />
+                    <Avatar.Image
+                        src={position.avatarSrc}
+                        alt={position.name}
+                    />
+                </Avatar.Root>
+            </Box>
+            <Stack w="full" align={"center"} justify={"center"} spaceY={-2} m={2}>
+                <Heading textAlign={"center"} size={isDesktop ? "lg" : "md"}>{position.name}</Heading>
+                <HStack w="full" justify={"center"} spaceX={1} align={"center"}>
+                    <Text textAlign={"center"} fontSize={isDesktop ? "sm" : "xs"}>{position.position}</Text>
+                    <Tooltip content={position.email} interactive openDelay={100} showArrow closeDelay={100}>
+                        <IconButton variant={"plain"} color={"white"} p={1} size={"xs"} onClick={() => {
+                            clipboard.copy();
+                            toaster.create({
+                                title: "Email Copied",
+                                description: `The email has been copied to your clipboard. Contect now with our ${position.position}!`,
+                                type: "success",
+                                duration: 2000,
+                                placement: "top",
+                            });
+
+                        }} aria-label="Search database">
+                            {clipboard.copied ? <HiCheck  /> : <HiOutlineMail  />}
+                        </IconButton>
+                    </Tooltip>
+                </HStack>
+            </Stack>
+        </Stack>
+    );
+
+}
+
+const positions: Position[] = [
+    {
+        name: "Shahd Elbendary",
+        position: "Chairperson",
+        avatarSrc: "/Images/board/chairperson.jpeg",
+        email: "[email protected]"
+    },
+    {
+        name: "Amr Yasser Saber",
+        position: "Vice Technical Chairman",
+        avatarSrc: "/Images/board/vice-technical.jpeg",
+        email: "[email protected]"
+    },
+    {
+        name: "Mustafa Mohamed",
+        position: "Vice Managerial Chairman",
+        avatarSrc: "/Images/board/vice-managerial.jpeg",
+        email: "[email protected]"
+    },
+    {
+        name: "Samar Nafea",
+        position: "Secretary",
+        avatarSrc: "/Images/board/secretary.jpeg",
+        email: "[email protected]"
+    },
+    {
+        name: "Mohamed Tarek",
+        position: "Branding Officer",
+        avatarSrc: "/Images/board/branding-officer.jpeg",
+        email: "[email protected]"
+    },
+    {
+        name: "Sarah Kahwash",
+        position: "Treasurer",
+        avatarSrc: "/Images/board/treasurer.jpeg",
+        email: "[email protected]"
+    },
+];

components/ui/internal/home/events.tsx

@@ -10,7 +10,7 @@ export default function Events() {
     const { isDesktop } = useWindowType();
     return (
         <Card>
-            <Heading fontWeight={"bold"} size={isDesktop ? "5xl" : "2xl"} color={"text-3"}>
+            <Heading fontWeight={"bold"} size={isDesktop ? "4xl" : "2xl"} color={"text-3"}>
                 Events
             </Heading>
             <Stack
@@ -20,7 +20,7 @@ export default function Events() {
             >
 
                 {fake_events.map((ev, i) => {
-                    return (<Stack key={i} spaceY={10} borderRadius={"lg"} bgSize={"auto"}
+                    return (<Stack key={i} spaceY={10} borderRadius={"lg"} bgSize={"cover"}
                         bgRepeat={"no-repeat"} bgPos={"center"} padding={4} justify={"space-between"} bgImage={`url(${ev.image})`}>
                         <Stack
                             spaceY={3}

components/ui/toaster.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import {
+  Toaster as ChakraToaster,
+  Portal,
+  Spinner,
+  Stack,
+  Toast,
+  createToaster,
+} from "@chakra-ui/react"
+
+export const toaster = createToaster({
+  placement: "top",
+  pauseOnPageIdle: true,
+
+})
+
+export const Toaster = () => {
+  return (
+    <Portal>
+      <ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
+        {(toast) => (
+          <Toast.Root width={{ md: "sm" }}>
+            {toast.type === "loading" ? (
+              <Spinner size="sm" color="blue.solid" />
+            ) : (
+              <Toast.Indicator />
+            )}
+            <Stack gap="1" flex="1" maxWidth="100%">
+              {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
+              {toast.description && (
+                <Toast.Description>{toast.description}</Toast.Description>
+              )}
+            </Stack>
+            {toast.action && (
+              <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
+            )}
+            {toast.meta?.closable && <Toast.CloseTrigger />}
+          </Toast.Root>
+        )}
+      </ChakraToaster>
+    </Portal>
+  )
+}