35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
|
import { type Component } from "solid-js";
|
||
|
|
import type { TrackerViewMode } from "./types";
|
||
|
|
|
||
|
|
export interface TabBarProps {
|
||
|
|
mode: () => TrackerViewMode;
|
||
|
|
onModeChange: (mode: TrackerViewMode) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const TabBar: Component<TabBarProps> = (props) => {
|
||
|
|
return (
|
||
|
|
<div class="flex border-b border-gray-300 bg-gray-50">
|
||
|
|
<button
|
||
|
|
class={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
|
||
|
|
props.mode() === "history"
|
||
|
|
? "bg-white text-blue-600 border-b-2 border-blue-600"
|
||
|
|
: "text-gray-600 hover:text-gray-800 hover:bg-gray-100"
|
||
|
|
}`}
|
||
|
|
onClick={() => props.onModeChange("history")}
|
||
|
|
>
|
||
|
|
📜 历史
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
class={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
|
||
|
|
props.mode() === "tracker"
|
||
|
|
? "bg-white text-blue-600 border-b-2 border-blue-600"
|
||
|
|
: "text-gray-600 hover:text-gray-800 hover:bg-gray-100"
|
||
|
|
}`}
|
||
|
|
onClick={() => props.onModeChange("tracker")}
|
||
|
|
>
|
||
|
|
📋 追踪
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|