src/components/ViewToggle.tsx - master - aaronair/Test_task_rt_solution

src/components/ViewToggle.tsx
79 строк2 KB
Ilikedrinkpivo
first_commit
28 май 2026, 14:51
28 май 2026, 14:51b4498fc
import { cn } from "@/lib/cn";

export type ViewMode = "cards" | "table";

interface Props {
  value: ViewMode;
  onChange: (value: ViewMode) => void;
}

export function ViewToggle({ value, onChange }: Props) {
  const buttons: { value: ViewMode; label: string; icon: JSX.Element }[] = [
    {
      value: "cards",
      label: "Карточки",
      icon: (
        <svg
          viewBox="0 0 24 24"
          className="h-4 w-4"
          fill="none"
          stroke="currentColor"
          strokeWidth={1.8}
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <rect x="3" y="3" width="7" height="7" rx="1.5" />
          <rect x="14" y="3" width="7" height="7" rx="1.5" />
          <rect x="3" y="14" width="7" height="7" rx="1.5" />
          <rect x="14" y="14" width="7" height="7" rx="1.5" />
        </svg>
      ),
    },
    {
      value: "table",
      label: "Таблица",
      icon: (
        <svg
          viewBox="0 0 24 24"
          className="h-4 w-4"
          fill="none"
          stroke="currentColor"
          strokeWidth={1.8}
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path d="M3 6h18M3 12h18M3 18h18" />
        </svg>
      ),
    },
  ];

  return (
    <div
      role="tablist"
      className="inline-flex p-1 rounded-lg bg-surface-muted border border-ink-300/40"
    >
      {buttons.map((b) => {
        const active = b.value === value;
        return (
          <button
            key={b.value}
            type="button"
            role="tab"
            aria-selected={active}
            onClick={() => onChange(b.value)}
            className={cn(
              "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
              active
                ? "bg-surface-card text-ink-900 shadow-sm"
                : "text-ink-500 hover:text-ink-700",
            )}
          >
            {b.icon}
            {b.label}
          </button>
        );
      })}
    </div>
  );
}