/ var / www / html / cqt / src / components / [ HOME SHELL ]

Name	Size	Permission	Action
ui	[ DIR ]	drwxr-xr-x
About.tsx	2.85 KB	-rw-r--r--
AdminLayout.tsx	4.85 KB	-rw-r--r--
Contact.tsx	10.4 KB	-rw-r--r--
DataTable.tsx	4.98 KB	-rw-r--r--
Footer.tsx	12.02 KB	-rw-r--r--
Hero.tsx	11.92 KB	-rw-r--r--
NavLink.tsx	751 B	-rw-r--r--
Navigation.tsx	24.92 KB	-rw-r--r--
News.tsx	3.48 KB	-rw-r--r--
ParticleNetwork.tsx	4.09 KB	-rw-r--r--
ProtectedRoute.tsx	813 B	-rw-r--r--
QuantumCircuit.tsx	3.47 KB	-rw-r--r--
RebuildWebsiteButton.tsx	4.28 KB	-rw-r--r--
Research.tsx	3.68 KB	-rw-r--r--
StatsCard.tsx	4.87 KB	-rw-r--r--
Team.tsx	6.63 KB	-rw-r--r--

Code Editor : Team.tsx

import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Mail, ExternalLink } from "lucide-react";
import { usePeople } from "@/lib/dataLoader";
import { NavLink } from "@/components/NavLink";
import { useMemo } from "react";

interface TeamProps {
  showOnlyFaculty?: boolean;
}

const Team = ({ showOnlyFaculty = false }: TeamProps) => {
  const { data: teamMembers, isLoading, isError } = usePeople();

// Filter to only faculty if showOnlyFaculty is true
  const filteredMembers = useMemo(() => {
    if (!teamMembers) return null;
    if (showOnlyFaculty) {
      return teamMembers.filter((member: any) => 
        member.role?.toLowerCase().includes('faculty') || 
        member.role?.toLowerCase().includes('professor')
      );
    }
    return teamMembers;
  }, [teamMembers, showOnlyFaculty]);

if (isLoading) return <div className="py-24 text-center">Loading team...</div>;
  if (isError) return <div className="py-24 text-center">Failed to load team data</div>;

return (
    <section id="people" className="py-24 bg-gradient-to-b from-muted/30 to-background">
      <div className="container mx-auto px-4">
        <div className="max-w-6xl mx-auto">
          {/* Header */}
          <div className="mb-16 animate-fade-in">
            <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">
              {showOnlyFaculty ? "Our Faculty" : "Our Team"}
            </h2>
            <p className="text-xl text-muted-foreground max-w-3xl leading-relaxed">
              {showOnlyFaculty 
                ? "Meet our distinguished faculty members leading groundbreaking research in quantum technology." 
                : "Meet the brilliant minds driving quantum innovation at CQT. Our diverse team of researchers brings together expertise from physics, computer science, and engineering."
              }
            </p>
          </div>

{/* Team grouped by role */}
          {filteredMembers && (
            (() => {
              const grouped = filteredMembers.reduce((acc: any, person: any) => {
                (acc[person.role] = acc[person.role] || []).push(person);
                return acc;
              }, {} as Record<string, any[]>);

return Object.entries(grouped).map(([role, people]) => {
                const roleId = role.toLowerCase() === 'faculty' ? 'faculty' : 
                              role.toLowerCase() === 'staff' ? 'staff' : 
                              role.toLowerCase() === 'phd scholar' ? 'phd-scholar' : 
                              role.toLowerCase().replace(/\s+/g, '-');
                return (
                  <div key={role} id={roleId} className="mb-12">
                    <h3 className="text-2xl font-bold mb-6 text-foreground">{role}</h3>
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                      {(Array.isArray(people) ? people : []).map((member: any, index: number) => (
                        <NavLink to={`/people/${member.id}`} key={member.id} className="block">
                          <Card
                            className="relative overflow-hidden rounded-xl transition-all duration-300 md:hover:-translate-y-2 md:hover:shadow-2xl border-border group h-80 min-h-[320px] touch-manipulation"
                            style={{ animationDelay: `${index * 0.06}s` }}
                          >
                            {/* Background image that expands on hover */}
                            <div className="absolute inset-0 transition-all duration-500">
                              {member.photo ? (
                                <div
                                  className="absolute inset-0 bg-cover bg-center transition-transform duration-700 md:group-hover:scale-105"
                                  style={{ backgroundImage: `url(${member.photo})` }}
                                  aria-hidden="true"
                                />
                              ) : (
                                <div 
                                  className="absolute inset-0 flex items-center justify-center text-white text-3xl md:text-4xl font-bold"
                                  style={{ background: 'linear-gradient(135deg, hsl(215 80% 45%), hsl(270 60% 55%))' }}
                                >
                                  {member.name.split(' ').map((n: string) => n[0]).join('')}
                                </div>
                              )}
                              <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent pointer-events-none" />
                            </div>

{/* Info area - always visible on mobile, slides on desktop hover */}
                            <div className="absolute bottom-0 left-0 right-0 bg-card/95 backdrop-blur-sm p-4 transition-all duration-500 md:group-hover:translate-y-full md:group-hover:opacity-0">
                              <div className="text-center">
                                <h4 className="text-base md:text-lg font-bold text-foreground mb-1 line-clamp-1">{member.name}</h4>
                                <p className="text-xs md:text-sm text-primary font-semibold mb-2 line-clamp-1">{member.title}</p>
                                <p className="text-xs md:text-sm text-muted-foreground mb-3 line-clamp-2">{member.specialization}</p>
                                <a href={`mailto:${member.email}`} onClick={(e) => e.stopPropagation()} className="inline-flex items-center gap-1 text-xs text-secondary hover:underline">
                                  <Mail className="h-3 w-3" />
                                  <span>Email</span>
                                </a>
                              </div>
                            </div>
                          </Card>
                        </NavLink>
                      ))}
                    </div>
                  </div>
                );
              });
            })()
          )}

{/* CTA - Only show "View All" button if we're showing only faculty */}
          {showOnlyFaculty && (
            <div className="text-center animate-fade-in mt-8">
              <NavLink to="/team">
                <Button
                  size="lg"
                  variant="outline"
                  className="border-2 border-primary hover:bg-primary hover:text-primary-foreground"
                >
                  View All Team Members
                  <ExternalLink className="ml-2 h-4 w-4" />
                </Button>
              </NavLink>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

export default Team;

Urban Research Lab

Urban Research Lab

The Urban Research Lab (URL) at IIIT-Delhi was established in 2020, during a time when the pandemic brought the complexities of urban life more visible than ever. What started as an initiative by faculty and students has grown into a collaborative space for critically exploring and reimagining the urban questions through research, dialogue, and interdisciplinary engagement.