Spaces:
Sleeping
Sleeping
File size: 2,705 Bytes
cd99321 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | import ReactDOM from 'react-dom'
import { Clock } from 'lucide-react'
interface TimeConfirmState {
dayId: number
fromId: number
time: string
fromType?: string
toType?: string
toId?: number
insertAfter?: boolean
reorderIds?: number[]
}
interface DayPlanSidebarTimeConfirmModalProps {
timeConfirm: TimeConfirmState | null
setTimeConfirm: (v: TimeConfirmState | null) => void
confirmTimeRemoval: () => void
t: (key: string, params?: Record<string, any>) => string
}
export function DayPlanSidebarTimeConfirmModal({ timeConfirm, setTimeConfirm, confirmTimeRemoval, t }: DayPlanSidebarTimeConfirmModalProps) {
if (!timeConfirm) return null
return ReactDOM.createPortal(
<div className="bg-[rgba(0,0,0,0.3)]" style={{
position: 'fixed', inset: 0, zIndex: 1000,
display: 'flex', alignItems: 'center', justifyContent: 'center',
backdropFilter: 'blur(3px)',
}} onClick={() => setTimeConfirm(null)}>
<div className="bg-surface-card" style={{
width: 340, borderRadius: 16,
boxShadow: '0 16px 48px rgba(0,0,0,0.22)', padding: '22px 22px 18px',
display: 'flex', flexDirection: 'column', gap: 12,
}} onClick={e => e.stopPropagation()}>
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
<div className="bg-[rgba(239,68,68,0.12)]" style={{
width: 36, height: 36, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
borderRadius: '50%',
}}>
<Clock size={18} strokeWidth={1.8} color="#ef4444" />
</div>
<div className="text-content" style={{ fontSize: 14, fontWeight: 600 }}>
{t('dayplan.confirmRemoveTimeTitle')}
</div>
</div>
<div className="text-content-secondary" style={{ fontSize: 12.5, lineHeight: 1.5 }}>
{t('dayplan.confirmRemoveTimeBody', { time: timeConfirm.time })}
</div>
<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 4 }}>
<button onClick={() => setTimeConfirm(null)} className="text-content-muted" style={{
fontSize: 12, background: 'none', border: '1px solid var(--border-primary)',
borderRadius: 8, padding: '6px 14px', cursor: 'pointer', fontFamily: 'inherit',
}}>{t('common.cancel')}</button>
<button onClick={confirmTimeRemoval} className="bg-[#ef4444] text-white" style={{
fontSize: 12,
border: 'none', borderRadius: 8, padding: '6px 16px', cursor: 'pointer', fontWeight: 600, fontFamily: 'inherit',
}}>{t('common.confirm')}</button>
</div>
</div>
</div>,
document.body
)
}
|