88 lines
3.5 KiB
TypeScript
88 lines
3.5 KiB
TypeScript
import { Trash2 } from 'lucide-react'
|
|
import { useState } from 'react'
|
|
import type React from 'react'
|
|
|
|
type DeletableModule = {
|
|
name: string
|
|
}
|
|
|
|
type ModuleDeleteConfirmProps<Module extends DeletableModule> = {
|
|
dark: boolean
|
|
module: Module
|
|
onCancel: () => void
|
|
onConfirm: (module: Module, options: { deleteRepository: boolean }) => void
|
|
}
|
|
|
|
export default function ModuleDeleteConfirm<Module extends DeletableModule>({
|
|
dark,
|
|
module,
|
|
onCancel,
|
|
onConfirm
|
|
}: ModuleDeleteConfirmProps<Module>): React.JSX.Element {
|
|
const [deleteRepository, setDeleteRepository] = useState(false)
|
|
|
|
return (
|
|
<div className="absolute inset-0 z-50 grid place-items-center bg-black/36">
|
|
<section
|
|
className={[
|
|
'w-[360px] overflow-hidden rounded-lg border shadow-[0_24px_70px_rgba(0,0,0,0.42)]',
|
|
dark ? 'border-white/10 bg-[#252525] text-white' : 'border-[#d8dee9] bg-white text-[#111520]'
|
|
].join(' ')}
|
|
>
|
|
<div className={['flex items-center gap-2 border-b px-4 py-3', dark ? 'border-white/10' : 'border-[#d8dde8]'].join(' ')}>
|
|
<Trash2 size={15} className="text-[#e87979]" />
|
|
<strong className="text-[13px] font-bold">삭제</strong>
|
|
</div>
|
|
<div className="p-4">
|
|
<p className={['text-[13px] font-semibold', dark ? 'text-white' : 'text-[#111520]'].join(' ')}>
|
|
{module.name} 삭제할까요?
|
|
</p>
|
|
<p className={['mt-2 text-[12px] font-medium leading-relaxed', dark ? 'text-white/45' : 'text-[#727b8c]'].join(' ')}>
|
|
워크스페이스에 설치된 모듈 폴더가 삭제됩니다.
|
|
</p>
|
|
<label
|
|
className={[
|
|
'mt-4 flex cursor-pointer items-start gap-2 rounded-md border p-3',
|
|
dark ? 'border-white/10 bg-white/[0.03]' : 'border-[#d8dee9] bg-[#f8fafc]'
|
|
].join(' ')}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={deleteRepository}
|
|
onChange={(event) => setDeleteRepository(event.target.checked)}
|
|
className="mt-[2px] h-4 w-4 cursor-pointer accent-[#d14b4b]"
|
|
/>
|
|
<span>
|
|
<span className={['block text-[12px] font-bold', dark ? 'text-white/82' : 'text-[#1f2937]'].join(' ')}>
|
|
학생 저장소도 함께 삭제
|
|
</span>
|
|
<span className={['mt-1 block text-[11px] font-medium leading-relaxed', dark ? 'text-white/42' : 'text-[#7a8494]'].join(' ')}>
|
|
제출 커밋과 작업 이력이 삭제되고, 다음 설치 시 템플릿 저장소 기준으로 새로 생성됩니다.
|
|
</span>
|
|
</span>
|
|
</label>
|
|
<div className="mt-4 flex justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={onCancel}
|
|
className={[
|
|
'h-8 cursor-pointer rounded-md border px-3 text-[12px] font-bold transition',
|
|
dark ? 'border-white/12 text-white/62 hover:bg-white/8 hover:text-white' : 'border-[#cfd6e4] text-[#687284] hover:bg-[#eef1f7] hover:text-[#111520]'
|
|
].join(' ')}
|
|
>
|
|
취소
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => onConfirm(module, { deleteRepository })}
|
|
className="h-8 cursor-pointer rounded-md bg-[#d14b4b] px-3 text-[12px] font-bold text-white transition hover:bg-[#bd3838]"
|
|
>
|
|
삭제
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|