71 lines
2.7 KiB
TypeScript
71 lines
2.7 KiB
TypeScript
import { CheckCircle2, Clock3, Gauge, TrendingUp } from 'lucide-react'
|
|
import type { LucideIcon } from 'lucide-react'
|
|
import type React from 'react'
|
|
|
|
export type LearningStatItem = {
|
|
key: string
|
|
value: string
|
|
label: string
|
|
iconKey: string
|
|
}
|
|
|
|
const STAT_ICONS: Record<string, LucideIcon> = {
|
|
check: CheckCircle2,
|
|
clock: Clock3,
|
|
trending: TrendingUp,
|
|
gauge: Gauge
|
|
}
|
|
|
|
type LearningStatsCardProps = {
|
|
guideMode?: boolean
|
|
stats: LearningStatItem[]
|
|
}
|
|
|
|
export default function LearningStatsCard({ guideMode = false, stats }: LearningStatsCardProps): React.JSX.Element {
|
|
return (
|
|
<section className="rounded-lg border border-[#d6dce8] bg-white/95 p-4 shadow-[0_16px_36px_rgba(20,27,44,0.10)]">
|
|
<div>
|
|
<div>
|
|
<strong className="block font-bold">{guideMode ? '체험 강좌' : '내 학습 현황'}</strong>
|
|
<span className="mt-1 block text-[12px] font-medium text-[#5f6878]">
|
|
{guideMode ? '배정 전 사용법 안내 과정' : '전체 진행 상황 및 통계'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 overflow-hidden rounded-lg border border-[#dfe3ed] bg-[#fbfcff] shadow-[0_10px_24px_rgba(20,27,44,0.06)]">
|
|
{guideMode ? (
|
|
<div className="px-4 py-5 text-[12px] font-medium leading-relaxed text-[#5f6878]">
|
|
이 강좌는 Autonomy Studio LMS 사용법을 확인하기 위한 공통 안내입니다. 실제 학습 시간, 커밋 수, 제출 현황은 강사가 배정한 강좌에서부터 집계됩니다.
|
|
</div>
|
|
) : stats.length ? (
|
|
stats.map(({ value, label, iconKey }, index) => {
|
|
const Icon = STAT_ICONS[iconKey] ?? Gauge
|
|
return (
|
|
<div
|
|
key={label}
|
|
className={[
|
|
'flex min-h-[52px] items-center justify-between gap-3 px-3.5',
|
|
index > 0 ? 'border-t border-[#edf0f5]' : ''
|
|
].join(' ')}
|
|
>
|
|
<div className="flex min-w-0 items-center gap-1.5">
|
|
<span className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-[#e9e3ff] text-[#5b48c9]">
|
|
<Icon size={15} strokeWidth={2.4} />
|
|
</span>
|
|
<span className="truncate text-[12px] font-medium text-[#4f596b]">{label}</span>
|
|
</div>
|
|
<strong className="shrink-0 text-right text-[15px] font-bold text-[#151827]">{value}</strong>
|
|
</div>
|
|
)
|
|
})
|
|
) : (
|
|
<div className="px-4 py-6 text-center text-[12px] font-semibold text-[#687284]">
|
|
학습 현황 데이터가 없습니다.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|