feat(02-02): add thread hooks, UI store, tab navigation, and thread list
- Create useThreads/useCandidates TanStack Query hooks - Extend uiStore with candidate panel and resolve dialog state - Add ThreadTabs component for gear/planning tab switching - Add ThreadCard component with candidate count and price range chips - Refactor index.tsx to tabbed HomePage with PlanningView - Create placeholder thread detail route for navigation target
This commit is contained in:
33
src/client/components/ThreadTabs.tsx
Normal file
33
src/client/components/ThreadTabs.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
interface ThreadTabsProps {
|
||||
active: "gear" | "planning";
|
||||
onChange: (tab: "gear" | "planning") => void;
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{ key: "gear" as const, label: "My Gear" },
|
||||
{ key: "planning" as const, label: "Planning" },
|
||||
];
|
||||
|
||||
export function ThreadTabs({ active, onChange }: ThreadTabsProps) {
|
||||
return (
|
||||
<div className="flex border-b border-gray-200">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.key}
|
||||
type="button"
|
||||
onClick={() => onChange(tab.key)}
|
||||
className={`px-4 py-2.5 text-sm font-medium transition-colors relative ${
|
||||
active === tab.key
|
||||
? "text-blue-600"
|
||||
: "text-gray-500 hover:text-gray-700"
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
{active === tab.key && (
|
||||
<span className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600 rounded-t" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user