From 506fc80845541e3a7c8235de4dfc5d450d213900 Mon Sep 17 00:00:00 2001 From: Gabriel Kimbio Date: Sun, 10 May 2026 04:21:00 +0300 Subject: [PATCH 1/6] feature: add video player component to lesson pages --- src/app/globals.css | 19 +++++++++++++++++++ src/app/paths/[pathSlug]/[topicSlug]/page.tsx | 16 +++++++++++++++- src/data/paths/frontend.json | 4 +++- src/data/types.ts | 1 + 4 files changed, 38 insertions(+), 2 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 9bacd25..4ac5099 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -680,3 +680,22 @@ a { align-items: flex-start; } } + +.video-wrapper { + position: relative; + padding-top: 56.25%; + margin-bottom: 2rem; + border-radius: 0.75rem; + overflow: hidden; + background-color: #000; +} + +.video-wrapper iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; +} + diff --git a/src/app/paths/[pathSlug]/[topicSlug]/page.tsx b/src/app/paths/[pathSlug]/[topicSlug]/page.tsx index ea2b90d..4b23525 100644 --- a/src/app/paths/[pathSlug]/[topicSlug]/page.tsx +++ b/src/app/paths/[pathSlug]/[topicSlug]/page.tsx @@ -44,7 +44,7 @@ export default async function TopicPage({ return ( <> -
+
Paths / @@ -55,6 +55,17 @@ export default async function TopicPage({

{topic.title}

{topic.description}

+ + {topic.videoId && ( +
+
- )} - -
-
- - {topic.content} - -
- - + )} +
+ {topic.content} {topic.resources.length > 0 && (
@@ -114,6 +107,6 @@ export default async function TopicPage({ )}
- +
); } diff --git a/src/data/paths/frontend.json b/src/data/paths/frontend.json index d5555a6..87b6204 100644 --- a/src/data/paths/frontend.json +++ b/src/data/paths/frontend.json @@ -12,12 +12,19 @@ "level": "beginner", "order": 1, "content": "HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure of a web page using a series of elements.\n\n## Key Concepts\n\n- **Elements & Tags**: HTML uses tags like `

`, `

`, `
` to define content.\n- **Attributes**: Tags can have attributes like `class`, `id`, `href` that provide extra information.\n- **Document Structure**: Every HTML page has ``, ``, ``, and ``.\n- **Semantic HTML**: Use tags like `
`, `
{topic.videoId && ( -
- -
- )} +
+