{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"lesson-view","type":"registry:ui","title":"LessonView","description":"One lesson: text, video or mixed, with a mark-complete action.","package":"classroom","dependencies":["@particle-academy\/react-fancy"],"registryDependencies":["types"],"files":[{"path":"components\/fancy\/lesson-view\/LessonView.tsx","content":"import {\r\n    Badge,\r\n    Button,\r\n    Callout,\r\n    Card,\r\n    ContentRenderer,\r\n    Heading,\r\n    Text,\r\n    Tooltip,\r\n} from '@particle-academy\/react-fancy';\r\nimport type { Lesson } from '..\/types';\r\n\r\nexport interface LessonViewProps {\r\n    lesson: Lesson;\r\n    completed?: boolean;\r\n    onMarkComplete?: (lesson: Lesson) => void | Promise<void>;\r\n    onNext?: (lesson: Lesson) => void;\r\n}\r\n\r\nexport function LessonView({ lesson, completed, onMarkComplete, onNext: _onNext }: LessonViewProps) {\r\n    const contentType = lesson.content_type ?? 'text';\r\n\r\n    return (\r\n        <Card\r\n            variant=\"outlined\"\r\n            padding=\"none\"\r\n            className=\"!rounded-xl !shadow-sm overflow-hidden\"\r\n        >\r\n            <div className=\"px-6 py-5 border-b border-secondary-200 flex items-start justify-between gap-4\">\r\n                <div>\r\n                    <Heading as=\"h1\" size=\"xl\" weight=\"bold\">\r\n                        {lesson.title}\r\n                    <\/Heading>\r\n                    {lesson.estimated_minutes && (\r\n                        <div className=\"mt-1 flex items-center gap-2\">\r\n                            <ClockIcon \/>\r\n                            <Text size=\"sm\" color=\"muted\">\r\n                                ~{lesson.estimated_minutes} min\r\n                            <\/Text>\r\n                        <\/div>\r\n                    )}\r\n                <\/div>\r\n                {completed && (\r\n                    <Tooltip content=\"You've completed this lesson\">\r\n                        <Badge color=\"green\" variant=\"soft\" size=\"md\">\r\n                            \u2713 Completed\r\n                        <\/Badge>\r\n                    <\/Tooltip>\r\n                )}\r\n            <\/div>\r\n\r\n            <div className=\"px-6 py-6 grid gap-5\">\r\n                {(contentType === 'video' || contentType === 'mixed') && lesson.video_url && (\r\n                    <div className=\"relative pt-[56.25%] rounded-xl overflow-hidden bg-secondary-900 shadow-sm\">\r\n                        <iframe\r\n                            src={lesson.video_url}\r\n                            title={lesson.title}\r\n                            allow=\"autoplay; encrypted-media; picture-in-picture\"\r\n                            allowFullScreen\r\n                            className=\"absolute inset-0 w-full h-full border-0\"\r\n                        \/>\r\n                    <\/div>\r\n                )}\r\n\r\n                {(contentType === 'text' || contentType === 'mixed') && lesson.content && (\r\n                    <div className=\"prose prose-secondary max-w-none prose-headings:font-bold prose-headings:text-secondary-900 prose-p:text-secondary-700 prose-strong:text-secondary-900 prose-a:text-brand\">\r\n                        <ContentRenderer value={lesson.content} format=\"html\" \/>\r\n                    <\/div>\r\n                )}\r\n\r\n                {completed && (\r\n                    <Callout color=\"green\">\r\n                        <div className=\"flex items-center gap-2\">\r\n                            <Text weight=\"semibold\">Lesson complete.<\/Text>\r\n                            <Text size=\"sm\">Move to the next item when you're ready.<\/Text>\r\n                        <\/div>\r\n                    <\/Callout>\r\n                )}\r\n            <\/div>\r\n\r\n            {!completed && onMarkComplete && (\r\n                <div className=\"px-6 py-4 border-t border-secondary-200 bg-secondary-50\/50 flex items-center justify-end gap-3\">\r\n                    <Tooltip content=\"Confirms you've finished reading this lesson\">\r\n                        <Button\r\n                            color=\"red\"\r\n                            icon=\"check\"\r\n                            onClick={() => onMarkComplete(lesson)}\r\n                            className=\"!bg-brand hover:!bg-primary-600 !text-white !font-semibold !px-5 !py-2.5 !rounded-md !shadow-sm\"\r\n                        >\r\n                            Mark complete\r\n                        <\/Button>\r\n                    <\/Tooltip>\r\n                <\/div>\r\n            )}\r\n        <\/Card>\r\n    );\r\n}\r\n\r\nfunction ClockIcon() {\r\n    return (\r\n        <svg\r\n            className=\"h-4 w-4 text-secondary-400\"\r\n            fill=\"none\"\r\n            viewBox=\"0 0 24 24\"\r\n            stroke=\"currentColor\"\r\n            strokeWidth={2}\r\n        >\r\n            <path\r\n                strokeLinecap=\"round\"\r\n                strokeLinejoin=\"round\"\r\n                d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\r\n            \/>\r\n        <\/svg>\r\n    );\r\n}\r\n","type":"registry:ui","target":"components\/fancy\/lesson-view\/LessonView.tsx"}]}