website refactor

apps/website/client-wrapper/TeamDetailPageClient.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import type { TeamDetailViewData } from '@/lib/view-data/TeamDetailViewData';
+import { TeamDetailTemplate } from '@/templates/TeamDetailTemplate';
+
+type Tab = 'overview' | 'roster' | 'standings' | 'admin';
+
+interface TeamDetailPageClientProps {
+  viewData: TeamDetailViewData;
+}
+
+export function TeamDetailPageClient({ viewData }: TeamDetailPageClientProps) {
+  const router = useRouter();
+  
+  // UI state only (no business logic)
+  const [activeTab, setActiveTab] = useState<Tab>('overview');
+  const [loading] = useState(false);
+  
+  // Event handlers
+  const handleTabChange = (tab: Tab) => {
+    setActiveTab(tab);
+  };
+  
+  const handleUpdate = () => {
+    // Trigger a refresh by reloading the page
+    router.refresh();
+  };
+  
+  const handleRemoveMember = (driverId: string) => {
+    // This would call an API to remove the member
+    // For now, just log
+    console.log('Remove member:', driverId);
+    // In a real implementation, you'd have a mutation hook here
+    alert('Remove member functionality would be implemented here');
+  };
+  
+  const handleGoBack = () => {
+    router.back();
+  };
+  
+  return (
+    <TeamDetailTemplate
+      viewData={viewData}
+      activeTab={activeTab}
+      loading={loading}
+      onTabChange={handleTabChange}
+      onUpdate={handleUpdate}
+      onRemoveMember={handleRemoveMember}
+      onGoBack={handleGoBack}
+    />
+  );
+}