Rotas Paralelas

// app/layout.tsx
export default function Layout({
  children,
  analytics,
  team,
}: {
  children: React.ReactNode;
  analytics: React.ReactNode;
  team: React.ReactNode;
}) {
  return (
    <div>
      {children}
      <div className="grid grid-cols-2 gap-4">
        {analytics}
        {team}
      </div>
    </div>
  );
}

// app/dashboard/layout.tsx - Dashboard com três slots paralelos
export default function DashboardLayout({
  children,
  metrics,
  activity,
}: {
  children: React.ReactNode;
  metrics: React.ReactNode;
  activity: React.ReactNode;
}) {
  return (
    <div className="p-6">
      <h1 className="mb-6 text-2xl font-bold">Dashboard</h1>
      <div className="mb-6">{children}</div>
      <div className="grid grid-cols-2 gap-6">
        <section>
          <h2 className="mb-2 text-lg font-semibold">Métricas</h2>
          {metrics}
        </section>
        <section>
          <h2 className="mb-2 text-lg font-semibold">Atividade</h2>
          {activity}
        </section>
      </div>
    </div>
  );
}

// app/dashboard/@metrics/page.tsx - Slot de Métricas
async function getMetrics() {
  const res = await fetch("https://api.example.com/metrics", {
    next: { revalidate: 60 },
  });
  return res.json();
}
 
export default async function MetricsPanel() {
  const metrics = await getMetrics();
 
  return (
    <div className="space-y-3 rounded-lg border p-4">
      <div className="flex justify-between">
        <span>Receita</span>
        <span className="font-bold">${metrics.revenue.toLocaleString()}</span>
      </div>
      <div className="flex justify-between">
        <span>Usuários</span>
        <span className="font-bold">{metrics.users.toLocaleString()}</span>
      </div>
      <div className="flex justify-between">
        <span>Conversão</span>
        <span className="font-bold">{metrics.conversion}%</span>
      </div>
    </div>
  );
}

// app/dashboard/@metrics/loading.tsx - Estado de carregamento independente
export default function MetricsLoading() {
  return (
    <div className="space-y-3 rounded-lg border p-4">
      {Array.from({ length: 3 }).map((_, i) => (
        <div key={i} className="flex justify-between">
          <div className="h-4 w-20 animate-pulse rounded bg-gray-200" />
          <div className="h-4 w-16 animate-pulse rounded bg-gray-200" />
        </div>
      ))}
    </div>
  );
}

// app/dashboard/@activity/page.tsx - Slot de Atividade
async function getActivity() {
  const res = await fetch("https://api.example.com/activity", {
    next: { revalidate: 30 },
  });
  return res.json();
}
 
export default async function ActivityPanel() {
  const items = await getActivity();
 
  return (
    <ul className="space-y-2 rounded-lg border p-4">
      {items.map((item: { id: string; message: string; time: string }) => (
        <li key={item.id} className="flex justify-between text-sm">
          <span>{item.message}</span>
          <span className="text-gray-500">{item.time}</span>
        </li>
      ))}
    </ul>
  );
}

// app/dashboard/@metrics/default.tsx - Fallback obrigatório
export default function MetricsDefault() {
  return null;
}
 
// app/dashboard/@activity/default.tsx - Fallback obrigatório
export default function ActivityDefault() {
  return null;
}

// app/dashboard/page.tsx - Conteúdo principal (renderizado em {children})
export default function DashboardPage() {
  return (
    <p className="text-gray-600">
      Bem-vindo ao seu dashboard. Métricas e atividade carregam independentemente abaixo.
    </p>
  );
}

// Renderização condicional baseada em autenticação
// app/dashboard/layout.tsx
import { auth } from "@/lib/auth";
 
export default async function DashboardLayout({
  children,
  admin,
  user,
}: {
  children: React.ReactNode;
  admin: React.ReactNode;
  user: React.ReactNode;
}) {
  const session = await auth();
  const isAdmin = session?.user?.role === "admin";
 
  return (
    <div>
      {children}
      {isAdmin ? admin : user}
    </div>
  );
}
 
// app/dashboard/@admin/page.tsx - Mostrado para administradores
// app/dashboard/@user/page.tsx - Mostrado para usuários regulares

// Slots com sub-rotas
// app/dashboard/@metrics/detailed/page.tsx
// Navegar para /dashboard/detailed renderiza isso no slot @metrics
// enquanto @activity mostra seu default.tsx (ou sua própria página /detailed)
 
export default function DetailedMetrics() {
  return <div>Visualização de métricas detalhadas</div>;
}

// Layout com slots de rota paralela
interface DashboardLayoutProps {
  children: React.ReactNode;    // Slot implícito (page.tsx)
  metrics: React.ReactNode;     // Slot @metrics
  activity: React.ReactNode;    // Slot @activity
}
 
// Páginas de slot têm as mesmas props que páginas regulares
interface SlotPageProps {
  params: Promise<Record<string, string>>;
  searchParams: Promise<Record<string, string | string[] | undefined>>;
}
 
// default.tsx não recebe props
// loading.tsx não recebe props
// error.tsx recebe { error, reset } (deve ser "use client")