interns and visitors use the dialog component now (since they dont have enough content to justify their own page)

Author: jonsch1

src/components/TeamMemberCardDialog.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"
+import TeamMemberCard from "./TeamMemberCard"
+import type { TeamMemberProps } from "@/types/types"
+
+interface TeamMemberCardDialogProps extends TeamMemberProps {
+  isOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export default function TeamMemberCardDialog({
+  isOpen,
+  onOpenChange,
+  ...props
+}: TeamMemberCardDialogProps) {
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogTrigger asChild>
+        <div className="flex flex-col items-center space-y-4 rounded-lg border p-6 text-center cursor-pointer hover:bg-accent/50 transition-colors">
+          <img 
+            src={props.image} 
+            alt={props.name}
+            className="h-24 w-24 rounded-full object-cover"
+          />
+          <div className="space-y-2">
+            <h3 className="text-xl font-bold">{props.name}</h3>
+            <p className="text-sm text-muted-foreground">{props.role}</p>
+          </div>
+        </div>
+      </DialogTrigger>
+      <DialogContent className="max-w-[1024px] max-h-[85vh] overflow-y-auto">
+        <TeamMemberCard {...props} />
+      </DialogContent>
+    </Dialog>
+  )
+} 

src/components/TeamMemberCardLink.tsx

@@ -1,7 +1,7 @@
 import type { TeamMemberProps } from "@/types/types"
 import {BASE_PATH} from '../lib/utils';
 
-export default function TeamMemberCardDialog(props: TeamMemberProps) {
+export default function TeamMemberCardLink(props: TeamMemberProps) {
   const slug = props.name.toLowerCase().replace(/\s+/g, '-')
 
   return (

src/pages/team.astro

@@ -1,10 +1,12 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import teamData from '../content/team/team.json';
-import TeamMemberCardDialog from '../components/TeamMemberCardLink';
+import TeamMemberCardLink from '../components/TeamMemberCardLink';
+import TeamMemberCardDialog from '../components/TeamMemberCardDialog';
 import AlumniCard from '../components/AlumniCard.astro';
 import { getInternalLink } from '../lib/utils';
 import { getCollection } from 'astro:content';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 // Interfaces for GitHub team data
 interface TeamMember {
   login: string;
@@ -50,7 +52,7 @@ const internsAndVisitorsTeam = githubTeamData?.teams.find(team => team.slug.toLo
       <h2 class="mb-8 text-2xl font-bold">Group Leader</h2>
       <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
         {teamData.current.filter(member => member.role.includes("Group Leader")).map((member) => (
-          <TeamMemberCardDialog
+          <TeamMemberCardLink
             client:load
             name={member.name}
             role={member.role}
@@ -71,7 +73,7 @@ const internsAndVisitorsTeam = githubTeamData?.teams.find(team => team.slug.toLo
       <h2 class="mb-8 text-2xl font-bold">Administration</h2>
       <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
         {teamData.current.filter(member => member.role.includes("Administration")).map((member) => (
-          <TeamMemberCardDialog
+          <TeamMemberCardLink
             client:load
             name={member.name}
             role={member.role}
@@ -92,7 +94,7 @@ const internsAndVisitorsTeam = githubTeamData?.teams.find(team => team.slug.toLo
       <h2 class="mb-8 text-2xl font-bold">Staff Scientists</h2>
       <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
         {teamData.current.filter(member => member.role.includes("Staff Scientist")).map((member) => (
-          <TeamMemberCardDialog
+          <TeamMemberCardLink
             client:load
             name={member.name}
             role={member.role}
@@ -113,7 +115,7 @@ const internsAndVisitorsTeam = githubTeamData?.teams.find(team => team.slug.toLo
       <h2 class="mb-8 text-2xl font-bold">Bioinformaticians</h2>
       <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
         {teamData.current.filter(member => member.role.includes("Bioinformatician")).map((member) => (
-          <TeamMemberCardDialog
+          <TeamMemberCardLink
             client:load
             name={member.name}
             role={member.role}
@@ -134,7 +136,7 @@ const internsAndVisitorsTeam = githubTeamData?.teams.find(team => team.slug.toLo
       <h2 class="mb-8 text-2xl font-bold">Postdocs</h2>
       <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
         {teamData.current.filter(member => member.role.includes("Postdoc")).map((member) => (
-          <TeamMemberCardDialog
+          <TeamMemberCardLink
             client:load
             name={member.name}
             role={member.role}
@@ -155,7 +157,7 @@ const internsAndVisitorsTeam = githubTeamData?.teams.find(team => team.slug.toLo
       <h2 class="mb-8 text-2xl font-bold">PhD Students</h2>
       <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
         {teamData.current.filter(member => member.role.includes("PhD Student")).map((member) => (
-          <TeamMemberCardDialog
+          <TeamMemberCardLink
             client:load
             name={member.name}
             role={member.role}
@@ -176,7 +178,7 @@ const internsAndVisitorsTeam = githubTeamData?.teams.find(team => team.slug.toLo
       <h2 class="mb-8 text-2xl font-bold">Associated Members</h2>
       <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
         {teamData.current.filter(member => member.role.includes("Associated Member")).map((member) => (
-          <TeamMemberCardDialog
+          <TeamMemberCardLink
             client:load
             name={member.name}
             role={member.role}