81 lines
3.0 KiB
TypeScript
81 lines
3.0 KiB
TypeScript
import { ChevronLeft, X } from 'lucide-react'
|
|
import type React from 'react'
|
|
import PlatformLoadingOverlay from '../../components/PlatformLoadingOverlay'
|
|
|
|
type PlatformSelectModalProps = {
|
|
mode: 'select' | 'settings'
|
|
weekLabel: string
|
|
loading: boolean
|
|
loadingTitle: string
|
|
loadingDescription: string
|
|
onBack: () => void
|
|
onClose: () => void
|
|
children: React.ReactNode
|
|
}
|
|
|
|
export default function PlatformSelectModal({
|
|
mode,
|
|
weekLabel,
|
|
loading,
|
|
loadingTitle,
|
|
loadingDescription,
|
|
onBack,
|
|
onClose,
|
|
children
|
|
}: PlatformSelectModalProps): React.JSX.Element {
|
|
return (
|
|
<div className="fixed bottom-0 left-0 right-0 top-[38px] z-50 grid place-items-center bg-[#080a10]/35 p-6 backdrop-blur-[2px]">
|
|
<section className="flex h-[min(660px,calc(100vh-86px))] w-full max-w-[560px] flex-col overflow-hidden rounded-xl border border-[#dfe3ed] bg-white shadow-[0_28px_80px_rgba(8,10,16,0.28)]">
|
|
<header className="flex items-start justify-between gap-4 border-b border-[#e5e8ef] px-6 pb-4 pt-5">
|
|
<div>
|
|
<span className="text-[12px] font-medium text-[#6f4df6]">{weekLabel}</span>
|
|
<h2 data-help="platform-modal-title" className="mt-1 flex items-center gap-2 text-[22px] font-bold leading-tight text-[#111520]">
|
|
{mode === 'settings' && (
|
|
<button
|
|
type="button"
|
|
aria-label="플랫폼 선택으로 돌아가기"
|
|
onClick={onBack}
|
|
className="grid h-7 w-7 cursor-pointer place-items-center rounded-md text-[#697386] transition hover:bg-[#f0f2f7] hover:text-[#111520]"
|
|
>
|
|
<ChevronLeft size={18} />
|
|
</button>
|
|
)}
|
|
{mode === 'settings' ? '플랫폼 설정' : '플랫폼 선택'}
|
|
</h2>
|
|
<p className="mt-2 text-[13px] font-medium text-[#5f6878]">
|
|
{mode === 'settings'
|
|
? '플랫폼별 개발 환경 설정을 관리하세요.'
|
|
: '실습을 진행할 플랫폼을 선택하고 제어권을 요청하세요.'}
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
aria-label="닫기"
|
|
onClick={onClose}
|
|
className="grid h-8 w-8 shrink-0 cursor-pointer place-items-center rounded-md text-[#697386] transition hover:bg-[#f0f2f7] hover:text-[#111520]"
|
|
>
|
|
<X size={17} />
|
|
</button>
|
|
</header>
|
|
|
|
<div className="relative min-h-0 flex-1 overflow-hidden">
|
|
<div
|
|
className={[
|
|
'flex h-full w-[200%] transition-[transform,opacity] duration-300 ease-out',
|
|
mode === 'settings' ? '-translate-x-1/2' : 'translate-x-0'
|
|
].join(' ')}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
{loading && (
|
|
<PlatformLoadingOverlay
|
|
title={loadingTitle}
|
|
description={loadingDescription}
|
|
/>
|
|
)}
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|