58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
import React from "react";
|
|
|
|
export type ViewMode = "kanban" | "dependencies";
|
|
|
|
interface BoardTabsProps {
|
|
activeView: ViewMode;
|
|
onViewChange: (view: ViewMode) => void;
|
|
}
|
|
|
|
export default function BoardTabs({ activeView, onViewChange }: BoardTabsProps) {
|
|
return (
|
|
<div className="flex border-b border-gray-200 dark:border-gray-700 mb-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => onViewChange("kanban")}
|
|
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
|
|
activeView === "kanban"
|
|
? "border-blue-500 text-blue-600 dark:text-blue-400"
|
|
: "border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
|
|
}`}
|
|
>
|
|
<span className="flex items-center gap-2">
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"
|
|
/>
|
|
</svg>
|
|
Kanban Board
|
|
</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => onViewChange("dependencies")}
|
|
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
|
|
activeView === "dependencies"
|
|
? "border-blue-500 text-blue-600 dark:text-blue-400"
|
|
: "border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
|
|
}`}
|
|
>
|
|
<span className="flex items-center gap-2">
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
|
|
/>
|
|
</svg>
|
|
Dependencies
|
|
</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|