(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1import { clsx } from "clsx";
2import React from "react";
3
4interface Tab {
5 id: string;
6 label: string;
7 badge?: number;
8}
9
10interface TabsProps {
11 tabs: Tab[];
12 activeTab: string;
13 onChange: (id: string) => void;
14 className?: string;
15}
16
17export default function Tabs({
18 tabs,
19 activeTab,
20 onChange,
21 className,
22}: TabsProps) {
23 return (
24 <div
25 className={clsx(
26 "flex max-w-full overflow-x-auto gap-0.5 bg-surface-100 dark:bg-surface-800 p-1 rounded-lg w-fit",
27 className,
28 )}
29 >
30 {tabs.map((tab) => (
31 <button
32 key={tab.id}
33 onClick={() => onChange(tab.id)}
34 className={clsx(
35 "px-3 py-1.5 text-[13px] font-medium rounded-md transition-all relative whitespace-nowrap",
36 activeTab === tab.id
37 ? "bg-white dark:bg-surface-700 text-surface-900 dark:text-white shadow-sm"
38 : "text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-200",
39 )}
40 >
41 {tab.label}
42 {tab.badge !== undefined && tab.badge > 0 && (
43 <span className="ml-1.5 inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1.5 text-[10px] font-bold rounded-full bg-primary-600 text-white">
44 {tab.badge > 99 ? "99+" : tab.badge}
45 </span>
46 )}
47 </button>
48 ))}
49 </div>
50 );
51}