Tabs

src/app/groups/[groupId]/group-tabs.tsx

@@ -0,0 +1,30 @@
+'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="mb-4"
+      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>
+  )
+}