@academy-sdk/sdk 0.1.0 → 0.2.0

package/src/components/pages/CatalogCoursesPage.tsx

@@ -0,0 +1,299 @@
+import { useState } from 'react';
+import { Search, BookOpen, Package, Twitter, Facebook, Instagram } from 'lucide-react';
+import type { CatalogCoursesPageProps } from '../../contracts/pages.contract';
+import { Pagination } from '../molecules/Pagination';
+import { CourseCard } from '../molecules/CourseCard';
+
+const FILE_URL = 'https://fe-academy-file.dev.magicai-testing-domain.work';
+
+const FEATURES = [
+  'Free E-book, video & consolation',
+  'Top instructors from around world',
+  'Top courses from your team',
+];
+
+const DEALS = [
+  { id: 1, discount: '50%', title: 'Lorem ipsum dolor', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor', image: `${FILE_URL}/deal-1.png` },
+  { id: 2, discount: '10%', title: 'Lorem ipsum dolor', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor', image: `${FILE_URL}/deal-2.png` },
+  { id: 3, discount: '50%', title: 'Lorem ipsum dolor', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor', image: `${FILE_URL}/deal-3.png` },
+];
+
+const RECOMMENDED = [
+  { id: 'd87b963f', title: 'testtgfsdfg dfs', thumbnail: `${FILE_URL}/uploads/4e2fd752-e8c0-440a-8622-3102d33e56e7-1771918805146.png`, totalLessons: 1, progress: 0, isFree: true, price: 0 },
+  { id: '30ceedf8', title: 'tessst 11', thumbnail: `${FILE_URL}/uploads/ec2ebd93-f06e-48ce-914a-116b1b91c480-1771878020911.jpeg`, totalLessons: 1, progress: 0, isFree: true, price: 0 },
+  { id: 'eae7f568', title: 'React', thumbnail: `${FILE_URL}/uploads/ca3257ea-618c-4a61-a4b6-5560c2bf5ec1-1771488717244.png`, totalLessons: 2, progress: 0, isFree: true, price: 0 },
+  { id: '26a52485', title: 'll1', thumbnail: `${FILE_URL}/uploads/9bf7f1ca-214b-4a82-862d-f334801bcd53-1771486627052.png`, totalLessons: 1, progress: 0, isFree: true, price: 0 },
+];
+
+const SIDE_AVATARS = [`${FILE_URL}/avatar-1.png`, `${FILE_URL}/avatar-2.png`, `${FILE_URL}/avatar-3.png`, `${FILE_URL}/avatar-4.png`];
+
+export function CatalogCoursesPage(props: Partial<CatalogCoursesPageProps>) {
+  const noop = (..._args: any[]) => {};
+  const {
+    courses = [], meta, loading = false, searchQuery = '', page = 1,
+    onSearchChange = noop, onPageChange = noop, onCourseClick = noop,
+    activeTab = 'courses', onTabChange,
+    bundleCourses = [], bundleMeta, bundlesLoading = false, bundlePage = 1,
+    onBundlePageChange = noop, onBundleClick = noop,
+  } = props as any;
+
+  const [localQuery, setLocalQuery] = useState(searchQuery);
+  const defaultHeroImage = `${FILE_URL}/catalog-hero-banner.png`;
+
+  const handleSearchSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSearchChange(localQuery);
+  };
+
+  const handleSearchChange = (val: string) => {
+    setLocalQuery(val);
+    onSearchChange(val);
+  };
+
+  const displayCourses = activeTab === 'courses' ? courses : bundleCourses;
+  const displayMeta = activeTab === 'courses' ? meta : bundleMeta;
+  const displayLoading = activeTab === 'courses' ? loading : bundlesLoading;
+  const displayPage = activeTab === 'courses' ? page : bundlePage;
+  const displayPageChange = activeTab === 'courses' ? onPageChange : onBundlePageChange;
+
+  return (
+    <div className="container mx-auto space-y-10">
+
+      {/* Hero Search Bar */}
+      <div className="relative w-full overflow-hidden rounded-2xl">
+        <div
+          className="absolute inset-0 z-0 bg-cover bg-center"
+          style={{ backgroundImage: `var(--catalog-hero-image, url(${defaultHeroImage}))` }}
+        >
+          <div
+            className="absolute inset-0 backdrop-blur-[1px]"
+            style={{ background: 'linear-gradient(135deg, rgba(73,187,189,0.75) 0%, rgba(73,187,189,0.55) 50%, rgba(73,187,189,0.40) 100%)' }}
+          />
+        </div>
+        <div className="relative z-10 flex flex-col items-center justify-center px-4 py-8 sm:px-6 sm:py-10 gap-4">
+          <form
+            onSubmit={handleSearchSubmit}
+            className="flex w-full max-w-[680px] bg-white rounded-2xl sm:rounded-full p-1 sm:p-[5px] sm:pl-0 shadow-lg flex-col sm:flex-row gap-1 sm:gap-0 sm:items-center"
+          >
+            <div className="relative flex-1 flex items-center w-full">
+              <Search className="absolute left-4 sm:left-5 w-5 h-5 text-gray-400 pointer-events-none" />
+              <input
+                type="text"
+                placeholder={activeTab === 'courses' ? 'Search your favourite course' : 'Search your favourite bundle'}
+                value={localQuery}
+                onChange={(e) => handleSearchChange(e.target.value)}
+                className="w-full py-3 sm:py-3.5 pl-12 sm:pl-13 pr-4 bg-transparent text-gray-700 text-sm sm:text-[15px] rounded-full border-none outline-none placeholder:text-gray-400"
+              />
+            </div>
+            <button
+              type="submit"
+              className="shrink-0 px-8 py-3 bg-theme-accent-primary text-white font-semibold text-sm sm:text-[15px] rounded-xl sm:rounded-full cursor-pointer transition-all duration-150 hover:brightness-110 hover:scale-[1.02] active:scale-[0.98] w-full sm:w-auto"
+            >
+              Search
+            </button>
+          </form>
+        </div>
+      </div>
+
+      {/* Tab Bar */}
+      <div className="flex gap-2">
+        {[{ id: 'courses', label: 'Courses', Icon: BookOpen }, { id: 'bundles', label: 'Bundles', Icon: Package }].map(({ id, label, Icon }) => (
+          <button
+            key={id}
+            onClick={() => onTabChange?.(id)}
+            className={`flex items-center gap-2 px-4 py-2.5 font-medium transition-colors cursor-pointer ${
+              activeTab === id
+                ? 'border-b-2 border-theme-accent-primary text-theme-accent-primary'
+                : 'text-theme-text-secondary hover:text-theme-text-primary'
+            }`}
+          >
+            <Icon className="h-4 w-4" />
+            {label}
+          </button>
+        ))}
+      </div>
+
+      {/* Course / Bundle Grid */}
+      {displayLoading ? (
+        <div className="flex flex-col items-center justify-center py-16">
+          <div className="h-12 w-12 animate-spin rounded-full border-4 border-theme-border-primary border-t-theme-accent-primary"></div>
+          <p className="mt-4 text-theme-text-secondary">Loading {activeTab}...</p>
+        </div>
+      ) : displayCourses.length === 0 ? (
+        <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-theme-border-primary bg-theme-bg-secondary py-16 text-center">
+          <div className="text-4xl mb-4">{activeTab === 'courses' ? '📚' : '📦'}</div>
+          <h3 className="text-xl font-semibold text-theme-text-primary">No {activeTab} found</h3>
+          <p className="mt-2 max-w-md text-theme-text-secondary">Try adjusting your search query or check back later</p>
+        </div>
+      ) : (
+        <>
+          <div className="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {displayCourses.map((course: any) => {
+              const description = (course.summary || course.description || '').replace(/<[^>]*>/g, '');
+              const price = course.price ?? 0;
+              const isFree = course.isFree !== undefined ? course.isFree : price === 0;
+              return (
+                <CourseCard
+                  key={course.id}
+                  id={course.id}
+                  title={course.title || ''}
+                  thumbnail={course.thumbnail || ''}
+                  totalLessons={course.totalLessons || 0}
+                  progress={0}
+                  showProgress={false}
+                  isFree={isFree}
+                  price={price}
+                  showPrice={true}
+                  currency={course.currency}
+                  description={description}
+                  instructorName={course.instructorName}
+                  instructorAvatar={course.instructorAvatar}
+                  category={course.category}
+                  originalPrice={course.originalPrice}
+                  isBundle={activeTab === 'bundles'}
+                  thumbnails={course.thumbnails}
+                  onClick={() => activeTab === 'courses' ? onCourseClick(course.id) : onBundleClick(course.id)}
+                />
+              );
+            })}
+          </div>
+          {displayMeta && displayMeta.totalPages > 1 && (
+            <Pagination
+              currentPage={displayPage}
+              totalPages={displayMeta.totalPages}
+              total={displayMeta.total}
+              pageSize={displayMeta.limit || 8}
+              hasNextPage={displayPage < displayMeta.totalPages}
+              hasPreviousPage={displayPage > 1}
+              onPageChange={displayPageChange}
+            />
+          )}
+        </>
+      )}
+
+      {/* Know about learning platform */}
+      <section className="rounded-2xl bg-[#EEF4FA] p-6 sm:p-8 lg:p-10 overflow-hidden">
+        <div className="flex flex-col items-center gap-8 lg:flex-row lg:items-center lg:justify-between px-10">
+          <div className="space-y-6 lg:max-w-md shrink-0 py-4">
+            <h2 className="text-2xl font-bold text-gray-900 sm:text-3xl leading-snug">
+              Know about learning<br />learning platform
+            </h2>
+            <ul className="space-y-5">
+              {FEATURES.map((feature, i) => (
+                <li key={i} className="flex items-center gap-4 text-sm text-gray-600 font-medium">
+                  <span className="h-4 w-4 rounded-full bg-[#B8F0E8] shrink-0" />
+                  {feature}
+                </li>
+              ))}
+            </ul>
+            <button className="inline-block rounded-lg bg-theme-accent-primary px-8 py-3.5 text-sm font-bold text-white shadow-md transition-all hover:brightness-110 hover:scale-[1.02] active:scale-[0.98]">
+              Start learning now
+            </button>
+          </div>
+          <div className="relative w-full max-w-[520px] lg:w-[55%]">
+            <div className="aspect-[16/10] w-full flex items-center justify-center bg-[#dbeafe] rounded-xl">
+              <span className="text-gray-400 text-sm">Platform Preview</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Recommended for you */}
+      <div className="relative w-screen left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] bg-[#EEF4FA]">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
+          <section className="space-y-6">
+            <div className="flex items-center justify-between">
+              <h2 className="text-xl font-bold text-gray-900 sm:text-2xl">Recommended for you</h2>
+              <button className="shrink-0 text-sm font-semibold text-[rgb(var(--accent-primary))] hover:underline cursor-pointer">See all</button>
+            </div>
+            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+              {RECOMMENDED.map((course) => (
+                <CourseCard
+                  key={course.id}
+                  id={course.id}
+                  title={course.title}
+                  thumbnail={course.thumbnail}
+                  totalLessons={course.totalLessons}
+                  progress={course.progress}
+                  showProgress={false}
+                  isFree={course.isFree}
+                  price={course.price}
+                  showPrice={true}
+                  onClick={() => onCourseClick(course.id)}
+                />
+              ))}
+            </div>
+          </section>
+        </div>
+      </div>
+
+      {/* What our students have to say */}
+      <div className="relative w-screen left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] bg-[#EEF4FA]">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
+          <section className="space-y-6">
+            <h2 className="text-xl font-bold text-gray-900 sm:text-2xl">What our students have to say</h2>
+            <div className="rounded-2xl bg-white p-6 sm:p-8 lg:p-14 shadow-sm relative overflow-hidden">
+              <div className="flex flex-col items-center gap-6 lg:flex-row lg:items-center lg:gap-16">
+                <div className="relative shrink-0 w-48 h-48 sm:w-64 sm:h-64 bg-gray-100 rounded-full flex items-center justify-center">
+                  <img src={`${FILE_URL}/student.png`} alt="Student" className="w-full h-full object-cover rounded-full" onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }} />
+                </div>
+                <div className="flex-1 space-y-4 text-center lg:text-left min-w-0 z-10">
+                  <div className="space-y-1">
+                    <h3 className="text-xl font-bold text-gray-900">Savannah Nguyen</h3>
+                    <p className="text-sm text-gray-500 font-medium tracking-wide">tanya.hill@example.com</p>
+                  </div>
+                  <div className="space-y-2 text-sm text-gray-500 leading-relaxed max-w-lg">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
+                  </div>
+                  <div className="flex items-center gap-3 pt-2 justify-center lg:justify-start">
+                    {[Twitter, Facebook, Instagram].map((Icon, i) => (
+                      <button key={i} className="flex h-8 w-8 items-center justify-center rounded-full bg-theme-accent-primary text-white transition-all hover:scale-110 hover:shadow-md">
+                        <Icon className="h-4 w-4" />
+                      </button>
+                    ))}
+                  </div>
+                </div>
+                <div className="hidden lg:flex flex-col gap-5 shrink-0 z-10">
+                  {SIDE_AVATARS.map((avatar, i) => (
+                    <div key={i} className="relative h-14 w-14 overflow-hidden rounded-full border-2 border-white shadow-md transition-all hover:scale-110 cursor-pointer hover:border-[#49BBBD]">
+                      <img src={avatar} alt={`Student ${i + 1}`} className="w-full h-full object-cover" onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }} />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+
+      {/* Top Education Deals */}
+      <section className="space-y-6">
+        <div className="flex items-center justify-between">
+          <h2 className="text-xl font-bold text-gray-900 sm:text-2xl">Top Education offers and deals are listed here</h2>
+          <button className="shrink-0 text-sm font-semibold text-[rgb(var(--accent-primary))] hover:underline cursor-pointer">See all</button>
+        </div>
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {DEALS.map((deal) => (
+            <div key={deal.id} className="group relative overflow-hidden rounded-2xl cursor-pointer h-[320px] sm:h-[350px]">
+              <img src={deal.image} alt={deal.title} className="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" onError={(e) => { (e.target as HTMLImageElement).style.background = '#e5e7eb'; }} />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/10" />
+              <div className="absolute inset-0 flex flex-col justify-between p-5 sm:p-6">
+                <div>
+                  <span className="inline-block rounded-lg bg-[rgb(var(--accent-primary))] px-4 py-2 text-xl font-bold text-white sm:text-2xl">{deal.discount}</span>
+                </div>
+                <div className="space-y-2">
+                  <h3 className="text-lg font-bold text-white sm:text-xl">{deal.title}</h3>
+                  <p className="text-sm text-white/80 leading-relaxed line-clamp-2">{deal.description}</p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+    </div>
+  );
+}
+