feat: add meet-{teamMemberName} page to redirect to calendars if present

unit214 · Mar 25, 2024 · d193ff4 · d193ff4
1 parent 1095bbc
commit d193ff4
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 60 deletions.
diff --git a/src/app/[calendarRedirect]/page.tsx b/src/app/[calendarRedirect]/page.tsx
@@ -0,0 +1,29 @@
+import { notFound, redirect } from 'next/navigation'
+
+import { teamMembers } from '@/constant/teamMembers'
+
+type MeetTeamMemberProps = {
+  params: {
+    calendarRedirect: string
+  }
+}
+export function generateStaticParams() {
+  return teamMembers
+    .map((teamMember) => ({
+      calendarRedirect: teamMember.calendarRedirectSegment,
+    }))
+    .filter((url) => !!url)
+}
+
+export default function MeetTeamMember({
+  params: { calendarRedirect },
+}: MeetTeamMemberProps) {
+  const teamMember = teamMembers.find(
+    (member) => member.calendarRedirectSegment === calendarRedirect,
+  )
+  if (!teamMember || !teamMember.calendarLink) {
+    notFound()
+  } else {
+    redirect(teamMember.calendarLink)
+  }
+}
diff --git a/src/components/home/WhoWeAre.tsx b/src/components/home/WhoWeAre.tsx
@@ -6,10 +6,7 @@ import { cn } from '@/lib/utils'
 
 import NextLink from '@/components/NextLink'
 
-import KenoLogo from '~/svg/who-we-are-keno.svg'
-import PhilippLogo from '~/svg/who-we-are-philipp.svg'
-import TimoLogo from '~/svg/who-we-are-timo.svg'
-import TomLogo from '~/svg/who-we-are-tom.svg'
+import { teamMembers } from '@/constant/teamMembers'
 
 function ExternalReferences({
   linkedInLink,
@@ -89,61 +86,17 @@ export default function WhoWeAre() {
       <div className='flex w-[430px] flex-col gap-10 lg:w-fit lg:flex-row lg:items-start lg:gap-20'>
         <h1 className='whitespace-nowrap'>Who We Are</h1>
         <div className='flex flex-col gap-10'>
-          <TeamMemberField
-            Logo={TomLogo}
-            name='Tom Graupner'
-            description={
-              <>
-                Co-Founder, Backend Developer
-                <br />
-                and Cloud-Native Specialist
-              </>
-            }
-            linkedInLink='https://www.linkedin.com/in/tom-graupner/'
-            gitHubLink='https://github.com/tgraupne'
-            calendarLink='https://calendar.app.google/KicY9pSkoYKqWzZP8'
-          />
-          <TeamMemberField
-            Logo={KenoLogo}
-            name='Keno Dreßel'
-            description={
-              <>
-                Co-Founder, Full-Stack Engineer
-                <br />
-                and Machine Learning Specialist
-              </>
-            }
-            linkedInLink='https://www.linkedin.com/in/kenodressel/'
-            gitHubLink='https://github.com/kenodressel'
-            calendarLink='https://calendar.app.google/vL9yUjz599Xcdx9q8'
-          />
-          <TeamMemberField
-            Logo={PhilippLogo}
-            name='Philipp Piwowarsky'
-            description={
-              <>
-                Co-Founder, Full-Stack Engineer
-                <br />
-                and Blockchain Specialist
-              </>
-            }
-            linkedInLink='https://www.linkedin.com/in/philipp-piwowarsky/'
-            gitHubLink='https://github.com/thepiwo'
-            calendarLink='https://calendar.app.google/eJDr4qYncBod3xsi7'
-          />
-          <TeamMemberField
-            Logo={TimoLogo}
-            name='Timo Erdelt'
-            description={
-              <>
-                Full-Stack Engineer, Green IT, Functional
-                <br />
-                Programming, User-Centered Design
-              </>
-            }
-            linkedInLink='https://www.linkedin.com/in/timoerdelt/'
-            gitHubLink='https://github.com/tmrdlt'
-          />
+          {teamMembers.map((teamMember, key) => (
+            <TeamMemberField
+              Logo={teamMember.logo}
+              name={teamMember.name}
+              description={teamMember.description}
+              linkedInLink={teamMember.linkedInLink}
+              gitHubLink={teamMember.gitHubLink}
+              calendarLink={teamMember.calendarLink}
+              key={key}
+            />
+          ))}
         </div>
       </div>
     </div>

diff --git a/src/constant/models.ts b/src/constant/models.ts
@@ -1,4 +1,4 @@
-import { ReactElement } from 'react'
+import { FC, ReactElement, SVGProps } from 'react'
 
 export type Testimonial = {
   source: string
@@ -26,3 +26,13 @@ export type Post = {
   meta: Meta
   content: ReactElement
 }
+
+export type TeamMember = {
+  name: string
+  logo: FC<SVGProps<SVGSVGElement>>
+  description: ReactElement
+  linkedInLink: string
+  gitHubLink: string
+  calendarLink?: string
+  calendarRedirectSegment?: string // local url segment used to redirect to calendar link ({baseUrl}/{calendarRedirectUrl})
+}
diff --git a/src/constant/teamMembers.tsx b/src/constant/teamMembers.tsx
@@ -0,0 +1,66 @@
+import { TeamMember } from '@/constant/models'
+
+import KenoLogo from '~/svg/who-we-are-keno.svg'
+import PhilippLogo from '~/svg/who-we-are-philipp.svg'
+import TimoLogo from '~/svg/who-we-are-timo.svg'
+import TomLogo from '~/svg/who-we-are-tom.svg'
+export const teamMembers: TeamMember[] = [
+  {
+    name: 'Tom Graupner',
+    logo: TomLogo,
+    description: (
+      <>
+        Co-Founder, Backend Developer
+        <br />
+        and Cloud-Native Specialist
+      </>
+    ),
+    linkedInLink: 'https://www.linkedin.com/in/tom-graupner/',
+    gitHubLink: 'https://github.com/tgraupne',
+    calendarLink: 'https://calendar.app.google/KicY9pSkoYKqWzZP8',
+    calendarRedirectSegment: 'meet-tom',
+  },
+  {
+    name: 'Keno Dreßel',
+    logo: KenoLogo,
+    description: (
+      <>
+        Co-Founder, Full-Stack Engineer
+        <br />
+        and Machine Learning Specialist
+      </>
+    ),
+    linkedInLink: 'https://www.linkedin.com/in/kenodressel/',
+    gitHubLink: 'https://github.com/kenodressel',
+    calendarLink: 'https://calendar.app.google/vL9yUjz599Xcdx9q8',
+    calendarRedirectSegment: 'meet-keno',
+  },
+  {
+    name: 'Philipp Piwowarsky',
+    logo: PhilippLogo,
+    description: (
+      <>
+        Co-Founder, Full-Stack Engineer
+        <br />
+        and Blockchain Specialist
+      </>
+    ),
+    linkedInLink: 'https://www.linkedin.com/in/philipp-piwowarsky/',
+    gitHubLink: 'https://github.com/thepiwo',
+    calendarLink: 'https://calendar.app.google/eJDr4qYncBod3xsi7',
+    calendarRedirectSegment: 'meet-philipp',
+  },
+  {
+    name: 'Timo Erdelt',
+    logo: TimoLogo,
+    description: (
+      <>
+        Full-Stack Engineer, Green IT, Functional
+        <br />
+        Programming, User-Centered Design
+      </>
+    ),
+    linkedInLink: 'https://www.linkedin.com/in/timoerdelt/',
+    gitHubLink: 'https://github.com/tmrdlt',
+  },
+]