apps/web/components/views/add-memory/tab-button.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import type { LucideIcon } from 'lucide-react';

interface TabButtonProps {
  icon: LucideIcon;
  label: string;
  isActive: boolean;
  onClick: () => void;
}

export function TabButton({
  icon: Icon,
  label,
  isActive,
  onClick,
}: TabButtonProps) {
  return (
    <button
      className={`flex items-center gap-1.5 text-xs sm:text-xs px-4 sm:px-3 py-2 sm:py-1 h-8 sm:h-6 rounded-sm transition-colors whitespace-nowrap min-w-0 ${
        isActive ? 'bg-white/10' : 'hover:bg-white/5'
      }`}
      onClick={onClick}
      type="button"
    >
      <Icon className="h-4 w-4 sm:h-3 sm:w-3" />
      {label}
    </button>
  );
}