picoclaw/web/frontend/src/components/config-change-notice.tsx
2026-04-26 22:09:00 +08:00

48 lines
1 KiB
TypeScript

import {
IconAlertCircle,
IconDeviceFloppy,
IconRefresh,
} from "@tabler/icons-react"
import { cn } from "@/lib/utils"
interface ConfigChangeNoticeProps {
kind: "save" | "restart"
title: string
description?: string
className?: string
}
export function ConfigChangeNotice({
kind,
title,
description,
className,
}: ConfigChangeNoticeProps) {
const Icon =
kind === "restart"
? IconRefresh
: kind === "save"
? IconDeviceFloppy
: IconAlertCircle
return (
<div
className={cn(
"flex items-start gap-3 rounded-lg border px-3 py-2 text-sm",
kind === "restart"
? "border-amber-200 bg-amber-50 text-amber-900"
: "border-yellow-200 bg-yellow-50 text-yellow-900",
className,
)}
>
<Icon className="mt-0.5 size-4 shrink-0" />
<div className="min-w-0">
<p className="font-medium">{title}</p>
{description && (
<p className="mt-0.5 text-xs/5 opacity-85">{description}</p>
)}
</div>
</div>
)
}