@burdenoff/microfe-technospam 2026.704.1 → 2026.705.1

package/dist/technospam/pages/CoursesCoursesPagePage.js

@@ -3,15 +3,16 @@ import { PageLayout as t } from "../components/PageLayout.js";
 import { StatCard as n } from "../components/StatCard.js";
 import { formatDuration as r } from "../utils/format.js";
 import { StatusBadge as i } from "../components/StatusBadge.js";
-import { EmptyView as a, ErrorView as o, LoadingGrid as s } from "../components/StateViews.js";
+import { LoadMore as a } from "../components/LoadMore.js";
+import { EmptyView as o, ErrorView as s, LoadingGrid as c } from "../components/StateViews.js";
 import "../components/index.js";
-import { useCoursesQuery as c } from "../api/technospamApi.js";
-import { useMemo as l, useState as u } from "react";
-import { BookOpen as d, Clock as f, GraduationCap as p, Layers as m, Search as h, Sparkles as g } from "lucide-react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { Badge as y, Button as b, GlassCard as x, Input as S, Tabs as C, TabsList as w, TabsTrigger as T } from "@burdenoff/fe-libs/ui";
+import { pageArg as l, useCoursesQuery as u, usePageLimit as d } from "../api/technospamApi.js";
+import { useMemo as f, useState as p } from "react";
+import { BookOpen as m, Clock as h, GraduationCap as g, Layers as _, Search as v, Sparkles as y } from "lucide-react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+import { Badge as S, Button as C, GlassCard as w, Input as T, Tabs as E, TabsList as D, TabsTrigger as O } from "@burdenoff/fe-libs/ui";
 //#region src/technospam/pages/CoursesCoursesPagePage.tsx
-var E = [
+var k = [
 	{
 		value: "ALL",
 		label: "All levels"
@@ -33,7 +34,7 @@ var E = [
 		label: "Expert"
 	}
 ];
-function D(e) {
+function A(e) {
 	let t = [
 		"from-accent-primary/25 to-accent-teal/20",
 		"from-accent-teal/25 to-accent-primary/15",
@@ -43,53 +44,53 @@ function D(e) {
 	for (let t = 0; t < e.length; t += 1) n = n * 31 + e.charCodeAt(t) >>> 0;
 	return t[n % t.length];
 }
-function O({ course: e, onOpen: t }) {
-	return /* @__PURE__ */ v(x, {
+function j({ course: e, onOpen: t }) {
+	return /* @__PURE__ */ x(w, {
 		className: "group flex cursor-pointer flex-col overflow-hidden transition-shadow hover:shadow-md",
 		onClick: t,
-		children: [/* @__PURE__ */ v("div", {
-			className: `relative flex h-28 items-end bg-gradient-to-br ${D(e.topic ?? e.level)} p-4`,
-			children: [/* @__PURE__ */ _(d, {
+		children: [/* @__PURE__ */ x("div", {
+			className: `relative flex h-28 items-end bg-gradient-to-br ${A(e.topic ?? e.level)} p-4`,
+			children: [/* @__PURE__ */ b(m, {
 				className: "absolute right-3 top-3 text-text-muted/60",
 				size: 20
-			}), /* @__PURE__ */ _(i, {
+			}), /* @__PURE__ */ b(i, {
 				status: e.level,
 				kind: "level"
 			})]
-		}), /* @__PURE__ */ v("div", {
+		}), /* @__PURE__ */ x("div", {
 			className: "flex flex-1 flex-col gap-3 p-4",
 			children: [
-				/* @__PURE__ */ v("div", {
+				/* @__PURE__ */ x("div", {
 					className: "min-w-0",
-					children: [/* @__PURE__ */ _("h3", {
+					children: [/* @__PURE__ */ b("h3", {
 						className: "truncate text-base font-semibold text-text-primary group-hover:text-accent-primary",
 						children: e.title
-					}), e.summary ? /* @__PURE__ */ _("p", {
+					}), e.summary ? /* @__PURE__ */ b("p", {
 						className: "mt-1 line-clamp-2 text-sm text-text-secondary",
 						children: e.summary
 					}) : null]
 				}),
-				/* @__PURE__ */ v("div", {
+				/* @__PURE__ */ x("div", {
 					className: "mt-auto flex flex-wrap items-center gap-3 text-xs text-text-muted",
-					children: [e.topic ? /* @__PURE__ */ v("span", {
+					children: [e.topic ? /* @__PURE__ */ x("span", {
 						className: "inline-flex items-center gap-1",
 						children: [
-							/* @__PURE__ */ _(m, { size: 13 }),
+							/* @__PURE__ */ b(_, { size: 13 }),
 							" ",
 							e.topic
 						]
-					}) : null, /* @__PURE__ */ v("span", {
+					}) : null, /* @__PURE__ */ x("span", {
 						className: "inline-flex items-center gap-1",
 						children: [
-							/* @__PURE__ */ _(f, { size: 13 }),
+							/* @__PURE__ */ b(h, { size: 13 }),
 							" ",
 							r(e.estimatedMinutes)
 						]
 					})]
 				}),
-				e.tags.length ? /* @__PURE__ */ _("div", {
+				e.tags.length ? /* @__PURE__ */ b("div", {
 					className: "flex flex-wrap gap-1.5",
-					children: e.tags.slice(0, 3).map((e) => /* @__PURE__ */ _(y, {
+					children: e.tags.slice(0, 3).map((e) => /* @__PURE__ */ b(S, {
 						variant: "secondary",
 						className: "text-[11px]",
 						children: e
@@ -99,89 +100,95 @@ function O({ course: e, onOpen: t }) {
 		})]
 	});
 }
-function k() {
-	let i = e(), [m, y] = u("ALL"), [x, D] = u(""), { data: k, loading: A, error: j } = c({
+function M() {
+	let i = e(), [_, S] = p("ALL"), [w, A] = p(""), { limit: M, more: N } = d(), { data: P, loading: F, error: I } = u({
 		status: "PUBLISHED",
-		...m === "ALL" ? {} : { level: m }
-	}), M = k?.tecListCourses.items ?? [], N = l(() => {
-		let e = x.trim().toLowerCase();
-		return e ? M.filter((t) => t.title.toLowerCase().includes(e) || (t.topic ?? "").toLowerCase().includes(e) || t.tags.some((t) => t.toLowerCase().includes(e))) : M;
-	}, [M, x]);
-	return /* @__PURE__ */ v(t, {
+		pagination: l(M),
+		..._ === "ALL" ? {} : { level: _ }
+	}), L = P?.tecListCourses.items ?? [], R = P?.tecListCourses.pageInfo.hasMore ?? !1, z = f(() => {
+		let e = w.trim().toLowerCase();
+		return e ? L.filter((t) => t.title.toLowerCase().includes(e) || (t.topic ?? "").toLowerCase().includes(e) || t.tags.some((t) => t.toLowerCase().includes(e))) : L;
+	}, [L, w]);
+	return /* @__PURE__ */ x(t, {
 		hero: !0,
 		title: "Course Catalog",
-		description: "Learn technology by doing — runnable, project-based courses across the stack.",
-		actions: /* @__PURE__ */ v(b, {
+		description: "Learn technology by doing — practical, project-based courses across the stack.",
+		actions: /* @__PURE__ */ x(C, {
 			variant: "outline",
 			onClick: () => i("/courses/my-learning-page"),
-			children: [/* @__PURE__ */ _(p, { size: 16 }), " My Learning"]
+			children: [/* @__PURE__ */ b(g, { size: 16 }), " My Learning"]
 		}),
 		children: [
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ x("div", {
 				className: "mb-5 grid grid-cols-2 gap-3 sm:grid-cols-4",
 				children: [
-					/* @__PURE__ */ _(n, {
+					/* @__PURE__ */ b(n, {
 						label: "Courses",
-						value: M.length,
-						icon: d
+						value: L.length,
+						icon: m
 					}),
-					/* @__PURE__ */ _(n, {
+					/* @__PURE__ */ b(n, {
 						label: "Beginner-friendly",
-						value: M.filter((e) => e.level === "BEGINNER").length,
-						icon: g
+						value: L.filter((e) => e.level === "BEGINNER").length,
+						icon: y
 					}),
-					/* @__PURE__ */ _(n, {
+					/* @__PURE__ */ b(n, {
 						label: "Advanced+",
-						value: M.filter((e) => e.level === "ADVANCED" || e.level === "EXPERT").length,
-						icon: p
+						value: L.filter((e) => e.level === "ADVANCED" || e.level === "EXPERT").length,
+						icon: g
 					}),
-					/* @__PURE__ */ _(n, {
+					/* @__PURE__ */ b(n, {
 						label: "Total content",
-						value: r(M.reduce((e, t) => e + t.estimatedMinutes, 0)),
-						icon: f
+						value: r(L.reduce((e, t) => e + t.estimatedMinutes, 0)),
+						icon: h
 					})
 				]
 			}),
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ x("div", {
 				className: "mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
-				children: [/* @__PURE__ */ _(C, {
-					value: m,
-					onValueChange: (e) => y(e),
-					children: /* @__PURE__ */ _(w, { children: E.map((e) => /* @__PURE__ */ _(T, {
+				children: [/* @__PURE__ */ b(E, {
+					value: _,
+					onValueChange: (e) => S(e),
+					children: /* @__PURE__ */ b(D, { children: k.map((e) => /* @__PURE__ */ b(O, {
 						value: e.value,
 						children: e.label
 					}, e.value)) })
-				}), /* @__PURE__ */ v("div", {
+				}), /* @__PURE__ */ x("div", {
 					className: "relative w-full sm:w-72",
-					children: [/* @__PURE__ */ _(h, {
+					children: [/* @__PURE__ */ b(v, {
 						className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-text-muted",
 						size: 16
-					}), /* @__PURE__ */ _(S, {
+					}), /* @__PURE__ */ b(T, {
 						className: "pl-9",
 						placeholder: "Search courses…",
-						value: x,
-						onChange: (e) => D(e.target.value)
+						value: w,
+						onChange: (e) => A(e.target.value)
 					})]
 				})]
 			}),
-			A && !M.length ? /* @__PURE__ */ _(s, {}) : j ? /* @__PURE__ */ _(o, {
+			F && !L.length ? /* @__PURE__ */ b(c, {}) : I ? /* @__PURE__ */ b(s, {
 				title: "Couldn't load courses",
-				error: j
-			}) : N.length === 0 ? /* @__PURE__ */ _(a, {
-				icon: /* @__PURE__ */ _(d, { size: 26 }),
-				title: x || m !== "ALL" ? "No matching courses" : "No courses published yet",
-				description: x || m !== "ALL" ? "Try a different search or level filter." : "Published courses will appear here. Check back soon — TechnoSpam is pre-launch."
-			}) : /* @__PURE__ */ _("div", {
+				error: I
+			}) : z.length === 0 ? /* @__PURE__ */ b(o, {
+				icon: /* @__PURE__ */ b(m, { size: 26 }),
+				title: w || _ !== "ALL" ? "No matching courses" : "No courses published yet",
+				description: w || _ !== "ALL" ? "Try a different search or level filter." : "Published courses will appear here. Check back soon — TechnoSpam is pre-launch."
+			}) : /* @__PURE__ */ b("div", {
 				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-				children: N.map((e) => /* @__PURE__ */ _(O, {
+				children: z.map((e) => /* @__PURE__ */ b(j, {
 					course: e,
 					onOpen: () => i(`/courses/course-details-page?id=${e.id}`)
 				}, e.id))
+			}),
+			/* @__PURE__ */ b(a, {
+				hasMore: R,
+				loading: F,
+				onClick: N
 			})
 		]
 	});
 }
 //#endregion
-export { k as CoursesCoursesPagePage };
+export { M as CoursesCoursesPagePage };
 
 //# sourceMappingURL=CoursesCoursesPagePage.js.map

package/dist/technospam/pages/CoursesCoursesPagePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CoursesCoursesPagePage.js","names":[],"sources":["../../../src/technospam/pages/CoursesCoursesPagePage.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport { BookOpen, Clock, GraduationCap, Layers, Search, Sparkles } from 'lucide-react';\nimport {\n  Badge,\n  Button,\n  GlassCard,\n  Input,\n  Tabs,\n  TabsList,\n  TabsTrigger,\n} from '@burdenoff/fe-libs/ui';\nimport {\n  EmptyView,\n  ErrorView,\n  LoadingGrid,\n  PageLayout,\n  StatCard,\n  StatusBadge,\n} from '../components';\nimport { useTechnoSpamNavigate } from '../providers/TechnoSpamProvider';\nimport { useCoursesQuery, type TecCourse, type TecCourseLevel } from '../api/technospamApi';\nimport { formatDuration } from '../utils/format';\n\nconst LEVELS: Array<{ value: 'ALL' | TecCourseLevel; label: string }> = [\n  { value: 'ALL', label: 'All levels' },\n  { value: 'BEGINNER', label: 'Beginner' },\n  { value: 'INTERMEDIATE', label: 'Intermediate' },\n  { value: 'ADVANCED', label: 'Advanced' },\n  { value: 'EXPERT', label: 'Expert' },\n];\n\n/** Deterministic token-based cover gradient keyed off the course topic/level. */\nfunction coverGradient(seed: string): string {\n  const gradients = [\n    'from-accent-primary/25 to-accent-teal/20',\n    'from-accent-teal/25 to-accent-primary/15',\n    'from-status-success-bg-subtle to-accent-wash',\n    'from-accent-wash to-bg-sunken',\n  ];\n  let hash = 0;\n  for (let i = 0; i < seed.length; i += 1) hash = (hash * 31 + seed.charCodeAt(i)) >>> 0;\n  return gradients[hash % gradients.length]!;\n}\n\nfunction CourseCard({ course, onOpen }: { course: TecCourse; onOpen: () => void }) {\n  return (\n    <GlassCard\n      className=\"group flex cursor-pointer flex-col overflow-hidden transition-shadow hover:shadow-md\"\n      onClick={onOpen}\n    >\n      <div\n        className={`relative flex h-28 items-end bg-gradient-to-br ${coverGradient(\n          course.topic ?? course.level\n        )} p-4`}\n      >\n        <BookOpen className=\"absolute right-3 top-3 text-text-muted/60\" size={20} />\n        <StatusBadge status={course.level} kind=\"level\" />\n      </div>\n      <div className=\"flex flex-1 flex-col gap-3 p-4\">\n        <div className=\"min-w-0\">\n          <h3 className=\"truncate text-base font-semibold text-text-primary group-hover:text-accent-primary\">\n            {course.title}\n          </h3>\n          {course.summary ? (\n            <p className=\"mt-1 line-clamp-2 text-sm text-text-secondary\">{course.summary}</p>\n          ) : null}\n        </div>\n        <div className=\"mt-auto flex flex-wrap items-center gap-3 text-xs text-text-muted\">\n          {course.topic ? (\n            <span className=\"inline-flex items-center gap-1\">\n              <Layers size={13} /> {course.topic}\n            </span>\n          ) : null}\n          <span className=\"inline-flex items-center gap-1\">\n            <Clock size={13} /> {formatDuration(course.estimatedMinutes)}\n          </span>\n        </div>\n        {course.tags.length ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            {course.tags.slice(0, 3).map((t) => (\n              <Badge key={t} variant=\"secondary\" className=\"text-[11px]\">\n                {t}\n              </Badge>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </GlassCard>\n  );\n}\n\nexport function CoursesCoursesPagePage() {\n  const navigate = useTechnoSpamNavigate();\n  const [level, setLevel] = useState<'ALL' | TecCourseLevel>('ALL');\n  const [search, setSearch] = useState('');\n\n  const { data, loading, error } = useCoursesQuery({\n    status: 'PUBLISHED',\n    ...(level !== 'ALL' ? { level } : {}),\n  });\n\n  const courses = data?.tecListCourses.items ?? [];\n  const filtered = useMemo(() => {\n    const q = search.trim().toLowerCase();\n    if (!q) return courses;\n    return courses.filter(\n      (c) =>\n        c.title.toLowerCase().includes(q) ||\n        (c.topic ?? '').toLowerCase().includes(q) ||\n        c.tags.some((t) => t.toLowerCase().includes(q))\n    );\n  }, [courses, search]);\n\n  return (\n    <PageLayout\n      hero\n      title=\"Course Catalog\"\n      description=\"Learn technology by doing — runnable, project-based courses across the stack.\"\n      actions={\n        <Button variant=\"outline\" onClick={() => navigate('/courses/my-learning-page')}>\n          <GraduationCap size={16} /> My Learning\n        </Button>\n      }\n    >\n      <div className=\"mb-5 grid grid-cols-2 gap-3 sm:grid-cols-4\">\n        <StatCard label=\"Courses\" value={courses.length} icon={BookOpen} />\n        <StatCard\n          label=\"Beginner-friendly\"\n          value={courses.filter((c) => c.level === 'BEGINNER').length}\n          icon={Sparkles}\n        />\n        <StatCard\n          label=\"Advanced+\"\n          value={courses.filter((c) => c.level === 'ADVANCED' || c.level === 'EXPERT').length}\n          icon={GraduationCap}\n        />\n        <StatCard\n          label=\"Total content\"\n          value={formatDuration(courses.reduce((s, c) => s + c.estimatedMinutes, 0))}\n          icon={Clock}\n        />\n      </div>\n\n      <div className=\"mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <Tabs value={level} onValueChange={(v) => setLevel(v as 'ALL' | TecCourseLevel)}>\n          <TabsList>\n            {LEVELS.map((l) => (\n              <TabsTrigger key={l.value} value={l.value}>\n                {l.label}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n        </Tabs>\n        <div className=\"relative w-full sm:w-72\">\n          <Search\n            className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-text-muted\"\n            size={16}\n          />\n          <Input\n            className=\"pl-9\"\n            placeholder=\"Search courses…\"\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n          />\n        </div>\n      </div>\n\n      {loading && !courses.length ? (\n        <LoadingGrid />\n      ) : error ? (\n        <ErrorView title=\"Couldn't load courses\" error={error} />\n      ) : filtered.length === 0 ? (\n        <EmptyView\n          icon={<BookOpen size={26} />}\n          title={search || level !== 'ALL' ? 'No matching courses' : 'No courses published yet'}\n          description={\n            search || level !== 'ALL'\n              ? 'Try a different search or level filter.'\n              : 'Published courses will appear here. Check back soon — TechnoSpam is pre-launch.'\n          }\n        />\n      ) : (\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {filtered.map((course) => (\n            <CourseCard\n              key={course.id}\n              course={course}\n              onOpen={() => navigate(`/courses/course-details-page?id=${course.id}`)}\n            />\n          ))}\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CoursesCoursesPagePage.js","names":[],"sources":["../../../src/technospam/pages/CoursesCoursesPagePage.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport { BookOpen, Clock, GraduationCap, Layers, Search, Sparkles } from 'lucide-react';\nimport {\n  Badge,\n  Button,\n  GlassCard,\n  Input,\n  Tabs,\n  TabsList,\n  TabsTrigger,\n} from '@burdenoff/fe-libs/ui';\nimport {\n  EmptyView,\n  ErrorView,\n  LoadMore,\n  LoadingGrid,\n  PageLayout,\n  StatCard,\n  StatusBadge,\n} from '../components';\nimport { useTechnoSpamNavigate } from '../providers/TechnoSpamProvider';\nimport {\n  pageArg,\n  useCoursesQuery,\n  usePageLimit,\n  type TecCourse,\n  type TecCourseLevel,\n} from '../api/technospamApi';\nimport { formatDuration } from '../utils/format';\n\nconst LEVELS: Array<{ value: 'ALL' | TecCourseLevel; label: string }> = [\n  { value: 'ALL', label: 'All levels' },\n  { value: 'BEGINNER', label: 'Beginner' },\n  { value: 'INTERMEDIATE', label: 'Intermediate' },\n  { value: 'ADVANCED', label: 'Advanced' },\n  { value: 'EXPERT', label: 'Expert' },\n];\n\n/** Deterministic token-based cover gradient keyed off the course topic/level. */\nfunction coverGradient(seed: string): string {\n  const gradients = [\n    'from-accent-primary/25 to-accent-teal/20',\n    'from-accent-teal/25 to-accent-primary/15',\n    'from-status-success-bg-subtle to-accent-wash',\n    'from-accent-wash to-bg-sunken',\n  ];\n  let hash = 0;\n  for (let i = 0; i < seed.length; i += 1) hash = (hash * 31 + seed.charCodeAt(i)) >>> 0;\n  return gradients[hash % gradients.length]!;\n}\n\nfunction CourseCard({ course, onOpen }: { course: TecCourse; onOpen: () => void }) {\n  return (\n    <GlassCard\n      className=\"group flex cursor-pointer flex-col overflow-hidden transition-shadow hover:shadow-md\"\n      onClick={onOpen}\n    >\n      <div\n        className={`relative flex h-28 items-end bg-gradient-to-br ${coverGradient(\n          course.topic ?? course.level\n        )} p-4`}\n      >\n        <BookOpen className=\"absolute right-3 top-3 text-text-muted/60\" size={20} />\n        <StatusBadge status={course.level} kind=\"level\" />\n      </div>\n      <div className=\"flex flex-1 flex-col gap-3 p-4\">\n        <div className=\"min-w-0\">\n          <h3 className=\"truncate text-base font-semibold text-text-primary group-hover:text-accent-primary\">\n            {course.title}\n          </h3>\n          {course.summary ? (\n            <p className=\"mt-1 line-clamp-2 text-sm text-text-secondary\">{course.summary}</p>\n          ) : null}\n        </div>\n        <div className=\"mt-auto flex flex-wrap items-center gap-3 text-xs text-text-muted\">\n          {course.topic ? (\n            <span className=\"inline-flex items-center gap-1\">\n              <Layers size={13} /> {course.topic}\n            </span>\n          ) : null}\n          <span className=\"inline-flex items-center gap-1\">\n            <Clock size={13} /> {formatDuration(course.estimatedMinutes)}\n          </span>\n        </div>\n        {course.tags.length ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            {course.tags.slice(0, 3).map((t) => (\n              <Badge key={t} variant=\"secondary\" className=\"text-[11px]\">\n                {t}\n              </Badge>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </GlassCard>\n  );\n}\n\nexport function CoursesCoursesPagePage() {\n  const navigate = useTechnoSpamNavigate();\n  const [level, setLevel] = useState<'ALL' | TecCourseLevel>('ALL');\n  const [search, setSearch] = useState('');\n\n  const { limit, more } = usePageLimit();\n  const { data, loading, error } = useCoursesQuery({\n    status: 'PUBLISHED',\n    pagination: pageArg(limit),\n    ...(level !== 'ALL' ? { level } : {}),\n  });\n\n  const courses = data?.tecListCourses.items ?? [];\n  const hasMore = data?.tecListCourses.pageInfo.hasMore ?? false;\n  const filtered = useMemo(() => {\n    const q = search.trim().toLowerCase();\n    if (!q) return courses;\n    return courses.filter(\n      (c) =>\n        c.title.toLowerCase().includes(q) ||\n        (c.topic ?? '').toLowerCase().includes(q) ||\n        c.tags.some((t) => t.toLowerCase().includes(q))\n    );\n  }, [courses, search]);\n\n  return (\n    <PageLayout\n      hero\n      title=\"Course Catalog\"\n      description=\"Learn technology by doing — practical, project-based courses across the stack.\"\n      actions={\n        <Button variant=\"outline\" onClick={() => navigate('/courses/my-learning-page')}>\n          <GraduationCap size={16} /> My Learning\n        </Button>\n      }\n    >\n      <div className=\"mb-5 grid grid-cols-2 gap-3 sm:grid-cols-4\">\n        <StatCard label=\"Courses\" value={courses.length} icon={BookOpen} />\n        <StatCard\n          label=\"Beginner-friendly\"\n          value={courses.filter((c) => c.level === 'BEGINNER').length}\n          icon={Sparkles}\n        />\n        <StatCard\n          label=\"Advanced+\"\n          value={courses.filter((c) => c.level === 'ADVANCED' || c.level === 'EXPERT').length}\n          icon={GraduationCap}\n        />\n        <StatCard\n          label=\"Total content\"\n          value={formatDuration(courses.reduce((s, c) => s + c.estimatedMinutes, 0))}\n          icon={Clock}\n        />\n      </div>\n\n      <div className=\"mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <Tabs value={level} onValueChange={(v) => setLevel(v as 'ALL' | TecCourseLevel)}>\n          <TabsList>\n            {LEVELS.map((l) => (\n              <TabsTrigger key={l.value} value={l.value}>\n                {l.label}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n        </Tabs>\n        <div className=\"relative w-full sm:w-72\">\n          <Search\n            className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-text-muted\"\n            size={16}\n          />\n          <Input\n            className=\"pl-9\"\n            placeholder=\"Search courses…\"\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n          />\n        </div>\n      </div>\n\n      {loading && !courses.length ? (\n        <LoadingGrid />\n      ) : error ? (\n        <ErrorView title=\"Couldn't load courses\" error={error} />\n      ) : filtered.length === 0 ? (\n        <EmptyView\n          icon={<BookOpen size={26} />}\n          title={search || level !== 'ALL' ? 'No matching courses' : 'No courses published yet'}\n          description={\n            search || level !== 'ALL'\n              ? 'Try a different search or level filter.'\n              : 'Published courses will appear here. Check back soon — TechnoSpam is pre-launch.'\n          }\n        />\n      ) : (\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {filtered.map((course) => (\n            <CourseCard\n              key={course.id}\n              course={course}\n              onOpen={() => navigate(`/courses/course-details-page?id=${course.id}`)}\n            />\n          ))}\n        </div>\n      )}\n      <LoadMore hasMore={hasMore} loading={loading} onClick={more} />\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/technospam/pages/CoursesMyLearningPagePage.js

@@ -54,6 +54,9 @@ function b({ e, onOpen: t }) {
 				}), /* @__PURE__ */ _(v, {
 					variant: "ghost",
 					size: "sm",
+					onClick: (e) => {
+						e.stopPropagation(), t();
+					},
 					children: [/* @__PURE__ */ g(h, { size: 15 }), " Resume"]
 				})]
 			})

package/dist/technospam/pages/CoursesMyLearningPagePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CoursesMyLearningPagePage.js","names":[],"sources":["../../../src/technospam/pages/CoursesMyLearningPagePage.tsx"],"sourcesContent":["import { Award, BookOpen, Clock, GraduationCap, PlayCircle } from 'lucide-react';\nimport { Button, GlassCard } from '@burdenoff/fe-libs/ui';\nimport {\n  EmptyView,\n  ErrorView,\n  LoadingRows,\n  PageLayout,\n  StatCard,\n  StatusBadge,\n} from '../components';\nimport { useTechnoSpam, useTechnoSpamNavigate } from '../providers/TechnoSpamProvider';\nimport {\n  useEnrollmentsQuery,\n  useCertificatesQuery,\n  type TecEnrollment,\n} from '../api/technospamApi';\nimport { formatDate, relativeTime } from '../utils/format';\n\nfunction EnrollmentRow({ e, onOpen }: { e: TecEnrollment; onOpen: () => void }) {\n  return (\n    <GlassCard\n      className=\"flex cursor-pointer items-center gap-4 p-4 transition-shadow hover:shadow-md\"\n      onClick={onOpen}\n    >\n      <span className=\"flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-accent-wash text-accent-primary\">\n        <BookOpen size={20} />\n      </span>\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex items-center gap-2\">\n          <span className=\"truncate text-sm font-semibold text-text-primary\">\n            {e.course?.title ?? 'Course'}\n          </span>\n          <StatusBadge status={e.status} />\n        </div>\n        <div className=\"mt-1 flex items-center gap-2 text-xs text-text-muted\">\n          <span>{e.lessonsCompleted} lessons done</span>\n          <span>·</span>\n          <span>Active {relativeTime(e.lastActiveAt ?? e.startedAt)}</span>\n        </div>\n        <div className=\"mt-2 h-1.5 w-full overflow-hidden rounded-full bg-bg-sunken\">\n          <div\n            className=\"h-full rounded-full bg-accent-primary\"\n            style={{ width: `${e.progressPct}%` }}\n          />\n        </div>\n      </div>\n      <div className=\"shrink-0 text-right\">\n        <div className=\"text-lg font-semibold text-text-primary\">{e.progressPct}%</div>\n        <Button variant=\"ghost\" size=\"sm\">\n          <PlayCircle size={15} /> Resume\n        </Button>\n      </div>\n    </GlassCard>\n  );\n}\n\nexport function CoursesMyLearningPagePage() {\n  const navigate = useTechnoSpamNavigate();\n  const { currentUser } = useTechnoSpam();\n  const learnerId = currentUser?.id;\n\n  const { data, loading, error } = useEnrollmentsQuery(learnerId ? { learnerId } : {});\n  const { data: certData } = useCertificatesQuery(learnerId ? { learnerId } : {});\n\n  const enrollments = data?.tecListEnrollments.items ?? [];\n  const certificates = certData?.tecListCertificates ?? [];\n  const completed = enrollments.filter((e) => e.status === 'COMPLETED').length;\n  const inProgress = enrollments.filter(\n    (e) => e.status === 'IN_PROGRESS' || e.status === 'ENROLLED'\n  ).length;\n\n  return (\n    <PageLayout\n      hero\n      title=\"My Learning\"\n      description=\"Track your enrolled courses, progress, and earned certificates.\"\n      actions={\n        <Button variant=\"outline\" onClick={() => navigate('/courses/courses-page')}>\n          <BookOpen size={16} /> Browse catalog\n        </Button>\n      }\n    >\n      <div className=\"mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4\">\n        <StatCard label=\"Enrolled\" value={enrollments.length} icon={BookOpen} />\n        <StatCard label=\"In progress\" value={inProgress} icon={PlayCircle} />\n        <StatCard label=\"Completed\" value={completed} icon={GraduationCap} />\n        <StatCard label=\"Certificates\" value={certificates.length} icon={Award} />\n      </div>\n\n      {loading && !enrollments.length ? (\n        <LoadingRows count={3} height=\"h-24\" />\n      ) : error ? (\n        <ErrorView title=\"Couldn't load your learning\" error={error} />\n      ) : enrollments.length === 0 ? (\n        <EmptyView\n          icon={<BookOpen size={26} />}\n          title=\"You haven't enrolled yet\"\n          description=\"Browse the catalog and enroll in a course to start building skill by doing.\"\n          action={<Button onClick={() => navigate('/courses/courses-page')}>Browse courses</Button>}\n        />\n      ) : (\n        <div className=\"space-y-3\">\n          {enrollments.map((e) => (\n            <EnrollmentRow\n              key={e.id}\n              e={e}\n              onOpen={() => navigate(`/courses/course-details-page?id=${e.courseId}`)}\n            />\n          ))}\n        </div>\n      )}\n\n      {certificates.length > 0 ? (\n        <div className=\"mt-8\">\n          <h2 className=\"mb-3 text-base font-semibold text-text-primary\">Certificates</h2>\n          <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3\">\n            {certificates.map((c) => (\n              <GlassCard key={c.id} className=\"flex items-center gap-3 p-4\">\n                <Award className=\"text-accent-teal\" size={22} />\n                <div className=\"min-w-0\">\n                  <div className=\"truncate text-sm font-medium text-text-primary\">\n                    {c.course?.title ?? 'Certificate'}\n                  </div>\n                  <div className=\"text-xs text-text-muted\">\n                    Score {c.score} · Issued {formatDate(c.issuedAt)}\n                  </div>\n                </div>\n              </GlassCard>\n            ))}\n          </div>\n        </div>\n      ) : null}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CoursesMyLearningPagePage.js","names":[],"sources":["../../../src/technospam/pages/CoursesMyLearningPagePage.tsx"],"sourcesContent":["import { Award, BookOpen, Clock, GraduationCap, PlayCircle } from 'lucide-react';\nimport { Button, GlassCard } from '@burdenoff/fe-libs/ui';\nimport {\n  EmptyView,\n  ErrorView,\n  LoadingRows,\n  PageLayout,\n  StatCard,\n  StatusBadge,\n} from '../components';\nimport { useTechnoSpam, useTechnoSpamNavigate } from '../providers/TechnoSpamProvider';\nimport {\n  useEnrollmentsQuery,\n  useCertificatesQuery,\n  type TecEnrollment,\n} from '../api/technospamApi';\nimport { formatDate, relativeTime } from '../utils/format';\n\nfunction EnrollmentRow({ e, onOpen }: { e: TecEnrollment; onOpen: () => void }) {\n  return (\n    <GlassCard\n      className=\"flex cursor-pointer items-center gap-4 p-4 transition-shadow hover:shadow-md\"\n      onClick={onOpen}\n    >\n      <span className=\"flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-accent-wash text-accent-primary\">\n        <BookOpen size={20} />\n      </span>\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex items-center gap-2\">\n          <span className=\"truncate text-sm font-semibold text-text-primary\">\n            {e.course?.title ?? 'Course'}\n          </span>\n          <StatusBadge status={e.status} />\n        </div>\n        <div className=\"mt-1 flex items-center gap-2 text-xs text-text-muted\">\n          <span>{e.lessonsCompleted} lessons done</span>\n          <span>·</span>\n          <span>Active {relativeTime(e.lastActiveAt ?? e.startedAt)}</span>\n        </div>\n        <div className=\"mt-2 h-1.5 w-full overflow-hidden rounded-full bg-bg-sunken\">\n          <div\n            className=\"h-full rounded-full bg-accent-primary\"\n            style={{ width: `${e.progressPct}%` }}\n          />\n        </div>\n      </div>\n      <div className=\"shrink-0 text-right\">\n        <div className=\"text-lg font-semibold text-text-primary\">{e.progressPct}%</div>\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={(ev) => {\n            ev.stopPropagation();\n            onOpen();\n          }}\n        >\n          <PlayCircle size={15} /> Resume\n        </Button>\n      </div>\n    </GlassCard>\n  );\n}\n\nexport function CoursesMyLearningPagePage() {\n  const navigate = useTechnoSpamNavigate();\n  const { currentUser } = useTechnoSpam();\n  const learnerId = currentUser?.id;\n\n  const { data, loading, error } = useEnrollmentsQuery(learnerId ? { learnerId } : {});\n  const { data: certData } = useCertificatesQuery(learnerId ? { learnerId } : {});\n\n  const enrollments = data?.tecListEnrollments.items ?? [];\n  const certificates = certData?.tecListCertificates ?? [];\n  const completed = enrollments.filter((e) => e.status === 'COMPLETED').length;\n  const inProgress = enrollments.filter(\n    (e) => e.status === 'IN_PROGRESS' || e.status === 'ENROLLED'\n  ).length;\n\n  return (\n    <PageLayout\n      hero\n      title=\"My Learning\"\n      description=\"Track your enrolled courses, progress, and earned certificates.\"\n      actions={\n        <Button variant=\"outline\" onClick={() => navigate('/courses/courses-page')}>\n          <BookOpen size={16} /> Browse catalog\n        </Button>\n      }\n    >\n      <div className=\"mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4\">\n        <StatCard label=\"Enrolled\" value={enrollments.length} icon={BookOpen} />\n        <StatCard label=\"In progress\" value={inProgress} icon={PlayCircle} />\n        <StatCard label=\"Completed\" value={completed} icon={GraduationCap} />\n        <StatCard label=\"Certificates\" value={certificates.length} icon={Award} />\n      </div>\n\n      {loading && !enrollments.length ? (\n        <LoadingRows count={3} height=\"h-24\" />\n      ) : error ? (\n        <ErrorView title=\"Couldn't load your learning\" error={error} />\n      ) : enrollments.length === 0 ? (\n        <EmptyView\n          icon={<BookOpen size={26} />}\n          title=\"You haven't enrolled yet\"\n          description=\"Browse the catalog and enroll in a course to start building skill by doing.\"\n          action={<Button onClick={() => navigate('/courses/courses-page')}>Browse courses</Button>}\n        />\n      ) : (\n        <div className=\"space-y-3\">\n          {enrollments.map((e) => (\n            <EnrollmentRow\n              key={e.id}\n              e={e}\n              onOpen={() => navigate(`/courses/course-details-page?id=${e.courseId}`)}\n            />\n          ))}\n        </div>\n      )}\n\n      {certificates.length > 0 ? (\n        <div className=\"mt-8\">\n          <h2 className=\"mb-3 text-base font-semibold text-text-primary\">Certificates</h2>\n          <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3\">\n            {certificates.map((c) => (\n              <GlassCard key={c.id} className=\"flex items-center gap-3 p-4\">\n                <Award className=\"text-accent-teal\" size={22} />\n                <div className=\"min-w-0\">\n                  <div className=\"truncate text-sm font-medium text-text-primary\">\n                    {c.course?.title ?? 'Certificate'}\n                  </div>\n                  <div className=\"text-xs text-text-muted\">\n                    Score {c.score} · Issued {formatDate(c.issuedAt)}\n                  </div>\n                </div>\n              </GlassCard>\n            ))}\n          </div>\n        </div>\n      ) : null}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/technospam/pages/HackathonsHackathonsPagePage.js

@@ -3,15 +3,16 @@ import { PageLayout as t } from "../components/PageLayout.js";
 import { StatCard as n } from "../components/StatCard.js";
 import { formatDate as r, formatMoney as i } from "../utils/format.js";
 import { StatusBadge as a } from "../components/StatusBadge.js";
-import { EmptyView as o, ErrorView as s, LoadingGrid as c } from "../components/StateViews.js";
+import { LoadMore as o } from "../components/LoadMore.js";
+import { EmptyView as s, ErrorView as c, LoadingGrid as l } from "../components/StateViews.js";
 import "../components/index.js";
-import { useHackathonsQuery as l } from "../api/technospamApi.js";
-import { useState as u } from "react";
-import { Award as d, CalendarDays as f, Sparkles as p, Trophy as m, Users as h } from "lucide-react";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { Badge as v, GlassCard as y, Tabs as b, TabsList as x, TabsTrigger as S } from "@burdenoff/fe-libs/ui";
+import { pageArg as u, useHackathonsQuery as d, usePageLimit as f } from "../api/technospamApi.js";
+import { useMemo as p, useState as m } from "react";
+import { Award as h, CalendarDays as g, Search as _, Sparkles as v, Trophy as y, Users as b } from "lucide-react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { Badge as C, GlassCard as w, Input as T, Tabs as E, TabsList as D, TabsTrigger as O } from "@burdenoff/fe-libs/ui";
 //#region src/technospam/pages/HackathonsHackathonsPagePage.tsx
-var C = [
+var k = [
 	{
 		value: "ALL",
 		label: "All"
@@ -33,7 +34,7 @@ var C = [
 		label: "Completed"
 	}
 ];
-function w(e) {
+function A(e) {
 	let t = [
 		"from-accent-primary/25 to-accent-teal/20",
 		"from-accent-teal/25 to-accent-primary/15",
@@ -43,62 +44,62 @@ function w(e) {
 	for (let t = 0; t < e.length; t += 1) n = n * 31 + e.charCodeAt(t) >>> 0;
 	return t[n % t.length];
 }
-function T({ hackathon: e, onOpen: t }) {
-	return /* @__PURE__ */ _(y, {
+function j({ hackathon: e, onOpen: t }) {
+	return /* @__PURE__ */ S(w, {
 		className: "group flex cursor-pointer flex-col overflow-hidden transition-shadow hover:shadow-md",
 		onClick: t,
-		children: [/* @__PURE__ */ _("div", {
-			className: `relative flex h-24 items-end bg-gradient-to-br ${w(e.theme ?? e.id)} p-4`,
-			children: [/* @__PURE__ */ g(m, {
+		children: [/* @__PURE__ */ S("div", {
+			className: `relative flex h-24 items-end bg-gradient-to-br ${A(e.theme ?? e.id)} p-4`,
+			children: [/* @__PURE__ */ x(y, {
 				className: "absolute right-3 top-3 text-text-muted/60",
 				size: 20
-			}), /* @__PURE__ */ g(a, { status: e.status })]
-		}), /* @__PURE__ */ _("div", {
+			}), /* @__PURE__ */ x(a, { status: e.status })]
+		}), /* @__PURE__ */ S("div", {
 			className: "flex flex-1 flex-col gap-3 p-4",
 			children: [
-				/* @__PURE__ */ _("div", {
+				/* @__PURE__ */ S("div", {
 					className: "min-w-0",
-					children: [/* @__PURE__ */ g("h3", {
+					children: [/* @__PURE__ */ x("h3", {
 						className: "truncate text-base font-semibold text-text-primary group-hover:text-accent-primary",
 						children: e.title
-					}), e.theme ? /* @__PURE__ */ g("p", {
+					}), e.theme ? /* @__PURE__ */ x("p", {
 						className: "mt-1 line-clamp-2 text-sm text-text-secondary",
 						children: e.theme
 					}) : null]
 				}),
-				/* @__PURE__ */ _("div", {
+				/* @__PURE__ */ S("div", {
 					className: "mt-auto flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-text-muted",
-					children: [/* @__PURE__ */ _("span", {
+					children: [/* @__PURE__ */ S("span", {
 						className: "inline-flex items-center gap-1",
 						children: [
-							/* @__PURE__ */ g(f, { size: 13 }),
+							/* @__PURE__ */ x(g, { size: 13 }),
 							" ",
 							r(e.startAt),
 							" –",
 							" ",
 							r(e.endAt)
 						]
-					}), /* @__PURE__ */ _("span", {
+					}), /* @__PURE__ */ S("span", {
 						className: "inline-flex items-center gap-1",
 						children: [
-							/* @__PURE__ */ g(h, { size: 13 }),
+							/* @__PURE__ */ x(b, { size: 13 }),
 							" Team of ",
 							e.maxTeamSize
 						]
 					})]
 				}),
-				/* @__PURE__ */ _("div", {
+				/* @__PURE__ */ S("div", {
 					className: "flex items-center gap-1.5 text-sm font-medium text-accent-teal",
 					children: [
-						/* @__PURE__ */ g(d, { size: 15 }),
+						/* @__PURE__ */ x(h, { size: 15 }),
 						" ",
 						i(e.prizePool, e.currency),
 						" prize pool"
 					]
 				}),
-				e.tags.length ? /* @__PURE__ */ g("div", {
+				e.tags.length ? /* @__PURE__ */ x("div", {
 					className: "flex flex-wrap gap-1.5",
-					children: e.tags.slice(0, 4).map((e) => /* @__PURE__ */ g(v, {
+					children: e.tags.slice(0, 4).map((e) => /* @__PURE__ */ x(C, {
 						variant: "secondary",
 						className: "text-[11px]",
 						children: e
@@ -108,62 +109,84 @@ function T({ hackathon: e, onOpen: t }) {
 		})]
 	});
 }
-function E() {
-	let r = e(), [a, f] = u("ALL"), { data: h, loading: v, error: y } = l(a === "ALL" ? {} : { status: a }), w = h?.tecListHackathons.items ?? [], E = w.filter((e) => e.status === "REGISTRATION_OPEN").length, D = w.reduce((e, t) => e + t.prizePool, 0), O = w[0]?.currency ?? "USD";
-	return /* @__PURE__ */ _(t, {
+function M() {
+	let r = e(), [a, g] = m("ALL"), [b, C] = m(""), { limit: w, more: A } = f(), { data: M, loading: N, error: P } = d({
+		pagination: u(w),
+		...a === "ALL" ? {} : { status: a }
+	}), F = M?.tecListHackathons.items ?? [], I = M?.tecListHackathons.pageInfo.hasMore ?? !1, L = p(() => {
+		let e = b.trim().toLowerCase();
+		return e ? F.filter((t) => t.title.toLowerCase().includes(e) || (t.theme ?? "").toLowerCase().includes(e) || t.tags.some((t) => t.toLowerCase().includes(e))) : F;
+	}, [F, b]), R = L.filter((e) => e.status === "REGISTRATION_OPEN").length, z = L.reduce((e, t) => e + t.prizePool, 0), B = L[0]?.currency ?? "USD";
+	return /* @__PURE__ */ S(t, {
 		hero: !0,
 		title: "Hackathons",
 		description: "Compete, collaborate, and ship real projects with a team in a fixed window.",
 		children: [
-			/* @__PURE__ */ _("div", {
+			/* @__PURE__ */ S("div", {
 				className: "mb-5 grid grid-cols-1 gap-3 sm:grid-cols-3",
 				children: [
-					/* @__PURE__ */ g(n, {
+					/* @__PURE__ */ x(n, {
 						label: "Hackathons",
-						value: w.length,
-						icon: m
+						value: L.length,
+						icon: y
 					}),
-					/* @__PURE__ */ g(n, {
+					/* @__PURE__ */ x(n, {
 						label: "Registration open",
-						value: E,
-						icon: p
+						value: R,
+						icon: v
 					}),
-					/* @__PURE__ */ g(n, {
+					/* @__PURE__ */ x(n, {
 						label: "Total prize pool",
-						value: i(D, O),
-						icon: d
+						value: i(z, B),
+						icon: h
 					})
 				]
 			}),
-			/* @__PURE__ */ g("div", {
-				className: "mb-4",
-				children: /* @__PURE__ */ g(b, {
+			/* @__PURE__ */ S("div", {
+				className: "mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
+				children: [/* @__PURE__ */ x(E, {
 					value: a,
-					onValueChange: (e) => f(e),
-					children: /* @__PURE__ */ g(x, { children: C.map((e) => /* @__PURE__ */ g(S, {
+					onValueChange: (e) => g(e),
+					children: /* @__PURE__ */ x(D, { children: k.map((e) => /* @__PURE__ */ x(O, {
 						value: e.value,
 						children: e.label
 					}, e.value)) })
-				})
+				}), /* @__PURE__ */ S("div", {
+					className: "relative w-full sm:w-72",
+					children: [/* @__PURE__ */ x(_, {
+						className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-text-muted",
+						size: 16
+					}), /* @__PURE__ */ x(T, {
+						className: "pl-9",
+						placeholder: "Search hackathons…",
+						value: b,
+						onChange: (e) => C(e.target.value)
+					})]
+				})]
 			}),
-			v && !w.length ? /* @__PURE__ */ g(c, {}) : y ? /* @__PURE__ */ g(s, {
+			N && !L.length ? /* @__PURE__ */ x(l, {}) : P ? /* @__PURE__ */ x(c, {
 				title: "Couldn't load hackathons",
-				error: y
-			}) : w.length === 0 ? /* @__PURE__ */ g(o, {
-				icon: /* @__PURE__ */ g(m, { size: 26 }),
+				error: P
+			}) : L.length === 0 ? /* @__PURE__ */ x(s, {
+				icon: /* @__PURE__ */ x(y, { size: 26 }),
 				title: a === "ALL" ? "No hackathons yet" : "No hackathons in this stage",
 				description: a === "ALL" ? "Upcoming hackathons will appear here. Check back soon — TechnoSpam is pre-launch." : "Try a different stage filter."
-			}) : /* @__PURE__ */ g("div", {
+			}) : /* @__PURE__ */ x("div", {
 				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-				children: w.map((e) => /* @__PURE__ */ g(T, {
+				children: L.map((e) => /* @__PURE__ */ x(j, {
 					hackathon: e,
 					onOpen: () => r(`/hackathons/hackathon-details-page?id=${e.id}`)
 				}, e.id))
+			}),
+			/* @__PURE__ */ x(o, {
+				hasMore: I,
+				loading: N,
+				onClick: A
 			})
 		]
 	});
 }
 //#endregion
-export { E as HackathonsHackathonsPagePage };
+export { M as HackathonsHackathonsPagePage };
 
 //# sourceMappingURL=HackathonsHackathonsPagePage.js.map