Team

// app/team/page.tsx
import { notFound } from "next/navigation"
import { fetchTeam } from "@pandaidx/widgets/server"
import { TeamView } from "@/components/team-view"

export default async function TeamPage() {
  const data = await fetchTeam({ publicKey: process.env.NEXT_PUBLIC_PANDA_PUBLIC_KEY!, apiUrl: process.env.NEXT_PUBLIC_PANDA_API_URL })
  if (!data) notFound()
  return <TeamView data={data} />
}

// components/team-view.tsx
"use client"
import Image from "next/image"
import Link from "next/link"
import { useTeamGrid, type TeamGridData } from "@pandaidx/widgets/client"

export const TeamView = ({ data }: { data: TeamGridData }) => {
  const team = useTeamGrid({ data })
  return (
    <main className="mx-auto max-w-6xl px-4 py-16">
      {[["Management", team.management], ["Associates", team.associates]].map(([title, people]) => (
        <section key={title as string} className="mb-16">
          <h2 className="mb-8 text-3xl">{title as string}</h2>
          <div className="grid gap-8 md:grid-cols-3">
            {(people as typeof team.all).map((person) => (
              <Link key={person.key} href={person.href}>
                {person.image ? <Image src={person.image} alt={person.name} width={360} height={540} sizes="(min-width: 768px) 33vw, 100vw" className="aspect-[2/3] w-full object-cover" /> : null}
                <p className="mt-3 text-xl">{person.name}</p>
                <p className="opacity-70">{person.title}</p>
              </Link>
            ))}
          </div>
        </section>
      ))}
    </main>
  )
}