From efb8478f56eb7af3afd7d3ff0a4d8e5b68cf756c Mon Sep 17 00:00:00 2001 From: Arik Chakma Date: Mon, 25 Nov 2024 22:59:52 +0600 Subject: [PATCH] wip --- .../CourseLanding/CourseLanding.tsx | 166 ++++++++++++++++++ .../CourseLanding/CourseStatPill.tsx | 24 +++ src/pages/learn/[courseId]/index.astro | 9 +- src/styles/global.css | 2 +- 4 files changed, 197 insertions(+), 4 deletions(-) create mode 100644 src/components/CourseLanding/CourseLanding.tsx create mode 100644 src/components/CourseLanding/CourseStatPill.tsx diff --git a/src/components/CourseLanding/CourseLanding.tsx b/src/components/CourseLanding/CourseLanding.tsx new file mode 100644 index 000000000..378f5208c --- /dev/null +++ b/src/components/CourseLanding/CourseLanding.tsx @@ -0,0 +1,166 @@ +import { + CalendarIcon, + CodeXmlIcon, + LetterTextIcon, + ShapesIcon, + UsersIcon, +} from 'lucide-react'; +import { Rating } from '../Rating/Rating'; +import { CourseStatPill } from './CourseStatPill'; +import { useRef, useState, useEffect } from 'react'; +import { cn } from '../../lib/classname'; + +export function CourseLanding() { + const containerRef = useRef(null); + const [isSticky, setIsSticky] = useState(false); + + useEffect(() => { + const container = containerRef.current; + if (!container) { + return; + } + const handleScroll = () => { + setIsSticky(window.scrollY > container.offsetTop); + }; + + window.addEventListener('scroll', handleScroll); + return () => window.removeEventListener('scroll', handleScroll); + }, [containerRef]); + + return ( + <> +
+
+
+

+ Home / Courses / Learn SQL +

+ +

SQL 101

+ +
+ + +
+ +

+ Learn everything you need to know about SQL with an interactive + playground. It comes with a built-in editor and a database to + practice your queries. +

+ +
+ 4.5 + + (559 ratings) +
+ +
+ + + +
+
+
+
+ +
+
+
+

What you'll learn

+
    +
  • Understand SQL syntax
    • +
  • Write complex queries
    • +
  • Use SQL in real-world scenarios
    • +
  • Optimize your queries
    • +
  • Understand database design
    • +
  • Write complex queries
    • +
+
+ +
+

About this Course

+ +
+

+ SQL 101 is a beginner-friendly course that will teach you + everything you need to know about SQL. It comes with an + interactive playground where you can practice your queries. +

+ +

+ The course is divided into multiple sections, each covering a + different aspect of SQL. You'll learn how to write complex + queries, use SQL in real-world scenarios, optimize your queries, + and understand database design. +

+
+ +
+
+
+ +
+
+
+ SQL 101 +
+ +
+ +
+ +
+

Certificate of Completion

+

+ Certificate will be issued on completion +

+ +
+ SQL 101 +
+
+ +
+

What you get

+
    +
  • Full access to all the courses
    • +
  • Personalized access using AI
    • +
  • Certificate of Completion
    • +
  • Playground for live-coding
    • +
  • Challenges / Quizes
    • +
+
+
+
+
+ + ); +} diff --git a/src/components/CourseLanding/CourseStatPill.tsx b/src/components/CourseLanding/CourseStatPill.tsx new file mode 100644 index 000000000..9d8040778 --- /dev/null +++ b/src/components/CourseLanding/CourseStatPill.tsx @@ -0,0 +1,24 @@ +import type { LucideIcon } from 'lucide-react'; +import { cn } from '../../lib/classname'; + +type CourseStatPillProps = { + icon: LucideIcon; + label: string; + className?: string; +}; + +export function CourseStatPill(props: CourseStatPillProps) { + const { icon: Icon, label, className } = props; + + return ( +
+ + {label} +
+ ); +} diff --git a/src/pages/learn/[courseId]/index.astro b/src/pages/learn/[courseId]/index.astro index f752e2efb..e5decea7c 100644 --- a/src/pages/learn/[courseId]/index.astro +++ b/src/pages/learn/[courseId]/index.astro @@ -1,4 +1,6 @@ --- +import { CourseLanding } from '../../../components/CourseLanding/CourseLanding'; +import BaseLayout from '../../../layouts/BaseLayout.astro'; import { getAllCourses, getCourseById, @@ -26,6 +28,7 @@ const { courseId } = Astro.params; const { course } = Astro.props; --- -
-  {JSON.stringify(course, null, 2)}
-
+ + +
+ diff --git a/src/styles/global.css b/src/styles/global.css index 2ef68f5db..0c210806b 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -71,7 +71,7 @@ a > code:before { .course-content h1 > code, .course-content h2 > code, .course-content h3 > code { - background: #282A36 !important; + background: #282a36 !important; color: #f4f4f5 !important; padding: 2px 4px; border-radius: 5px;