eafonyang
77 lines
2.6 KiB
TypeScript
77 lines
2.6 KiB
TypeScript
import { X } from "lucide-react";
|
|
import type { PeqEqUi } from "../types";
|
|
import { PEQ_PRESET_NAME_MAX_LENGTH } from "../eqConstants";
|
|
import { clampPeqPresetName } from "../peqPresetName";
|
|
import { PeqPresetNameLengthHint } from "./PeqPresetNameLengthHint";
|
|
|
|
export function SaveBDialog({
|
|
open,
|
|
presetName,
|
|
onNameChange,
|
|
onSave,
|
|
onClose,
|
|
eqUi,
|
|
}: {
|
|
open: boolean;
|
|
presetName: string;
|
|
onNameChange: (v: string) => void;
|
|
onSave: () => void;
|
|
onClose: () => void;
|
|
eqUi: PeqEqUi;
|
|
}) {
|
|
if (!open) return null;
|
|
return (
|
|
<div className="fixed inset-0 z-[120] flex items-center justify-center bg-black/65 px-4">
|
|
<div
|
|
className="w-full max-w-[420px] rounded-[14px] p-5"
|
|
style={{
|
|
background: "linear-gradient(180deg, rgba(34,36,40,0.98) 0%, rgba(24,26,30,0.98) 100%)",
|
|
border: "1px solid rgba(255,255,255,0.12)",
|
|
boxShadow: "0 18px 48px rgba(0,0,0,0.55)",
|
|
}}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-[18px] font-semibold leading-tight text-white/90">{eqUi.saveBTitle}</h3>
|
|
<button
|
|
type="button"
|
|
className="rounded-full p-1.5 text-white/45 transition-colors hover:bg-white/10 hover:text-white/80"
|
|
onClick={onClose}
|
|
aria-label={eqUi.closeDrawer}
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<input
|
|
value={presetName}
|
|
onChange={(e) => onNameChange(clampPeqPresetName(e.target.value))}
|
|
maxLength={PEQ_PRESET_NAME_MAX_LENGTH}
|
|
className="h-11 w-full rounded-[10px] border border-white/12 bg-[#15171b] px-3 text-[15px] text-white/90 outline-none placeholder:text-white/30 focus:border-white/15"
|
|
autoFocus
|
|
/>
|
|
<PeqPresetNameLengthHint value={presetName} />
|
|
</div>
|
|
|
|
<div className="mt-6 flex items-center justify-center gap-4 sm:gap-8">
|
|
<button
|
|
type="button"
|
|
className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-medium text-white/85 transition-colors bg-[#3f4349] hover:bg-[#4a4f56] active:scale-[0.98]"
|
|
onClick={onClose}
|
|
>
|
|
{eqUi.cancel}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-semibold text-black transition-all bg-[#00FFF6] hover:brightness-95 active:scale-[0.98]"
|
|
onClick={onSave}
|
|
>
|
|
{eqUi.save}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|