52 lines
2.0 KiB
TypeScript
52 lines
2.0 KiB
TypeScript
import { X } from 'lucide-react'
|
|
import type React from 'react'
|
|
|
|
type InstructorStudioNoticeModalProps = {
|
|
sidebarCollapsed: boolean
|
|
onClose: () => void
|
|
}
|
|
|
|
export default function InstructorStudioNoticeModal({
|
|
sidebarCollapsed,
|
|
onClose
|
|
}: InstructorStudioNoticeModalProps): React.JSX.Element {
|
|
return (
|
|
<div
|
|
className={[
|
|
'fixed bottom-0 right-0 top-[38px] z-[70] grid place-items-center bg-[#080a10]/40 p-6 backdrop-blur-[3px]',
|
|
sidebarCollapsed ? 'left-[68px]' : 'left-[240px]'
|
|
].join(' ')}
|
|
>
|
|
<section className="w-full max-w-[430px] overflow-hidden rounded-xl border border-[#dfe3ed] bg-white shadow-[0_28px_80px_rgba(8,10,16,0.30)]">
|
|
<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]">개발 스튜디오</span>
|
|
<h2 className="mt-1 text-[21px] font-bold leading-tight text-[#111520]">강사 계정은 이용할 수 없습니다</h2>
|
|
</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="px-6 py-5">
|
|
<p className="text-[14px] font-medium leading-relaxed text-[#4f596b]">
|
|
개발 스튜디오는 수강생 실습용 화면입니다. 강사 계정은 강사포털에서 수강생 관리, 채팅, 학습 진행 현황을 확인해 주세요.
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="mt-5 flex h-10 w-full cursor-pointer items-center justify-center rounded-md bg-[#714ef6] text-[14px] font-bold text-white transition hover:bg-[#6040df]"
|
|
>
|
|
확인
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|