diff --git a/src/lib/components/Courses/index.svelte b/src/lib/components/Courses/index.svelte index d7a78e8a..aca8ed49 100644 --- a/src/lib/components/Courses/index.svelte +++ b/src/lib/components/Courses/index.svelte @@ -9,9 +9,7 @@ -
+
{#if $courseMetaDeta.isLoading} @@ -35,8 +33,7 @@

No Courses Created

- Share your knowledge with the world by creating engaging courses for - your students. + Share your knowledge with the world by creating engaging courses for your students.

{/each} diff --git a/src/lib/components/Courses/store.js b/src/lib/components/Courses/store.js index d30ea60e..f30531e2 100644 --- a/src/lib/components/Courses/store.js +++ b/src/lib/components/Courses/store.js @@ -2,7 +2,7 @@ import { writable } from 'svelte/store'; export const courses = writable([]); export const courseMetaDeta = writable({ - isLoading: false, + isLoading: true }); export const createCourseModal = writable({ @@ -11,7 +11,7 @@ export const createCourseModal = writable({ description: '', emails: '', tutors: '', - students: '', + students: '' }); export const copyCourseModalInitialState = { @@ -20,6 +20,6 @@ export const copyCourseModalInitialState = { id: '', title: '', isSaving: false, - error: null, + error: null }; export const copyCourseModal = writable({ ...copyCourseModalInitialState }); diff --git a/src/lib/components/Org/LandingPage/PageLoader.svelte b/src/lib/components/Org/LandingPage/PageLoader.svelte new file mode 100644 index 00000000..4a6cf178 --- /dev/null +++ b/src/lib/components/Org/LandingPage/PageLoader.svelte @@ -0,0 +1,28 @@ + + +
+ +
+ +
+ + + +
+
+ +
+ +
+ +
+ + + +
+
diff --git a/src/lib/components/Org/LandingPage/index.svelte b/src/lib/components/Org/LandingPage/index.svelte index d2d60c84..8f5c9829 100644 --- a/src/lib/components/Org/LandingPage/index.svelte +++ b/src/lib/components/Org/LandingPage/index.svelte @@ -10,7 +10,7 @@ import Phone from 'carbon-icons-svelte/lib/Phone.svelte'; import Email from 'carbon-icons-svelte/lib/Email.svelte'; import Rocket from 'carbon-icons-svelte/lib/Rocket.svelte'; - + import PageLoader from './PageLoader.svelte'; import { orgLandingpageValidation } from '$lib/utils/functions/validator'; import TextField from '$lib/components/Form/TextField.svelte'; import PrimaryButton from '$lib/components/PrimaryButton/index.svelte'; @@ -27,8 +27,10 @@ import { validateEmail } from '$lib/utils/functions/validateEmail'; import TextArea from '$lib/components/Form/TextArea.svelte'; import { goto } from '$app/navigation'; + import { landingPageSettings } from '$lib/components/Org/Settings/store'; export let orgSiteName = ''; + export let org = {}; let email: string | undefined; let isAdding = false; @@ -36,6 +38,7 @@ let successContactSaved = false; let viewAll = false; let isContactSubmiting = false; + let player; let contact = { name: '', email: '', @@ -43,36 +46,16 @@ message: '' }; let contactError = {}; - let video = - 'https://koxqonvbkeakwvmdegcf.supabase.co/storage/v1/object/public/avatars/course/About%20Best.mp4'; const supabase = getSupabase(); - const faqs = [ - { - title: 'What sets your bootcamp apart from other online resources?', - content: - 'Our bootcamp offers a structured and guided learning experience led by industry professionals who have a deep understanding of current web development trends and technologies. Unlike self-paced online tutorials, our program provides a hands-on, immersive environment with real-time feedback, personalized guidance, and the opportunity to work on practical projects that mirror real-world scenarios, preparing you for a successful career in web development.' - }, - { - title: 'Who is this bootcamp suitable for?', - content: - "Our web technologies bootcamp is suitable for individuals of all skill levels, from beginners with no prior coding experience to intermediate learners looking to enhance their web development capabilities. Whether you're a career changer, a recent graduate, or a professional aiming to upskill, our program is tailored to help you succeed." - }, - { - title: 'How is the bootcamp structured?', - content: - "Our web technologies bootcamp typically spans a [X]-week period and is divided into modules that cover different aspects of web development. Each module consists of lectures, hands-on coding exercises, projects, and collaborative activities. Our experienced instructors provide guidance and support, and you'll have access to a community of fellow learners to foster collaboration and knowledge sharing." - } - ]; - async function handleSubmit() { if (!email || !validateEmail(email)) return; isAdding = true; const { error } = await supabase.from('organization_emaillist').insert({ email, - organization_id: $currentOrg.id + organization_id: org.id }); if (error) { @@ -91,6 +74,7 @@ isContactSubmiting = true; contactError = orgLandingpageValidation(contact); if (Object.keys(contactError).length) { + isContactSubmiting = false; return; } @@ -100,11 +84,12 @@ email: contact.email, phone: contact.phone, message: contact.message, - organization_id: $currentOrg.id + organization_id: org.id }); if (error) { console.error('Something went wrong', error, '\n\nContact', contact); + isContactSubmiting = false; } isContactSubmiting = false; @@ -116,10 +101,15 @@ message: '' }; } + function isYouTubeLink(link: string) { + const youtubeRegex = + /^(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/; + + return youtubeRegex.test(link.trim()); + } onMount(async () => { if (!orgSiteName) return; - try { console.log('sitename', orgSiteName); $courseMetaDeta.isLoading = true; @@ -130,356 +120,442 @@ console.log('error', error); } }); + function initPlyr(_player: any, _video: string | undefined) { + if (!player) return; + + // @ts-ignore + const plyr = new Plyr('#player', { width: '400px', height: '300px', borderRadius: '10px' }); + // @ts-ignore + window.player = plyr; + } + + // Use default data in store if user hasn't added their own content to landing page + function setDefault(landingpage) { + if (landingpage && Object.keys(landingpage).length) { + $landingPageSettings = landingpage; + } + } + + $: initPlyr(player, $landingPageSettings.header.video.link); + $: setDefault(org.landingpage); - {$currentOrg.name}'s Landing Page + {!org.name ? '' : `${org.name}'s `}Landing Page -
- -