Files
spliit/src/app/groups/[groupId]/group-tabs.tsx
Sebastien Castiel aa95497aab Improve design
2023-12-14 17:15:28 -05:00

31 lines
777 B
TypeScript

'use client'
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { usePathname, useRouter } from 'next/navigation'
type Props = {
groupId: string
}
export function GroupTabs({ groupId }: Props) {
const pathname = usePathname()
const value =
pathname.replace(/\/groups\/[^\/]+\/([^/]+).*/, '$1') || 'expenses'
const router = useRouter()
return (
<Tabs
value={value}
className="[&>*]:border"
onValueChange={(value) => {
router.push(`/groups/${groupId}/${value}`)
}}
>
<TabsList>
<TabsTrigger value="expenses">Expenses</TabsTrigger>
<TabsTrigger value="balances">Balances</TabsTrigger>
<TabsTrigger value="edit">Settings</TabsTrigger>
</TabsList>
</Tabs>
)
}