50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
import { Link, Outlet, useLocation, useNavigate, useParams } from 'react-router-dom'
|
|
import { ArrowLeft } from 'lucide-react'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
|
|
|
export default function TryoutLayout() {
|
|
const { id } = useParams<{ id: string }>()
|
|
const location = useLocation()
|
|
const navigate = useNavigate()
|
|
|
|
let currentTab = 'questions'
|
|
if (location.pathname.includes('/questions')) currentTab = 'questions'
|
|
if (location.pathname.includes('/attempts')) currentTab = 'attempts'
|
|
if (location.pathname.includes('/normalization')) currentTab = 'normalization'
|
|
if (location.pathname.includes('/settings')) currentTab = 'settings'
|
|
|
|
const handleTabChange = (value: string) => {
|
|
navigate(`/admin/tryouts/${id}/${value}`)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-4">
|
|
<Button variant="outline" size="icon" asChild>
|
|
<Link to="/admin/dashboard">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">Tryout Workspace</h1>
|
|
<p className="text-muted-foreground mt-1">ID: {id}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Tabs value={currentTab} onValueChange={handleTabChange} className="w-full">
|
|
<TabsList className="grid w-full grid-cols-4 md:w-[560px]">
|
|
<TabsTrigger value="questions">Questions</TabsTrigger>
|
|
<TabsTrigger value="attempts">Attempts</TabsTrigger>
|
|
<TabsTrigger value="normalization">Normalization</TabsTrigger>
|
|
<TabsTrigger value="settings">Settings</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
|
|
<div className="mt-6 bg-card border rounded-xl p-6 shadow-sm min-h-[500px]">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|