Alfred/src/web/features/projects/components/ProjectToolbar.tsx

import { PlusOutlined } from "@ant-design/icons";
import { Button, Flex, Input, Space, Tabs } from "antd";
import { useState } from "react";

import type { ProjectStatus } from "../../../../shared/api";

interface ProjectToolbarProps {
  activeTab: ProjectStatus;
  keyword: string;
  onSearch: (value: string) => void;
  onSearchClear: () => void;
  onTabChange: (key: string) => void;
  openCreateDialog: () => void;
}

const STATUS_TAB_ITEMS = [
  { key: "active", label: "进行中" },
  { key: "archived", label: "已归档" },
];

export function ProjectToolbar({
  activeTab,
  keyword,
  onSearch,
  onSearchClear,
  onTabChange,
  openCreateDialog,
}: ProjectToolbarProps) {
  const [draftKeyword, setDraftKeyword] = useState(keyword);

  return (
    <Flex align="center" gap="large" justify="space-between" wrap="wrap">
      <Tabs activeKey={activeTab} items={STATUS_TAB_ITEMS} onChange={onTabChange} />
      <Space size="small">
        <Input.Search
          allowClear
          enterButton="搜索"
          onChange={(event) => setDraftKeyword(event.target.value)}
          onClear={() => {
            setDraftKeyword("");
            onSearchClear();
          }}
          onSearch={(value) => onSearch(value)}
          placeholder="搜索名称或描述"
          value={draftKeyword}
        />
        {activeTab === "active" && (
          <Button icon={<PlusOutlined />} onClick={openCreateDialog} type="primary">
            新建项目
          </Button>
        )}
      </Space>
    </Flex>
  );
}