first commit
This commit is contained in:
Rotimi Best
@@ -1,46 +1,86 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { fade } from 'svelte/transition';
|
||||
import get from 'lodash/get';
|
||||
import { onMount } from 'svelte';
|
||||
import { Search } from 'carbon-components-svelte';
|
||||
import LogoFacebook from 'carbon-icons-svelte/lib/LogoFacebook.svelte';
|
||||
import LogoTwitter from 'carbon-icons-svelte/lib/LogoTwitter.svelte';
|
||||
import LogoLinkedin from 'carbon-icons-svelte/lib/LogoLinkedin.svelte';
|
||||
|
||||
import TextField from '$lib/components/Form/TextField.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import Navigation from '$lib/components/Navigation/index.svelte';
|
||||
import Box from '$lib/components/Box/index.svelte';
|
||||
import Card from '$lib/components/Courses/components/Card/index.svelte';
|
||||
import CardLoader from '$lib/components/Courses/components/Card/Loader.svelte';
|
||||
import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
|
||||
import { getSupabase } from '$lib/utils/functions/supabase';
|
||||
import { courses, courseMetaDeta } from '$lib/components/Courses/store';
|
||||
import { getCourseBySiteName } from '$lib/utils/services/org';
|
||||
import { appStore } from '$lib/utils/store/app';
|
||||
import { currentOrg } from '$lib/utils/store/org';
|
||||
import { validateEmail } from '$lib/utils/functions/validateEmail';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
export let orgSiteName;
|
||||
|
||||
let searchValue = '';
|
||||
let email: string | undefined;
|
||||
let isAdding = false;
|
||||
let success = false;
|
||||
let viewAll = false;
|
||||
|
||||
const supabase = getSupabase();
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!email || !validateEmail(email)) return;
|
||||
isAdding = true;
|
||||
|
||||
const { error, data } = await supabase.from('organization_emaillist').insert({
|
||||
email,
|
||||
organization_id: $currentOrg.id
|
||||
});
|
||||
|
||||
if (error) {
|
||||
console.error('Error', error);
|
||||
}
|
||||
|
||||
success = true;
|
||||
setTimeout(() => {
|
||||
isAdding = false;
|
||||
success = false;
|
||||
email = undefined;
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
console.log('sitename', $appStore.siteNameFromDomain);
|
||||
$courseMetaDeta.isLoading = true;
|
||||
const coursesResult = await getCourseBySiteName(
|
||||
$appStore.siteNameFromDomain
|
||||
);
|
||||
courses.set(coursesResult);
|
||||
$courseMetaDeta.isLoading = false;
|
||||
if (!orgSiteName) return;
|
||||
|
||||
try {
|
||||
console.log('sitename', orgSiteName);
|
||||
$courseMetaDeta.isLoading = true;
|
||||
const coursesResult = await getCourseBySiteName(orgSiteName);
|
||||
courses.set(coursesResult);
|
||||
$courseMetaDeta.isLoading = false;
|
||||
} catch (error) {
|
||||
console.log('error', error);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
{$currentOrg.name}
|
||||
</svelte:head>
|
||||
|
||||
<main>
|
||||
<Navigation logo={$currentOrg.avatar_url} orgName={$currentOrg.name} />
|
||||
|
||||
<!-- Header Section -->
|
||||
<header class="banner w-full flex items-center justify-center p-">
|
||||
<div
|
||||
class="w-full flex items-center justify-center flex-col-reverse md:flex-row"
|
||||
>
|
||||
<header transition:fade class="banner w-full flex items-center justify-center p-">
|
||||
<div class="w-full flex items-center justify-center flex-col-reverse md:flex-row">
|
||||
<!-- Course Description -->
|
||||
<div class="course-descr w-11/12 py-10">
|
||||
<h1
|
||||
class="dark:text-white text-5xl text-white text-center my-4 font-bold"
|
||||
>
|
||||
<h1 class="dark:text-white text-5xl text-white text-center my-4 font-bold">
|
||||
Explore courses
|
||||
</h1>
|
||||
<p class="dark:text-white text-md text-white mb-6 text-center">
|
||||
@@ -52,18 +92,19 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="my-10 mx-auto max-w-6xl w-full">
|
||||
<div class="flex items-center justify-evenly flex-wrap my-4 m-auto">
|
||||
<section transition:fade class="my-10 mx-auto max-w-6xl w-full">
|
||||
<div
|
||||
class="flex gap-5 items-center {$courses.length < 4 && 'justify-center'} flex-wrap my-4 mx-2"
|
||||
>
|
||||
{#if $courseMetaDeta.isLoading}
|
||||
<CardLoader />
|
||||
<CardLoader />
|
||||
<CardLoader />
|
||||
{:else}
|
||||
{#each $courses as courseData}
|
||||
{#each $courses.slice(0, viewAll ? $courses.length : 3) as courseData}
|
||||
<Card
|
||||
id={courseData.id}
|
||||
slug={courseData.slug}
|
||||
logo={courseData.logo}
|
||||
bannerImage={courseData.banner_image}
|
||||
title={courseData.title}
|
||||
description={courseData.description}
|
||||
@@ -71,7 +112,7 @@
|
||||
isPublished={courseData.is_published}
|
||||
cost={courseData.cost}
|
||||
currency={courseData.currency}
|
||||
totalLessons={courseData.total_lessons}
|
||||
totalLessons={get(courseData, 'lessons[0].count', 0)}
|
||||
isOnLandingPage={true}
|
||||
/>
|
||||
{:else}
|
||||
@@ -85,10 +126,58 @@
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if $courses.length > 3}
|
||||
<div class="w-full flex justify-center">
|
||||
<PrimaryButton
|
||||
variant={VARIANTS.OUTLINED}
|
||||
onClick={() => (viewAll = !viewAll)}
|
||||
label={viewAll ? 'View Less' : 'View All'}
|
||||
className="px-10 py-5 w-fit"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<section transition:fade class="my-10 mx-auto max-w-6xl w-[95%]">
|
||||
<div
|
||||
class="bg-blue-700 rounded-lg flex flex-col lg:flex-row lg:items-center px-4 md:px-10 py-14"
|
||||
>
|
||||
<div class="w-full md:w-[65%] md:mr-4">
|
||||
<h1 class="text-4xl font-bold mb-5 mt-0 text-white">Join our mailing list</h1>
|
||||
<p class="text-lg text-white">
|
||||
We are constantly releasing new courses and sharing them with our email list. Subscribe to
|
||||
get notified once we release a new course
|
||||
</p>
|
||||
</div>
|
||||
<form on:submit|preventDefault={handleSubmit} class="my-4 w-full md:w-fit">
|
||||
<div class="flex items-center flex-col sm:flex-row">
|
||||
{#if success}
|
||||
<p class="text-white">You have been added successfully. Thanks for subscribing.</p>
|
||||
{:else}
|
||||
<TextField
|
||||
bind:value={email}
|
||||
type="email"
|
||||
placeholder="Enter your email.."
|
||||
className="md:mr-3 my-0 w-full md:w-fit"
|
||||
isRequired={true}
|
||||
isDisabled={isAdding}
|
||||
inputClassName="py-2"
|
||||
/>
|
||||
<PrimaryButton
|
||||
className="my-1 w-full"
|
||||
variant={VARIANTS.CONTAINED_LIGHT}
|
||||
type="submit"
|
||||
isLoading={isAdding}>Subscribe</PrimaryButton
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer
|
||||
class="flex justify-center mt-10 w-full px-5 py-5 sm:py-10 border-b-0 border-r-0 border-t border-l-0 border-gray-300"
|
||||
class="flex justify-center mt-10 w-full px-5 py-10 md:py-3 border-b-0 border-r-0 border-t border-l-0 border-gray-300"
|
||||
>
|
||||
<ul class="flex w-11/12 items-center flex-col sm:flex-row">
|
||||
<div class="logo">
|
||||
@@ -105,7 +194,7 @@
|
||||
class="rounded h-10 w-10 inline-block mx-auto"
|
||||
data-atf="1"
|
||||
/>
|
||||
<h3 class="text-black ml-3">{$currentOrg.name}</h3>
|
||||
<h3 class="text-black ml-3 text-xl">{$currentOrg.name}</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -113,35 +202,17 @@
|
||||
|
||||
<div class="flex mt-5 sm:mt-0">
|
||||
<li class="mx-2">
|
||||
<a
|
||||
href="facebook.com"
|
||||
target="_blank"
|
||||
title="Facebook"
|
||||
id="logo-fb"
|
||||
data-hveid="8"
|
||||
>
|
||||
<a href="facebook.com" target="_blank" title="Facebook" id="logo-fb" data-hveid="8">
|
||||
<LogoFacebook size={24} />
|
||||
</a>
|
||||
</li>
|
||||
<li class="mx-2">
|
||||
<a
|
||||
href="twitter.com"
|
||||
target="_blank"
|
||||
title="Twitter"
|
||||
id="logo-tw"
|
||||
data-hveid="8"
|
||||
>
|
||||
<a href="twitter.com" target="_blank" title="Twitter" id="logo-tw" data-hveid="8">
|
||||
<LogoTwitter size={24} />
|
||||
</a>
|
||||
</li>
|
||||
<li class="mx-2">
|
||||
<a
|
||||
href="linkedin.com"
|
||||
target="_blank"
|
||||
title="Linkedin"
|
||||
id="logo-ln"
|
||||
data-hveid="8"
|
||||
>
|
||||
<a href="linkedin.com" target="_blank" title="Linkedin" id="logo-ln" data-hveid="8">
|
||||
<LogoLinkedin size={24} />
|
||||
</a>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user