feat: add user centric features

2026-05-30 23:44:08 +05:30
parent 7bd2952caa
commit dcdd2383c6
63 changed files with 16783 additions and 1735 deletions
@@ -0,0 +1,71 @@
+"use client";
+
+/**
+ * ProfileTabs — Instagram-style icon tab strip used under ProfileHeader.
+ *
+ * Renders a horizontal row of equal-width icon tabs. The active tab gets
+ * a top-border indicator and stronger color. Labels are screen-reader
+ * only by default (Instagram pattern), but a `showLabels` prop opts them
+ * back in for surfaces with more real estate.
+ */
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+export type ProfileTab = {
+  href: string;
+  label: string;
+  icon: React.ReactNode;
+  /** Additional pathnames that should mark this tab active. Used to keep
+   *  the Posts tab lit while the user is on the scroll feed at
+   *  /u/<handle>/posts (a sibling route to /u/<handle>). */
+  activeFor?: string[];
+};
+
+export function ProfileTabs({
+  tabs,
+  showLabels = false,
+}: {
+  tabs: ProfileTab[];
+  showLabels?: boolean;
+}) {
+  const pathname = usePathname();
+  return (
+    <nav aria-label="Profile sections" className="border-b border-border">
+      <ul className="flex items-stretch max-w-md mx-auto">
+        {tabs.map((tab) => {
+          const active =
+            pathname === tab.href ||
+            (tab.activeFor?.includes(pathname) ?? false);
+          return (
+            <li key={tab.href} className="flex-1">
+              <Link
+                href={tab.href}
+                aria-current={active ? "page" : undefined}
+                title={tab.label}
+                className={cn(
+                  "h-12 -mb-px flex items-center justify-center gap-2 border-b-2",
+                  active
+                    ? "border-foreground text-foreground"
+                    : "border-transparent text-muted-foreground hover:text-foreground",
+                )}
+              >
+                <span>{tab.icon}</span>
+                <span
+                  className={cn(
+                    "text-[0.65rem] uppercase tracking-[0.2em] font-semibold",
+                    showLabels ? "" : "sr-only",
+                  )}
+                >
+                  {tab.label}
+                </span>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}
+