Files
gridpilot.gg/apps/website/app/teams/[id]/TeamDetailPageClient.tsx
2026-01-14 10:51:05 +01:00

62 lines
1.8 KiB
TypeScript

'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 handleChangeRole = (driverId: string, newRole: 'owner' | 'admin' | 'member') => {
// This would call an API to change the role
console.log('Change role:', driverId, newRole);
// In a real implementation, you'd have a mutation hook here
alert('Change role functionality would be implemented here');
};
const handleGoBack = () => {
router.back();
};
return (
<TeamDetailTemplate
viewData={viewData}
activeTab={activeTab}
loading={loading}
onTabChange={handleTabChange}
onUpdate={handleUpdate}
onRemoveMember={handleRemoveMember}
onChangeRole={handleChangeRole}
onGoBack={handleGoBack}
/>
);
}