Constant data is added and resuable tabs added

2026-07-21 18:59:27 +05:30
parent 0c9151b3a0
commit 06bbfe06fb
10 changed files with 133 additions and 106 deletions
--- a/utils/roundedFilters.tsx
+++ b/utils/roundedFilters.tsx
@@ -0,0 +1,44 @@
+import { FilterTabsProps } from "@/constants/types";
+
+export default function FilterTabs({
+  options = [],
+  activeFilter,
+  onChange,
+  className = "",
+}: FilterTabsProps) {
+  if (!Array.isArray(options) || options.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={`flex items-center gap-2.5 overflow-x-auto no-scrollbar py-1 ${className}`}>
+      {options.map((filter) => {
+        const isActive = activeFilter === filter.label;
+
+        return (
+          <button
+            key={filter.label}
+            type="button"
+            onClick={() => onChange(filter.label)}
+            className={`flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-medium transition-all whitespace-nowrap cursor-pointer ${
+              isActive
+                ? "bg-teal-950/40 text-teal-400 border border-teal-500/50"
+                : "bg-[#0b1727] text-slate-400 border border-slate-800/80 hover:text-slate-200"
+            }`}
+          >
+            <span>{filter.label}</span>
+            {filter.count !== undefined && (
+              <span
+                className={`font-mono text-[11px] ${
+                  isActive ? "text-teal-400 font-bold" : "text-slate-400"
+                }`}
+              >
+                {filter.count}
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}