@burdenoff/microfe-technospam 2026.512.1 → 2026.704.1

package/dist/technospam/pages/CoursesCoursesPagePage.js

@@ -1,179 +1,187 @@
-import { useTechnoSpamStore as e } from "../store/technospamStore.js";
-import { tWithFallback as t } from "../utils/i18n.js";
-import { useMemo as n, useState as r } from "react";
-import { useI18n as i } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Award as a, Clock as o, Search as s, Sparkles as c, Star as l, Users as u } from "lucide-react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { Badge as p, Button as m, Card as h, CardContent as g, CardHeader as _, CardTitle as v, Input as y } from "@burdenoff/fe-libs/ui";
+import { useTechnoSpamNavigate as e } from "../providers/TechnoSpamProvider.js";
+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 "../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";
 //#region src/technospam/pages/CoursesCoursesPagePage.tsx
-function b() {
-	let { t: b } = i(), x = (e, n, r) => t(b, e, n, r), { courses: S } = e(), [C, w] = r(""), [T, E] = r("all"), D = n(() => S.filter((e) => {
-		let t = C === "" || e.title.toLowerCase().includes(C.toLowerCase()) || e.instructor.toLowerCase().includes(C.toLowerCase()) || e.category.toLowerCase().includes(C.toLowerCase()) || e.tags.some((e) => e.toLowerCase().includes(C.toLowerCase())), n = T === "all" || e.level === T;
-		return t && n;
-	}), [
-		S,
-		C,
-		T
-	]), O = S.filter((e) => e.isFeatured).length, k = S.filter((e) => e.price === 0).length, A = (e) => {
-		switch (e) {
-			case "beginner": return "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400";
-			case "intermediate": return "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400";
-			case "advanced": return "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400";
-			case "expert": return "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400";
-			default: return "";
-		}
-	}, j = [
-		{
-			label: x("technospam.courses.filters.allLevels", "All Levels"),
-			value: "all"
-		},
-		{
-			label: x("technospam.courses.filters.beginner", "Beginner"),
-			value: "beginner"
-		},
-		{
-			label: x("technospam.courses.filters.intermediate", "Intermediate"),
-			value: "intermediate"
-		},
-		{
-			label: x("technospam.courses.filters.advanced", "Advanced"),
-			value: "advanced"
-		},
-		{
-			label: x("technospam.courses.filters.expert", "Expert"),
-			value: "expert"
-		}
-	];
-	return /* @__PURE__ */ f("div", {
-		className: "space-y-6 p-6",
-		children: [
-			/* @__PURE__ */ f("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h1", {
-					className: "text-2xl font-semibold text-foreground",
-					children: x("technospam.courses.title", "Course Catalog")
-				}), /* @__PURE__ */ d("p", {
-					className: "text-sm text-muted-foreground",
-					children: x("technospam.courses.subtitle", "{{count}} courses available", { count: S.length })
-				})] }), /* @__PURE__ */ f("div", {
-					className: "flex gap-2",
-					children: [/* @__PURE__ */ d(p, {
-						variant: "secondary",
-						children: x("technospam.courses.badges.featured", "{{count}} Featured", { count: O })
-					}), /* @__PURE__ */ d(p, {
+var E = [
+	{
+		value: "ALL",
+		label: "All levels"
+	},
+	{
+		value: "BEGINNER",
+		label: "Beginner"
+	},
+	{
+		value: "INTERMEDIATE",
+		label: "Intermediate"
+	},
+	{
+		value: "ADVANCED",
+		label: "Advanced"
+	},
+	{
+		value: "EXPERT",
+		label: "Expert"
+	}
+];
+function D(e) {
+	let t = [
+		"from-accent-primary/25 to-accent-teal/20",
+		"from-accent-teal/25 to-accent-primary/15",
+		"from-status-success-bg-subtle to-accent-wash",
+		"from-accent-wash to-bg-sunken"
+	], n = 0;
+	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, {
+		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, {
+				className: "absolute right-3 top-3 text-text-muted/60",
+				size: 20
+			}), /* @__PURE__ */ _(i, {
+				status: e.level,
+				kind: "level"
+			})]
+		}), /* @__PURE__ */ v("div", {
+			className: "flex flex-1 flex-col gap-3 p-4",
+			children: [
+				/* @__PURE__ */ v("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ _("h3", {
+						className: "truncate text-base font-semibold text-text-primary group-hover:text-accent-primary",
+						children: e.title
+					}), e.summary ? /* @__PURE__ */ _("p", {
+						className: "mt-1 line-clamp-2 text-sm text-text-secondary",
+						children: e.summary
+					}) : null]
+				}),
+				/* @__PURE__ */ v("div", {
+					className: "mt-auto flex flex-wrap items-center gap-3 text-xs text-text-muted",
+					children: [e.topic ? /* @__PURE__ */ v("span", {
+						className: "inline-flex items-center gap-1",
+						children: [
+							/* @__PURE__ */ _(m, { size: 13 }),
+							" ",
+							e.topic
+						]
+					}) : null, /* @__PURE__ */ v("span", {
+						className: "inline-flex items-center gap-1",
+						children: [
+							/* @__PURE__ */ _(f, { size: 13 }),
+							" ",
+							r(e.estimatedMinutes)
+						]
+					})]
+				}),
+				e.tags.length ? /* @__PURE__ */ _("div", {
+					className: "flex flex-wrap gap-1.5",
+					children: e.tags.slice(0, 3).map((e) => /* @__PURE__ */ _(y, {
 						variant: "secondary",
-						children: x("technospam.courses.badges.free", "{{count}} Free", { count: k })
+						className: "text-[11px]",
+						children: e
+					}, e))
+				}) : null
+			]
+		})]
+	});
+}
+function k() {
+	let i = e(), [m, y] = u("ALL"), [x, D] = u(""), { data: k, loading: A, error: j } = c({
+		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, {
+		hero: !0,
+		title: "Course Catalog",
+		description: "Learn technology by doing — runnable, project-based courses across the stack.",
+		actions: /* @__PURE__ */ v(b, {
+			variant: "outline",
+			onClick: () => i("/courses/my-learning-page"),
+			children: [/* @__PURE__ */ _(p, { size: 16 }), " My Learning"]
+		}),
+		children: [
+			/* @__PURE__ */ v("div", {
+				className: "mb-5 grid grid-cols-2 gap-3 sm:grid-cols-4",
+				children: [
+					/* @__PURE__ */ _(n, {
+						label: "Courses",
+						value: M.length,
+						icon: d
+					}),
+					/* @__PURE__ */ _(n, {
+						label: "Beginner-friendly",
+						value: M.filter((e) => e.level === "BEGINNER").length,
+						icon: g
+					}),
+					/* @__PURE__ */ _(n, {
+						label: "Advanced+",
+						value: M.filter((e) => e.level === "ADVANCED" || e.level === "EXPERT").length,
+						icon: p
+					}),
+					/* @__PURE__ */ _(n, {
+						label: "Total content",
+						value: r(M.reduce((e, t) => e + t.estimatedMinutes, 0)),
+						icon: f
+					})
+				]
+			}),
+			/* @__PURE__ */ v("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, {
+						value: e.value,
+						children: e.label
+					}, e.value)) })
+				}), /* @__PURE__ */ v("div", {
+					className: "relative w-full sm:w-72",
+					children: [/* @__PURE__ */ _(h, {
+						className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-text-muted",
+						size: 16
+					}), /* @__PURE__ */ _(S, {
+						className: "pl-9",
+						placeholder: "Search courses…",
+						value: x,
+						onChange: (e) => D(e.target.value)
 					})]
 				})]
 			}),
-			/* @__PURE__ */ d(h, { children: /* @__PURE__ */ d(g, {
-				className: "pt-6",
-				children: /* @__PURE__ */ f("div", {
-					className: "flex flex-col gap-4 sm:flex-row sm:items-center",
-					children: [/* @__PURE__ */ f("div", {
-						className: "relative flex-1",
-						children: [/* @__PURE__ */ d(s, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ d(y, {
-							placeholder: x("technospam.courses.search.placeholder", "Search courses, instructors, topics..."),
-							value: C,
-							onChange: (e) => w(e.target.value),
-							className: "pl-9"
-						})]
-					}), /* @__PURE__ */ d("div", {
-						className: "flex flex-wrap gap-2",
-						children: j.map((e) => /* @__PURE__ */ d(m, {
-							variant: T === e.value ? "default" : "outline",
-							size: "sm",
-							onClick: () => E(e.value),
-							children: e.label
-						}, e.value))
-					})]
-				})
-			}) }),
-			D.length === 0 ? /* @__PURE__ */ d("div", {
-				className: "py-12 text-center text-sm text-muted-foreground",
-				children: x("technospam.courses.empty", "No courses match your filters")
-			}) : /* @__PURE__ */ d("div", {
-				className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
-				children: D.map((e) => /* @__PURE__ */ f(h, {
-					className: "flex flex-col",
-					children: [/* @__PURE__ */ d(_, {
-						className: "pb-3",
-						children: /* @__PURE__ */ f("div", {
-							className: "flex items-start justify-between",
-							children: [/* @__PURE__ */ f("div", {
-								className: "space-y-1",
-								children: [/* @__PURE__ */ d(v, {
-									className: "text-base leading-tight",
-									children: e.title
-								}), /* @__PURE__ */ d("p", {
-									className: "text-xs text-muted-foreground",
-									children: e.instructor
-								})]
-							}), e.isFeatured && /* @__PURE__ */ d(c, { className: "h-4 w-4 shrink-0 text-yellow-500" })]
-						})
-					}), /* @__PURE__ */ f(g, {
-						className: "flex flex-1 flex-col justify-between space-y-3",
-						children: [/* @__PURE__ */ f("div", {
-							className: "space-y-3",
-							children: [
-								/* @__PURE__ */ f("div", {
-									className: "flex flex-wrap gap-1.5",
-									children: [/* @__PURE__ */ d("span", {
-										className: `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${A(e.level)}`,
-										children: e.level
-									}), /* @__PURE__ */ d(p, {
-										variant: "secondary",
-										className: "text-xs",
-										children: e.category
-									})]
-								}),
-								/* @__PURE__ */ f("div", {
-									className: "flex items-center gap-3 text-xs text-muted-foreground",
-									children: [
-										/* @__PURE__ */ f("span", {
-											className: "flex items-center gap-1",
-											children: [/* @__PURE__ */ d(l, { className: "h-3 w-3 text-yellow-500" }), e.rating]
-										}),
-										/* @__PURE__ */ f("span", {
-											className: "flex items-center gap-1",
-											children: [/* @__PURE__ */ d(u, { className: "h-3 w-3" }), e.enrollmentCount.toLocaleString()]
-										}),
-										/* @__PURE__ */ f("span", {
-											className: "flex items-center gap-1",
-											children: [/* @__PURE__ */ d(o, { className: "h-3 w-3" }), x("technospam.courses.course.duration", "{{hours}}h", { hours: e.duration })]
-										})
-									]
-								}),
-								/* @__PURE__ */ d("div", {
-									className: "flex flex-wrap gap-1",
-									children: e.tags.map((e) => /* @__PURE__ */ d(p, {
-										variant: "outline",
-										className: "text-xs",
-										children: e
-									}, e))
-								}),
-								e.certificateAvailable && /* @__PURE__ */ f("div", {
-									className: "flex items-center gap-1 text-xs text-muted-foreground",
-									children: [/* @__PURE__ */ d(a, { className: "h-3 w-3" }), x("technospam.courses.course.certificate", "Certificate available")]
-								})
-							]
-						}), /* @__PURE__ */ f("div", {
-							className: "flex items-center justify-between pt-2",
-							children: [/* @__PURE__ */ d("span", {
-								className: "text-lg font-bold",
-								children: e.price === 0 ? x("technospam.courses.course.free", "Free") : x("technospam.courses.course.price", "${{price}}", { price: e.price })
-							}), /* @__PURE__ */ d(m, {
-								size: "sm",
-								children: x("technospam.courses.actions.enroll", "Enroll Now")
-							})]
-						})]
-					})]
+			A && !M.length ? /* @__PURE__ */ _(s, {}) : j ? /* @__PURE__ */ _(o, {
+				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", {
+				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
+				children: N.map((e) => /* @__PURE__ */ _(O, {
+					course: e,
+					onOpen: () => i(`/courses/course-details-page?id=${e.id}`)
 				}, e.id))
 			})
 		]
 	});
 }
 //#endregion
-export { b as CoursesCoursesPagePage };
+export { k 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 { useState, useMemo } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  Badge,\n  Button,\n  Input,\n} from '@burdenoff/fe-libs/ui';\nimport { Search, Star, Users, Clock, Award, Sparkles } from 'lucide-react';\nimport { useTechnoSpamStore } from '../store/technospamStore';\nimport { tWithFallback } from '../utils/i18n';\n\ntype LevelFilter = 'all' | 'beginner' | 'intermediate' | 'advanced' | 'expert';\n\nexport function CoursesCoursesPagePage() {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string, params?: Record<string, string | number>): string =>\n    tWithFallback(t, key, fallback, params);\n  const { courses } = useTechnoSpamStore();\n  const [searchTerm, setSearchTerm] = useState('');\n  const [levelFilter, setLevelFilter] = useState<LevelFilter>('all');\n\n  const filteredCourses = useMemo(() => {\n    return courses.filter((course) => {\n      const matchesSearch =\n        searchTerm === '' ||\n        course.title.toLowerCase().includes(searchTerm.toLowerCase()) ||\n        course.instructor.toLowerCase().includes(searchTerm.toLowerCase()) ||\n        course.category.toLowerCase().includes(searchTerm.toLowerCase()) ||\n        course.tags.some((tag) => tag.toLowerCase().includes(searchTerm.toLowerCase()));\n      const matchesLevel = levelFilter === 'all' || course.level === levelFilter;\n      return matchesSearch && matchesLevel;\n    });\n  }, [courses, searchTerm, levelFilter]);\n\n  const featuredCount = courses.filter((course) => course.isFeatured).length;\n  const freeCount = courses.filter((course) => course.price === 0).length;\n\n  const levelColor = (level: string) => {\n    switch (level) {\n      case 'beginner':\n        return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400';\n      case 'intermediate':\n        return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400';\n      case 'advanced':\n        return 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400';\n      case 'expert':\n        return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400';\n      default:\n        return '';\n    }\n  };\n\n  const levels: { label: string; value: LevelFilter }[] = [\n    { label: tr('technospam.courses.filters.allLevels', 'All Levels'), value: 'all' },\n    { label: tr('technospam.courses.filters.beginner', 'Beginner'), value: 'beginner' },\n    {\n      label: tr('technospam.courses.filters.intermediate', 'Intermediate'),\n      value: 'intermediate',\n    },\n    { label: tr('technospam.courses.filters.advanced', 'Advanced'), value: 'advanced' },\n    { label: tr('technospam.courses.filters.expert', 'Expert'), value: 'expert' },\n  ];\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h1 className=\"text-2xl font-semibold text-foreground\">\n            {tr('technospam.courses.title', 'Course Catalog')}\n          </h1>\n          <p className=\"text-sm text-muted-foreground\">\n            {tr('technospam.courses.subtitle', '{{count}} courses available', {\n              count: courses.length,\n            })}\n          </p>\n        </div>\n        <div className=\"flex gap-2\">\n          <Badge variant=\"secondary\">\n            {tr('technospam.courses.badges.featured', '{{count}} Featured', {\n              count: featuredCount,\n            })}\n          </Badge>\n          <Badge variant=\"secondary\">\n            {tr('technospam.courses.badges.free', '{{count}} Free', { count: freeCount })}\n          </Badge>\n        </div>\n      </div>\n\n      <Card>\n        <CardContent className=\"pt-6\">\n          <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center\">\n            <div className=\"relative flex-1\">\n              <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground\" />\n              <Input\n                placeholder={tr(\n                  'technospam.courses.search.placeholder',\n                  'Search courses, instructors, topics...'\n                )}\n                value={searchTerm}\n                onChange={(e) => setSearchTerm(e.target.value)}\n                className=\"pl-9\"\n              />\n            </div>\n            <div className=\"flex flex-wrap gap-2\">\n              {levels.map((level) => (\n                <Button\n                  key={level.value}\n                  variant={levelFilter === level.value ? 'default' : 'outline'}\n                  size=\"sm\"\n                  onClick={() => setLevelFilter(level.value)}\n                >\n                  {level.label}\n                </Button>\n              ))}\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      {filteredCourses.length === 0 ? (\n        <div className=\"py-12 text-center text-sm text-muted-foreground\">\n          {tr('technospam.courses.empty', 'No courses match your filters')}\n        </div>\n      ) : (\n        <div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-3\">\n          {filteredCourses.map((course) => (\n            <Card key={course.id} className=\"flex flex-col\">\n              <CardHeader className=\"pb-3\">\n                <div className=\"flex items-start justify-between\">\n                  <div className=\"space-y-1\">\n                    <CardTitle className=\"text-base leading-tight\">{course.title}</CardTitle>\n                    <p className=\"text-xs text-muted-foreground\">{course.instructor}</p>\n                  </div>\n                  {course.isFeatured && <Sparkles className=\"h-4 w-4 shrink-0 text-yellow-500\" />}\n                </div>\n              </CardHeader>\n              <CardContent className=\"flex flex-1 flex-col justify-between space-y-3\">\n                <div className=\"space-y-3\">\n                  <div className=\"flex flex-wrap gap-1.5\">\n                    <span\n                      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${levelColor(course.level)}`}\n                    >\n                      {course.level}\n                    </span>\n                    <Badge variant=\"secondary\" className=\"text-xs\">\n                      {course.category}\n                    </Badge>\n                  </div>\n                  <div className=\"flex items-center gap-3 text-xs text-muted-foreground\">\n                    <span className=\"flex items-center gap-1\">\n                      <Star className=\"h-3 w-3 text-yellow-500\" />\n                      {course.rating}\n                    </span>\n                    <span className=\"flex items-center gap-1\">\n                      <Users className=\"h-3 w-3\" />\n                      {course.enrollmentCount.toLocaleString()}\n                    </span>\n                    <span className=\"flex items-center gap-1\">\n                      <Clock className=\"h-3 w-3\" />\n                      {tr('technospam.courses.course.duration', '{{hours}}h', {\n                        hours: course.duration,\n                      })}\n                    </span>\n                  </div>\n                  <div className=\"flex flex-wrap gap-1\">\n                    {course.tags.map((tag) => (\n                      <Badge key={tag} variant=\"outline\" className=\"text-xs\">\n                        {tag}\n                      </Badge>\n                    ))}\n                  </div>\n                  {course.certificateAvailable && (\n                    <div className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n                      <Award className=\"h-3 w-3\" />\n                      {tr('technospam.courses.course.certificate', 'Certificate available')}\n                    </div>\n                  )}\n                </div>\n                <div className=\"flex items-center justify-between pt-2\">\n                  <span className=\"text-lg font-bold\">\n                    {course.price === 0\n                      ? tr('technospam.courses.course.free', 'Free')\n                      : tr('technospam.courses.course.price', '${{price}}', {\n                          price: course.price,\n                        })}\n                  </span>\n                  <Button size=\"sm\">{tr('technospam.courses.actions.enroll', 'Enroll Now')}</Button>\n                </div>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n      )}\n    </div>\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  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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"}