Fix <TeamMembers> side modals (#10391)

Fix the exception in each product page where the meet the team section has team members with bios that should click open in the side modal.
PostHog · Jan 18, 2025 · 838af62 · 838af62
1 parent 1f67730
commit 838af62
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 15 deletions.
diff --git a/src/components/Product/AbTesting/index.tsx b/src/components/Product/AbTesting/index.tsx
@@ -1,5 +1,5 @@
 import CloudinaryImage from 'components/CloudinaryImage'
-import React from 'react'
+import React, { useState } from 'react'
 import Link from 'components/Link'
 import { StaticImage } from 'gatsby-plugin-image'
 import { IconBrackets, IconGraph, IconFlask, IconToggle, IconPeople, IconRewindPlay } from '@posthog/icons'
@@ -34,6 +34,8 @@ import { FAQ } from 'components/Products/FAQ'
 import { SEO } from 'components/seo'
 import { useLayoutData } from 'components/Layout/hooks'
 import Plans from 'components/Pricing/Plans'
+import SideModal from '../../Modal/SideModal'
+import Profile from '../../Team/Profile'
 
 const product = {
     slug: 'experiments',
@@ -301,6 +303,7 @@ export const ProductAbTesting = () => {
         }
     `)
     const { fullWidthContent } = useLayoutData()
+    const [activeProfile, setActiveProfile] = useState(false)
 
     return (
         <>
@@ -309,6 +312,9 @@ export const ProductAbTesting = () => {
                 description="Run statistically-significant multivariate tests and robust targeting & exclusion rules."
                 image={`/images/og/ab-testing.jpg`}
             />
+            <SideModal open={!!activeProfile} setOpen={setActiveProfile}>
+                {activeProfile && <Profile profile={{ ...activeProfile }} />}
+            </SideModal>
             <div className={`${fullWidthContent ? 'max-w-full px-8' : 'max-w-7xl mx-auto'} px-5 py-10 md:pt-20 pb-0`}>
                 <Hero
                     color="purple"
@@ -550,7 +556,7 @@ export const ProductAbTesting = () => {
                         PostHog works in small teams. The <Link to={teamSlug}>{team}</Link> team is responsible for
                         building {product.lowercase}.
                     </p>
-                    <TeamMembers teamName={team} />
+                    <TeamMembers teamName={team} setActiveProfile={setActiveProfile} />
                 </section>
 
                 <section id="roadmap" className="mb-20 px-5">

diff --git a/src/components/Product/DataWarehouse/index.tsx b/src/components/Product/DataWarehouse/index.tsx
@@ -1,5 +1,5 @@
 import CloudinaryImage from 'components/CloudinaryImage'
-import React from 'react'
+import React, { useState } from 'react'
 import Link from 'components/Link'
 import { StaticImage } from 'gatsby-plugin-image'
 import { IconDatabase, IconGraph, IconHogQL, IconClock, IconToggle, IconDecisionTree } from '@posthog/icons'
@@ -26,6 +26,8 @@ import { FAQ } from 'components/Products/FAQ'
 import { SEO } from 'components/seo'
 import { useLayoutData } from 'components/Layout/hooks'
 import Plans from 'components/Pricing/Plans'
+import Profile from '../../Team/Profile'
+import SideModal from '../../Modal/SideModal'
 
 const product = {
     slug: 'data-warehouse',
@@ -205,13 +207,17 @@ export const ProductDataWarehouse = () => {
         }
     `)
     const { fullWidthContent } = useLayoutData()
+    const [activeProfile, setActiveProfile] = useState(false)
     return (
         <>
             <SEO
                 title="Data Warehouse - PostHog"
                 description="Unify and query data from any source and analyze it alongside your product data."
                 image={`/images/og/data-warehouse.jpg`}
             />
+            <SideModal open={!!activeProfile} setOpen={setActiveProfile}>
+                {activeProfile && <Profile profile={{ ...activeProfile }} />}
+            </SideModal>
             <div className={`${fullWidthContent ? 'max-w-full px-8' : 'max-w-7xl mx-auto'} px-5 py-10 md:pt-20 pb-0`}>
                 <Hero
                     color="lilac"
@@ -372,7 +378,7 @@ export const ProductDataWarehouse = () => {
                         PostHog works in small teams. The <Link to={teamSlug}>{team}</Link> team is responsible for
                         building the {product.lowercase}.
                     </p>
-                    <TeamMembers teamName={team} />
+                    <TeamMembers teamName={team} setActiveProfile={setActiveProfile} />
                 </div>
             </section>
 

diff --git a/src/components/Product/FeatureFlags/index.tsx b/src/components/Product/FeatureFlags/index.tsx
@@ -1,5 +1,5 @@
 import CloudinaryImage from 'components/CloudinaryImage'
-import React from 'react'
+import React, { useState } from 'react'
 import Link from 'components/Link'
 import { StaticImage } from 'gatsby-plugin-image'
 import {
@@ -45,6 +45,8 @@ import Install from '../Install'
 import { SEO } from 'components/seo'
 import { useLayoutData } from 'components/Layout/hooks'
 import Plans from 'components/Pricing/Plans'
+import SideModal from '../../Modal/SideModal'
+import Profile from '../../Team/Profile'
 
 const product = {
     slug: 'feature-flags',
@@ -404,13 +406,17 @@ export const ProductFeatureFlags = () => {
         }
     `)
     const { fullWidthContent } = useLayoutData()
+    const [activeProfile, setActiveProfile] = useState(false)
     return (
         <>
             <SEO
                 title="Feature flags - PostHog"
                 description="Safely roll out features to specific users or groups."
                 image={`/images/og/feature-flags.jpg`}
             />
+            <SideModal open={!!activeProfile} setOpen={setActiveProfile}>
+                {activeProfile && <Profile profile={{ ...activeProfile }} />}
+            </SideModal>
             <div className={`${fullWidthContent ? 'max-w-full px-8' : 'max-w-7xl mx-auto'} px-5 py-10 md:pt-20 pb-0`}>
                 <Hero
                     color="seagreen"
@@ -634,7 +640,7 @@ export const ProductFeatureFlags = () => {
                         PostHog works in small teams. The <Link to={teamSlug}>{team}</Link> team is responsible for
                         building {product.lowercase}.
                     </p>
-                    <TeamMembers teamName={team} />
+                    <TeamMembers teamName={team} setActiveProfile={setActiveProfile} />
                 </section>
 
                 <section id="roadmap" className="mb-20 px-5">

diff --git a/src/components/Product/Pipelines/index.js b/src/components/Product/Pipelines/index.js
@@ -62,6 +62,7 @@ import ReactFlow, {
     Panel,
 } from 'reactflow'
 import 'reactflow/dist/style.css'
+import Profile from '../../Team/Profile'
 
 const team = 'CDP'
 const teamSlug = '/teams/cdp'
@@ -469,6 +470,7 @@ function PipelinesPage({ location }) {
     const [selectedDestination, setSelectedDestination] = React.useState(null)
     const [modalOpen, setModalOpen] = React.useState(false)
     const { fullWidthContent } = useLayoutData()
+    const [activeProfile, setActiveProfile] = React.useState(false)
 
     const product = {
         slug: 'cdp',
@@ -484,6 +486,9 @@ function PipelinesPage({ location }) {
                 description="Get all your data into PostHog with 60+ sources & destinations"
                 image={`images/og/cdp.jpg`}
             />
+            <SideModal open={!!activeProfile} setOpen={setActiveProfile}>
+                {activeProfile && <Profile profile={{ ...activeProfile }} />}
+            </SideModal>
             <SideModal
                 title={
                     selectedDestination ? (
@@ -729,7 +734,7 @@ function PipelinesPage({ location }) {
                     PostHog works in small teams. <Link to={teamSlug}>Here's the team</Link> responsible for building
                     our customer data platform.
                 </p>
-                <TeamMembers teamName={team} />
+                <TeamMembers teamName={team} setActiveProfile={setActiveProfile} />
             </section>
 
             <section

diff --git a/src/components/Product/ProductAnalytics/index.tsx b/src/components/Product/ProductAnalytics/index.tsx
@@ -1,5 +1,5 @@
 import CloudinaryImage from 'components/CloudinaryImage'
-import React from 'react'
+import React, { useState } from 'react'
 import Link from 'components/Link'
 import { StaticImage } from 'gatsby-plugin-image'
 import {
@@ -45,6 +45,8 @@ import MobileSlides from 'components/Products/MobileSlides'
 import { SEO } from 'components/seo'
 import { useLayoutData } from 'components/Layout/hooks'
 import Plans from 'components/Pricing/Plans'
+import SideModal from '../../Modal/SideModal'
+import Profile from '../../Team/Profile'
 
 const product = {
     slug: 'product-analytics',
@@ -761,13 +763,17 @@ export const ProductProductAnalytics = () => {
         }
     `)
     const { fullWidthContent } = useLayoutData()
+    const [activeProfile, setActiveProfile] = useState(false)
     return (
         <>
             <SEO
                 title="Product Analytics - PostHog"
                 description="PostHog is the only product analytics platform built to natively work with Session Replay, Feature Flags, Experiments, and Surveys."
                 image={`/images/og/product-analytics.jpg`}
             />
+            <SideModal open={!!activeProfile} setOpen={setActiveProfile}>
+                {activeProfile && <Profile profile={{ ...activeProfile }} />}
+            </SideModal>
             <div className={`${fullWidthContent ? 'max-w-full px-8' : 'max-w-7xl mx-auto'} px-5 py-10 md:pt-20 pb-0`}>
                 <Hero
                     color="blue"
@@ -996,7 +1002,7 @@ export const ProductProductAnalytics = () => {
                         PostHog works in small teams. The <Link to={teamSlug}>{team}</Link> team is responsible for
                         building {product.lowercase}.
                     </p>
-                    <TeamMembers teamName={team} />
+                    <TeamMembers teamName={team} setActiveProfile={setActiveProfile} />
                 </section>
 
                 <section id="roadmap" className="mb-20 px-5">

diff --git a/src/components/Product/SessionReplay/index.tsx b/src/components/Product/SessionReplay/index.tsx
@@ -1,5 +1,5 @@
 import CloudinaryImage from 'components/CloudinaryImage'
-import React from 'react'
+import React, { useState } from 'react'
 import Link from 'components/Link'
 import { StaticImage } from 'gatsby-plugin-image'
 import {
@@ -42,6 +42,8 @@ import Install from '../Install'
 import { SEO } from 'components/seo'
 import { useLayoutData } from 'components/Layout/hooks'
 import Plans from 'components/Pricing/Plans'
+import SideModal from '../../Modal/SideModal'
+import Profile from '../../Team/Profile'
 
 const product = {
     slug: 'session-replay',
@@ -390,13 +392,17 @@ export const ProductSessionReplay = () => {
         }
     `)
     const { fullWidthContent } = useLayoutData()
+    const [activeProfile, setActiveProfile] = useState(false)
     return (
         <>
             <SEO
                 title="Session Replay - PostHog"
                 description="Session Replay helps you diagnose issues and understand user behavior in your product, mobile app, or website."
                 image={`/images/og/session-replay.jpg`}
             />
+            <SideModal open={!!activeProfile} setOpen={setActiveProfile}>
+                {activeProfile && <Profile profile={{ ...activeProfile }} />}
+            </SideModal>
             <div className={`${fullWidthContent ? 'max-w-full px-8' : 'max-w-7xl mx-auto'} px-5 py-10 md:pt-20 pb-0`}>
                 <Hero
                     color="yellow"
@@ -613,7 +619,7 @@ export const ProductSessionReplay = () => {
                         PostHog works in small teams. The <Link to={teamSlug}>{team}</Link> team is responsible for
                         building {product.lowercase}.
                     </p>
-                    <TeamMembers teamName={team} />
+                    <TeamMembers teamName={team} setActiveProfile={setActiveProfile} />
                 </section>
 
                 <section id="roadmap" className="mb-20 px-5">

diff --git a/src/components/Product/Surveys/index.tsx b/src/components/Product/Surveys/index.tsx
@@ -1,5 +1,5 @@
 import CloudinaryImage from 'components/CloudinaryImage'
-import React from 'react'
+import React, { useState } from 'react'
 import Link from 'components/Link'
 import { StaticImage } from 'gatsby-plugin-image'
 import {
@@ -38,6 +38,8 @@ import { FAQ } from 'components/Products/FAQ'
 import { SEO } from 'components/seo'
 import { useLayoutData } from 'components/Layout/hooks'
 import Plans from 'components/Pricing/Plans'
+import SideModal from '../../Modal/SideModal'
+import Profile from '../../Team/Profile'
 
 const product = {
     slug: 'surveys',
@@ -384,13 +386,17 @@ export const ProductSurveys = () => {
         }
     `)
     const { fullWidthContent } = useLayoutData()
+    const [activeProfile, setActiveProfile] = useState(false)
     return (
         <>
             <SEO
                 title="Surveys - PostHog"
                 description="Ask anything with no-code surveys – or use the API for complete control."
                 image={`/images/og/surveys.jpg`}
             />
+            <SideModal open={!!activeProfile} setOpen={setActiveProfile}>
+                {activeProfile && <Profile profile={{ ...activeProfile }} />}
+            </SideModal>
             <div className={`${fullWidthContent ? 'max-w-full px-8' : 'max-w-7xl mx-auto'} px-5 py-10 md:pt-20 pb-0`}>
                 <Hero
                     color="salmon"
@@ -595,7 +601,7 @@ export const ProductSurveys = () => {
                         PostHog works in small teams. The <Link to={teamSlug}>{team}</Link> team is responsible for
                         building {product.lowercase}.
                     </p>
-                    <TeamMembers teamName={team} />
+                    <TeamMembers teamName={team} setActiveProfile={setActiveProfile} />
                 </section>
 
                 <section id="roadmap" className="mb-20 px-5">

diff --git a/src/components/Product/TeamMembers.tsx b/src/components/Product/TeamMembers.tsx
@@ -2,7 +2,7 @@ import { TeamMember, teamQuery } from 'components/People'
 import { useStaticQuery } from 'gatsby'
 import React from 'react'
 
-export default function TeamMembers({ teamName }) {
+export default function TeamMembers({ teamName, setActiveProfile }) {
     const { team } = useStaticQuery(teamQuery)
 
     const teamMembers = team.teamMembers.filter((teamMember) =>
@@ -22,7 +22,7 @@ export default function TeamMembers({ teamName }) {
             )}
             <ul className="list-none m-0 p-0 grid md:grid-cols-2 lg:grid-cols-3 gap-4 mt-20">
                 {teamMembers.map((teamMember, index) => {
-                    return <TeamMember key={index} {...teamMember} />
+                    return <TeamMember key={index} {...teamMember} setActiveProfile={setActiveProfile} />
                 })}
             </ul>
         </>