backerup-website/frontend/app/components/ProductTabs.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

export default function ProductTabs() {
  const pathname = usePathname();
  const isDaterup = pathname.startsWith("/daterup");

  return (
    <div className="flex items-center gap-1 rounded-xl border border-white/8 bg-white/3 p-1">
      <Link
        href="/"
        className={`px-4 py-1.5 rounded-lg text-sm font-semibold transition-all ${
          !isDaterup
            ? "bg-cyan-500/20 text-cyan-300 border border-cyan-500/30 shadow-sm"
            : "text-slate-400 hover:text-slate-200 hover:bg-white/5"
        }`}
      >
        Backerup
      </Link>
      <Link
        href="/daterup"
        className={`px-4 py-1.5 rounded-lg text-sm font-semibold transition-all ${
          isDaterup
            ? "bg-violet-500/20 text-violet-300 border border-violet-500/30 shadow-sm"
            : "text-slate-400 hover:text-slate-200 hover:bg-white/5"
        }`}
      >
        Daterup
      </Link>
    </div>
  );
}