57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
/**
|
|
* 驗收頁面 - 底部操作按鈕列
|
|
* 手機版固定於底部，桌面版則正常排版
|
|
*/
|
|
|
|
import { PackageCheck } from "lucide-react";
|
|
import { Button } from "../ui/button";
|
|
|
|
interface InspectionActionBarProps {
|
|
onCancel: () => void;
|
|
onComplete: () => void;
|
|
}
|
|
|
|
export function InspectionActionBar({ onCancel, onComplete }: InspectionActionBarProps) {
|
|
return (
|
|
<>
|
|
{/* 手機版：固定於底部 */}
|
|
<div className="fixed bottom-0 left-0 right-0 bg-card border-t-2 border-border p-4 md:hidden z-10">
|
|
<div className="flex gap-4">
|
|
<Button
|
|
variant="outline"
|
|
onClick={onCancel}
|
|
className="flex-1 h-12 button-outlined-primary"
|
|
>
|
|
取消
|
|
</Button>
|
|
<Button
|
|
onClick={onComplete}
|
|
className="flex-1 h-12 gap-2 button-filled-primary"
|
|
>
|
|
<PackageCheck className="h-5 w-5" />
|
|
確認驗收
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 桌面版：正常排版於區塊底部 */}
|
|
<div className="hidden md:flex justify-end gap-4 pt-6 border-t-2 border-border">
|
|
<Button
|
|
variant="outline"
|
|
onClick={onCancel}
|
|
className="h-12 button-outlined-primary"
|
|
>
|
|
取消
|
|
</Button>
|
|
<Button
|
|
onClick={onComplete}
|
|
className="h-12 gap-2 button-filled-primary"
|
|
>
|
|
<PackageCheck className="h-5 w-5" />
|
|
確認驗收並完成
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|