87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
'use client';
|
||
|
||
import { FormEvent, useState } from 'react';
|
||
import { useI18n } from '@/features/i18n/model/useI18n';
|
||
|
||
const OPTIONAL_PREFIX_PATTERN = /^(?:선택|optional|任意|facultatif)\s*[:：]\s*/i;
|
||
const EXAMPLE_PREFIX_PATTERN =
|
||
/^(?:예|例|e\.?\s?g\.?|eg\.?|example|exemple|beispiel|p\.?\s?ex\.?|z\.?\s?b\.?)\s*[:：)\.]\s*/i;
|
||
|
||
const buildMissionPlaceholder = (raw: string, optionalLabel: string) => {
|
||
const sanitized = raw
|
||
.trim()
|
||
.replace(OPTIONAL_PREFIX_PATTERN, '')
|
||
.replace(EXAMPLE_PREFIX_PATTERN, '')
|
||
.trim();
|
||
|
||
if (!sanitized) return '';
|
||
const normalizedOptionalLabel = optionalLabel.trim();
|
||
if (!normalizedOptionalLabel) return sanitized;
|
||
|
||
return `${sanitized} (${normalizedOptionalLabel})`;
|
||
};
|
||
|
||
export function BoardingMissionForm({
|
||
onDock,
|
||
onCancel,
|
||
autoFocus = false,
|
||
compact = false,
|
||
}: {
|
||
onDock: (mission: string) => void;
|
||
onCancel?: () => void;
|
||
autoFocus?: boolean;
|
||
compact?: boolean;
|
||
}) {
|
||
const { t } = useI18n();
|
||
const [mission, setMission] = useState('');
|
||
const trimmedMission = mission.trim();
|
||
const missionPlaceholder = buildMissionPlaceholder(
|
||
t('boarding.missionPlaceholder'),
|
||
t('boarding.optionalLabel'),
|
||
);
|
||
|
||
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
|
||
event.preventDefault();
|
||
onDock(trimmedMission);
|
||
};
|
||
|
||
return (
|
||
<form
|
||
onSubmit={handleSubmit}
|
||
className={`flex flex-col ${compact ? 'gap-6' : 'space-y-8 flex-1'}`}
|
||
>
|
||
<div className="space-y-3">
|
||
<label className="block text-sm font-medium text-slate-300">
|
||
{t('boarding.missionLabel')}
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={mission}
|
||
onChange={(event) => setMission(event.target.value)}
|
||
placeholder={missionPlaceholder}
|
||
className="w-full border-b-2 border-slate-700 bg-slate-900/50 px-0 py-3 text-lg outline-none transition-colors placeholder:text-slate-600 focus:border-indigo-500"
|
||
autoFocus={autoFocus}
|
||
/>
|
||
</div>
|
||
|
||
<div className={`flex ${compact ? 'justify-end gap-3' : 'mt-8 flex-col gap-3'} w-full`}>
|
||
{onCancel && (
|
||
<button
|
||
type="button"
|
||
onClick={onCancel}
|
||
className="rounded-xl border border-slate-700 bg-transparent px-4 py-2 font-semibold text-slate-300 transition-colors hover:bg-slate-900/60 hover:text-white"
|
||
>
|
||
{t('boarding.cancel')}
|
||
</button>
|
||
)}
|
||
<button
|
||
type="submit"
|
||
className={`rounded-xl bg-indigo-600 font-bold text-white transition-all shadow-lg shadow-indigo-900/30 hover:bg-indigo-500 ${compact ? 'px-6 py-2' : 'w-full py-4 text-lg'}`}
|
||
>
|
||
{t('boarding.submit')}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
);
|
||
}
|