first

apps/web/modules/saas/shared/components/TabGroup.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import Link from "next/link";
+import { useSelectedLayoutSegment } from "next/navigation";
+import { useMemo } from "react";
+
+export function TabGroup({
+	items,
+	className,
+}: {
+	items: { label: string; href: string; segment: string }[];
+	className?: string;
+}) {
+	const selectedSegment = useSelectedLayoutSegment();
+	const activeItem = useMemo(() => {
+		return items.find((item) => item.segment === selectedSegment);
+	}, [items, selectedSegment]);
+
+	return (
+		<div className={` flex border-b-2 ${className}`}>
+			{items.map((item) => (
+				<Link
+					key={item.href}
+					href={item.href}
+					className={`-mb-0.5 block border-b-2 px-6 py-3 ${
+						item === activeItem
+							? "border-primary font-bold"
+							: "border-transparent"
+					}`}
+				>
+					{item.label}
+				</Link>
+			))}
+		</div>
+	);
+}