Merge pull request #14 from spencer-rafada/spencer/team-page

TEAM PAGE - Added information

src/app/components/Navbar.tsx

@@ -8,7 +8,6 @@ import CTAButton from './CTAButton'
 
 const links = [
   { to: '/about', text: 'About Us' },
-  { to: '/contact', text: 'Contact' },
   { to: '/projects', text: 'Our Projects' },
   { to: '/team', text: 'Team' },
 ]

src/app/team/[id]/page.tsx

@@ -1,5 +1,16 @@
 import { Metadata } from 'next'
 import React from 'react'
+import {
+  Box,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  Flex,
+  Heading,
+  Image,
+  Text,
+} from '@chakra-ui/react'
+import teamData from '../team.json'
 
 type MetadataProps = {
   params: { id: string }
@@ -11,18 +22,96 @@ export async function generateMetadata({
 Promise<Metadata> {
   const id = params.id
 
-  // Fetch Team Member Information Here
+  const teamMember = teamData.find(
+    (teamMember: { id: string; name: string }) => teamMember.id === id
+  )
+
+  if (!teamMember) {
+    return {
+      title: 'Team Member Not Found',
+      description: 'Team Member Not Found',
+    }
+  }
 
   return {
-    title: `Team Member ${id}`,
-    description: `Team Member ${id}`,
+    title: `${teamMember.name} | ${teamMember.position}`,
+    description: `Meet ${teamMember.name} is the ${teamMember.position} of Ray Foundation`,
   }
 }
 
-export async function generateStaticParams() {
-  return [{ id: '1' }, { id: '2' }, { id: '3' }]
-}
+// export async function generateStaticParams() {
+//   return [{ id: '1' }, { id: '2' }, { id: '3' }]
+// }
 
 export default function TeamMember({ params }: { params: { id: string } }) {
-  return <div>TeamMember {params.id}</div>
+  const teamMember = teamData.find(
+    (teamMember: { id: string; name: string }) => teamMember.id === params.id
+  )
+
+  return (
+    <>
+      <Box p={{ base: 8, md: 16 }}>
+        <Breadcrumb>
+          <BreadcrumbItem>
+            <BreadcrumbLink href='/'>Home</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbItem>
+            <BreadcrumbLink href='/team'>Team</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbItem isCurrentPage>
+            <BreadcrumbLink href='#'>{teamMember?.name}</BreadcrumbLink>
+          </BreadcrumbItem>
+        </Breadcrumb>
+        <Flex
+          direction={{ base: 'column', md: 'row-reverse' }}
+          justify='space-between'
+          align={{ base: 'center', md: 'start' }}
+          gap={{ base: 4, md: 6 }}
+        >
+          {/* <Flex justify='center' grow='3'> */}
+          <Image
+            src={teamMember?.image}
+            boxSize={{ base: '250px', md: '300px' }}
+            alt={`Image of ${teamMember?.name}`}
+            borderRadius='full'
+            objectFit='cover'
+          />
+          {/* </Flex> */}
+          <Flex direction='column' gap={{ base: 2, md: 3 }}>
+            <Flex direction='column' gap={{ base: 2, md: 3 }}>
+              <Heading
+                as='h1'
+                size={{ base: 'xl', md: '2xl' }}
+                color='brand.600'
+                textAlign={{ base: 'center', md: 'start' }}
+              >
+                {teamMember?.name}
+              </Heading>
+              <Heading
+                as='h3'
+                size={{ base: 'lg', md: 'xl' }}
+                color='gray.700'
+                textAlign={{ base: 'center', md: 'start' }}
+              >
+                {teamMember?.position}
+              </Heading>
+            </Flex>
+            <Flex direction='column' gap={{ base: 2, md: 3 }}>
+              {teamMember?.description.map((desc: string, index: number) => {
+                return (
+                  <Text
+                    key={index}
+                    fontSize={{ base: 'md', md: 'lg' }}
+                    textAlign={{ base: 'center', md: 'start' }}
+                  >
+                    {desc}
+                  </Text>
+                )
+              })}
+            </Flex>
+          </Flex>
+        </Flex>
+      </Box>
+    </>
+  )
 }

src/app/team/components/TeamCard.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Avatar, Flex, Text } from '@chakra-ui/react'
+import Link from 'next/link'
+
+export default function TeamCard({
+  id,
+  name,
+  imgSrc,
+  position,
+}: {
+  id: string
+  name: string
+  imgSrc?: string
+  position: string
+}) {
+  return (
+    <Link href={`/team/${id}`}>
+      <Flex direction='column' p='4' alignItems='center'>
+        <Avatar
+          name={name}
+          src={imgSrc}
+          size={{ base: 'xl', md: '2xl' }}
+          data-testid='team-card-img'
+        />
+        <Text
+          fontSize={{ base: 'xl', md: '2xl' }}
+          fontWeight='bold'
+          data-testid='team-card-name'
+          color='brand.700'
+        >
+          {name}
+        </Text>
+        <Text data-testid='team-card-position'>{position}</Text>
+      </Flex>
+    </Link>
+  )
+}

src/app/team/components/__tests__/Team.test.tsx

@@ -0,0 +1,13 @@
+import { screen, render } from '@testing-library/react'
+import Team from '../../page'
+
+describe('Team', () => {
+  it('should render the team header', () => {
+    render(<Team />)
+    expect(screen.getByTestId('team-page-header')).toBeInTheDocument()
+  })
+  it('should render the team cards', () => {
+    render(<Team />)
+    expect(screen.getByTestId('team-page-cards')).toBeInTheDocument()
+  })
+})

src/app/team/components/__tests__/TeamCard.test.tsx

@@ -0,0 +1,17 @@
+import { screen, render } from '@testing-library/react'
+import TeamCard from '../TeamCard'
+
+describe('Team Card', () => {
+  it('should render the member img', () => {
+    render(<TeamCard name='Spencer Rafada' position='Software Engineer' />)
+    expect(screen.getByTestId('team-card-img')).toBeInTheDocument()
+  })
+  it('should render the member name', () => {
+    render(<TeamCard name='Spencer Rafada' position='Software Engineer' />)
+    expect(screen.getByTestId('team-card-name')).toBeInTheDocument()
+  })
+  it('should render the member position', () => {
+    render(<TeamCard name='Spencer Rafada' position='Software Engineer' />)
+    expect(screen.getByTestId('team-card-position')).toBeInTheDocument()
+  })
+})

src/app/team/page.tsx

@@ -1,11 +1,41 @@
 import { Metadata } from 'next'
 import React from 'react'
+import TeamCard from './components/TeamCard'
+import teamData from './team.json'
+import { Flex, Heading } from '@chakra-ui/react'
 
 export const metadata: Metadata = {
   title: 'Team',
   description: 'Team Page',
 }
 
 export default function Team() {
-  return <div>Team Page</div>
+  return (
+    <>
+      <Flex p={{ base: 8, md: 16 }} direction='column' gap={{ base: 4, md: 6 }}>
+        <Heading
+          data-testid='team-page-header'
+          as='h1'
+          size='2xl'
+          textAlign='center'
+          color='brand.500'
+        >
+          Team
+        </Heading>
+        <Flex data-testid='team-page-cards' wrap='wrap' justify='center'>
+          {teamData.map((teamMember) => {
+            return (
+              <TeamCard
+                key={teamMember.id}
+                id={teamMember.id}
+                name={teamMember.name}
+                imgSrc={teamMember.image}
+                position={teamMember.position}
+              />
+            )
+          })}
+        </Flex>
+      </Flex>
+    </>
+  )
 }

src/app/team/team.json

@@ -0,0 +1,68 @@
+[
+  {
+    "id": "raymond-steven",
+    "name": "Raymond Steven",
+    "position": "President",
+    "image": "/Team/raymond.webp",
+    "description": ["Raymond Bobson Steven is a dedicated advocate for education-driven community transformation. Born in Kenema, Sierra Leone, Raymond's journey from walking ten miles a day to pursue education ignited his profound understanding of education's pivotal role in changing lives, families, and entire communities. His firm belief that education is the beacon guiding societal progress has fueled his relentless pursuit of knowledge and impact.",
+    "After completing high school, Raymond's determination led him to the United States, where he seized the opportunity to pursue a bachelor's degree in Public Policy and Administration. This decision is not just a personal endeavor, but a generational mission deeply rooted in his commitment to shaping his country's future. Hailing from Sierra Leone, a nation grappling with multifaceted challenges, Raymond envisions a brighter tomorrow by addressing pressing issues such as education, healthcare, infrastructure, leadership, and corruption.",
+    "Raymond's passion for his homeland is evident in every facet of his academic journey. With every class he undertakes, he asks himself, 'How can I leverage the knowledge I acquire to contribute to solving Sierra Leone's challenges?' His goal is clear: to create policies that uplift the lives of his fellow citizens and foster enduring positive change. For Raymond, this endeavor transcends a mere career; it's a profound mission that speaks to the aspirations of future generations.",
+    "With an unwavering commitment to his cause, Raymond seeks support from the broader community—resources, networks, and collaboration—to turn his vision into reality. His mission is a call to action, a resounding declaration that Sierra Leone's future generations deserve a better tomorrow, one where education and policy drive progress and prosperity. Raymond Bobson Steven is a torchbearer of change, ready to light the path toward a brighter future for his beloved Sierra Leone. "]
+  },
+  {
+    "id": "samuel-saidu",
+    "name": "Samuel Saidu",
+    "position": "Vice President",
+    "image": "/Team/samuel.webp",
+    "description": ["I am Samuel Faraday Saidu, a devoted public health practitioner originating from the picturesque West African nation of Sierra Leone. Armed with a bachelor's degree in public health from Brigham Young University-Idaho, I am currently pursuing a master's degree in public health with a specialization in Epidemiology at North Dakota State University.",
+    "My journey within the realm of public health has been profoundly inspiring. It commenced with roles at esteemed non-governmental organizations like Caritas International, PLAN International, and Save the Children International, all based in Sierra Leone. These experiences not only broadened my horizons but also fortified my commitment to effecting positive change in the field of public health, particularly in underserved regions.",
+    "Amid the global pandemic of 2021, I took on the pivotal role of a Community Health Worker at the Bear River Health Department in Logan, Utah. Here, I made significant contributions to the ongoing battle against COVID-19. My unwavering dedication and service during these challenging times garnered commendation.",
+    "Presently, I serve as a Graduate Research Assistant at the Center for Social Research at North Dakota State University. In this capacity, I continue to contribute actively to the field of public health through research and academic endeavors. My work not only underscores my dedication to enhancing public health but also underscores my resolute determination to become a leading epidemiologist in the field."
+  ]
+  },
+  {
+    "id": "tiffany-stanger",
+    "name": "Tiffany Stanger",
+    "position": "Secretary",
+    "image": "/Team/tiffany.webp",
+    "description": ["Tiffany graduated from Utah State University with a BS in Family and Human Development.  She enjoys oraganizing, cleaning and baking.  She has 7 children, 2 girls and 5 boys.  She enjoyed traveling when she was younger and has been to Japan, France, England, Italy, Belgium, Egypt, Isreal, Mexico and Canada. "]
+  },
+  {
+    "id": "sonny-cobinah",
+    "name": "Sonny Cobinah",
+    "position": "Board Member",
+    "image": "/Team/sonny.webp",
+    "description": ["Sonny Cobinah's goal is to help build up the community in his country to reach their potential. He helps in the little ways he can to make life better for them. He has been working with previous foundations to help kids in various communities, and has always found it inspiring to help other people."]
+  },
+  {
+    "id": "emma-haddock",
+    "name": "Emma Haddock",
+    "position": "Board Member",
+    "image": "/Team/emma.webp",
+    "description": ["Hi my name is Emma Haddock and I am currently studying Therapeutic Recreation at BYU Idaho. I love anything to do with the outdoors among my favorite activities is hiking or running. I love to travel to different places with my family. I have learned through those opportunities to travel that no matter where we are in the world we all are connected. One of the greatest ways we are connected is through education. I am grateful for my education and for the opportunities for growth that it has provided me and that is one of the many reasons I am happy to be a part of the Ray Foundation. "]
+  },
+  {
+    "id": "dean-coleman",
+    "name": "Dean Coleman",
+    "position": "Board Member",
+    "image": "/Team/dean.webp",
+    "description": ["Dean Coleman has a broad background of leadership, management and business experience. He has led organizations, teams, and programs for small and large companies across multiple industries, for non-profit organizations, and for the U.S. Federal Government. Mr. Coleman is a member of the faculty of the BYU-Idaho Business Management Department in the College of Business and Communication, where he enjoys teaching, mentoring, and cheering on his students.",
+    "In addition to teaching a variety of courses, he is also the faculty advisor to the Business Management Society. Prior to joining the faculty at BYU-I, Mr. Coleman worked in commercial industry and the Federal Government for more than 25 years. Most of his career was focused on developing strategic solutions, implementing innovative capabilities, and supporting critical national security programs in the unique and challenging environment of the U.S. Intelligence Community. Mr. Coleman earned his Bachelor of Science degree from BYU and his Master of Business Administration (MBA), with areas of concentration in strategic management and international affairs, from The George Washington University. He has been married for nearly 27 years and has three children and one grandchild."]
+  },
+  {
+    "id": "teagan-stanger",
+    "name": "Teagan Stanger",
+    "position": "Graphic Designer",
+    "image": "/Team/teagan.webp",
+    "description": ["Teagan is currently studying graphic desgn at BYU-Idaho.  She is excited about helping the Ray Foundation grow while developing her skills along the way.  Teagan dreams of traveling the world and exploring the different cultures and styles other countries have to offer."]
+  },
+  {
+    "id": "spencer-rafada",
+    "name": "Spencer Rafada",
+    "position": "Web Developer",
+    "image": "/Team/spencer.webp",
+    "description": ["I love Web Development and utilizing software tools to create a high quality and robust development workflow. I have spent the past year developing software for work-related projects, open-source websites, side projects, and passion projects. I am deeply motivated by the understanding that software applications can significantly enhance people's lives, and I am dedicated and passionate to ensure the highest quality in their development.",
+    "I enjoy the pursuit of continuous learning and self-improvement. Outside of programming, I cherish and love spending time with my wife going out for walks, spontaneous road trips, and watching endless documentaries. I enjoy playing Basketball and being active. Please don't hesitate to reach out so we can enjoy some pick up games.",
+    "I did a two-year volunteer mission at Sierra Leone. I learned a lot of things and is a big factor of how I am today. I am excited to be able to help the people of Sierra Leone."]
+  }
+]