{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"curriculum-overview","type":"registry:ui","title":"CurriculumOverview","description":"A curriculum and its courses, with per-course progress and enrollment state.","package":"classroom","dependencies":["@particle-academy\/react-fancy"],"registryDependencies":["types"],"files":[{"path":"components\/fancy\/curriculum-overview\/CurriculumOverview.tsx","content":"import { Badge, Button, Card, Heading, Progress, Text } from '@particle-academy\/react-fancy';\r\nimport type { Course, Curriculum } from '..\/types';\r\n\r\nexport interface CurriculumOverviewProps {\r\n    curriculum: Curriculum;\r\n    courseProgress?: Record<number, number>;\r\n    onEnroll?: (curriculum: Curriculum) => void;\r\n    onOpenCourse?: (course: Course) => void;\r\n}\r\n\r\nexport function CurriculumOverview({\r\n    curriculum,\r\n    courseProgress = {},\r\n    onEnroll,\r\n    onOpenCourse,\r\n}: CurriculumOverviewProps) {\r\n    const courses = curriculum.courses ?? [];\r\n\r\n    return (\r\n        <div className=\"grid gap-5\">\r\n            <Card\r\n                variant=\"outlined\"\r\n                padding=\"lg\"\r\n                className=\"!rounded-xl !shadow-sm\"\r\n            >\r\n                <div className=\"grid gap-3\">\r\n                    <div className=\"flex items-center gap-2\">\r\n                        <Badge\r\n                            color={curriculum.is_published ? 'green' : 'zinc'}\r\n                            variant=\"soft\"\r\n                            size=\"sm\"\r\n                        >\r\n                            {curriculum.is_published ? 'Published' : 'Draft'}\r\n                        <\/Badge>\r\n                        <Text size=\"sm\" color=\"muted\">\r\n                            {courses.length} course{courses.length === 1 ? '' : 's'}\r\n                        <\/Text>\r\n                    <\/div>\r\n                    <Heading as=\"h1\" size=\"2xl\" weight=\"bold\">\r\n                        {curriculum.title}\r\n                    <\/Heading>\r\n                    {curriculum.description && (\r\n                        <Text color=\"muted\" className=\"!text-base\">\r\n                            {curriculum.description}\r\n                        <\/Text>\r\n                    )}\r\n                    {onEnroll && (\r\n                        <div className=\"pt-2\">\r\n                            <Button\r\n                                onClick={() => onEnroll(curriculum)}\r\n                                className=\"!bg-brand hover:!bg-primary-600 !text-white !font-semibold !px-6 !py-2.5 !rounded-md !shadow-sm\"\r\n                            >\r\n                                Enroll in curriculum\r\n                            <\/Button>\r\n                        <\/div>\r\n                    )}\r\n                <\/div>\r\n            <\/Card>\r\n\r\n            <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\r\n                {courses.map((course) => {\r\n                    const percent = courseProgress[course.id] ?? 0;\r\n                    return (\r\n                        <Card\r\n                            key={course.id}\r\n                            variant=\"outlined\"\r\n                            padding=\"lg\"\r\n                            className=\"!rounded-xl !shadow-sm hover:!shadow-md transition flex flex-col\"\r\n                        >\r\n                            <Heading as=\"h3\" size=\"lg\" weight=\"bold\">\r\n                                {course.title}\r\n                            <\/Heading>\r\n                            {course.description && (\r\n                                <Text color=\"muted\" size=\"sm\" className=\"!mt-2 line-clamp-2\">\r\n                                    {course.description}\r\n                                <\/Text>\r\n                            )}\r\n                            <div className=\"mt-4 grid gap-1.5\">\r\n                                <Progress\r\n                                    value={percent}\r\n                                    max={100}\r\n                                    color=\"red\"\r\n                                    size=\"sm\"\r\n                                \/>\r\n                                <Text size=\"xs\" color=\"muted\">\r\n                                    {percent}% complete\r\n                                <\/Text>\r\n                            <\/div>\r\n                            {onOpenCourse && (\r\n                                <div className=\"mt-auto pt-5\">\r\n                                    <Button\r\n                                        onClick={() => onOpenCourse(course)}\r\n                                        className=\"!bg-brand hover:!bg-primary-600 !text-white !font-semibold !w-full !justify-center !py-2.5 !rounded-md !shadow-sm\"\r\n                                    >\r\n                                        {percent > 0 ? 'Continue' : 'Start'}\r\n                                    <\/Button>\r\n                                <\/div>\r\n                            )}\r\n                        <\/Card>\r\n                    );\r\n                })}\r\n            <\/div>\r\n        <\/div>\r\n    );\r\n}\r\n","type":"registry:ui","target":"components\/fancy\/curriculum-overview\/CurriculumOverview.tsx"}]}