@codecademy/brand 3.40.1-alpha.db88c958d7.0 → 4.0.0-alpha.0ae245495b.0

package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/NavPanels.cjs

@@ -0,0 +1,300 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_context = require('../../../GlobalHeader/context.cjs');
+const require_index = require('../AppHeaderDropdownProvider/index.cjs');
+const require_AppHeaderSectionContext = require('../AppHeaderSection/AppHeaderSectionContext.cjs');
+const require_index$1 = require('../../../lib/catalogList/index.cjs');
+const require_index$2 = require('../AppHeaderDietCard/index.cjs');
+const require_PanelLayout = require('../AppHeaderSection/PanelLayout.cjs');
+const require_index$3 = require('../AppHeaderSkillTile/index.cjs');
+const require_consts = require('./consts.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/NavPanels.tsx
+const CourseTopicsPanel = () => {
+	const { globalHeaderItemClick } = require_context.useGlobalHeaderItemClick();
+	const { tabIndex } = require_AppHeaderSectionContext.useAppHeaderSectionContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_PanelLayout.PanelLayout, {
+		heading: "Course topics",
+		description: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: ["Explore free or paid courses in a wide variety of topics. With something for every skill level, it's easy to find a course that fits your goals. Not sure where to start? \xA0", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
+			tabIndex,
+			href: "/welcome/find-a-course",
+			onClick: (event) => globalHeaderItemClick(event, {
+				type: "link",
+				href: "/welcome/find-a-course",
+				text: "Take the quiz",
+				id: "take-the-quiz"
+			}),
+			children: "Take the quiz"
+		})] }),
+		linkItem: {
+			type: "link",
+			href: "/catalog",
+			text: "Explore the full catalog",
+			trackingTarget: "topnav_catalog",
+			id: "explore-all-courses"
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+				variant: "p-large",
+				fontWeight: 700,
+				as: "h3",
+				children: "Popular languages"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.GridBox, {
+				gridTemplateColumns: {
+					_: "1fr",
+					xs: "1fr 1fr",
+					md: "1fr 1fr 1fr"
+				},
+				gap: 8,
+				pl: 0,
+				as: "ul",
+				listStyle: "none",
+				mb: 24,
+				children: require_consts.popularLanguages.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$3.SkillTile, { item }) }, item.id))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+				variant: "p-large",
+				fontWeight: 700,
+				as: "h3",
+				children: "Popular subjects"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.GridBox, {
+				gridTemplateColumns: {
+					_: "1fr",
+					xs: "1fr 1fr",
+					md: "1fr 1fr 1fr"
+				},
+				gap: 8,
+				pl: 0,
+				as: "ul",
+				listStyle: "none",
+				children: require_consts.popularSubjects.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$3.SkillTile, { item }) }, item.id))
+			})
+		]
+	});
+};
+const DietCardGrid = ({ children }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.GridBox, {
+		as: "ul",
+		gridTemplateColumns: {
+			_: "1fr",
+			sm: "repeat(2, minmax(0, 1fr))",
+			md: "repeat(3, minmax(0, 1fr))"
+		},
+		gap: 16,
+		m: 0,
+		p: 0,
+		listStyleType: "none",
+		children
+	});
+};
+const CareerPathsPanel = () => {
+	const { globalHeaderDynamicData } = require_context.useGlobalHeaderDynamicDataContext();
+	const totalCareerPathCount = globalHeaderDynamicData?.catalogDropdown.careerPaths.totalCareerPathCount;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PanelLayout.PanelLayout, {
+		heading: "Career paths",
+		description: "Choose your career and we'll teach you the skills to get job-ready. Each Career Path contains a curated list of lessons, quizzes, videos, and projects to help you learn and practice real-world skills.",
+		linkItem: {
+			type: "link",
+			href: "/catalog?type=career-path",
+			text: `Explore all${totalCareerPathCount ? ` ${totalCareerPathCount}` : ""} career paths`,
+			trackingTarget: "topnav_catalog_header_explore_all_career_paths",
+			id: "explore-all-career-paths"
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DietCardGrid, { children: globalHeaderDynamicData?.catalogDropdown.careerPaths.promotedCareerPaths.map((path) => {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.AppHeaderDietCard, {
+				title: path.title,
+				hours: path.durationHours,
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.LevelIcon, {}),
+				difficulty: path.difficulty,
+				href: path.urlPath,
+				trackingTarget: `careerpath_${path.title}`
+			}, `${path.title}-card`);
+		}) })
+	});
+};
+const SkillPathsPanel = () => {
+	const { globalHeaderDynamicData } = require_context.useGlobalHeaderDynamicDataContext();
+	const totalSkillPathCount = globalHeaderDynamicData?.catalogDropdown.skillPaths.totalSkillPathCount;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PanelLayout.PanelLayout, {
+		heading: "Skill paths",
+		description: "Build in demand skills fast with a short, curated path. Each one includes interactive content to help you learn and apply your new skill in just a few months.",
+		linkItem: {
+			type: "link",
+			href: "/catalog?type=skill-path",
+			text: `Explore all${totalSkillPathCount ? ` ${totalSkillPathCount}` : ""} skill paths`,
+			trackingTarget: "topnav_catalog_header_explore_all_skill_paths",
+			id: "explore-all-skill-paths"
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DietCardGrid, { children: globalHeaderDynamicData?.catalogDropdown.skillPaths.promotedSkillPaths.map((path) => {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.AppHeaderDietCard, {
+				title: path.title,
+				hours: path.durationHours,
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.LevelIcon, {}),
+				difficulty: path.difficulty,
+				href: path.urlPath,
+				trackingTarget: `skill_${path.title}`
+			}, `${path.title}-card`);
+		}) })
+	});
+};
+const Image = _codecademy_gamut.Box.withComponent("img");
+const GrayscaleToColorHoverLink = (0, _emotion_styled.default)(_codecademy_gamut.Anchor)`
+  border: 1px solid ${({ theme }) => theme.colors["border-tertiary"]};
+  border-radius: 8px;
+  filter: grayscale(1);
+  transition: filter 0.2s ease-out;
+  img {
+    filter: ${({ overrideImgFilters }) => overrideImgFilters ? "contrast(5)" : "brightness(0.25)"};
+    transition: filter 0.2s ease-out;
+  }
+  &:hover,
+  &:focus {
+    filter: grayscale(0);
+    img {
+      filter: brightness(1);
+    }
+    border-color: ${({ theme }) => theme.colors.hyper};
+    background-color: ${({ theme }) => theme.colors["navy-100"]};
+  }
+`;
+const ProviderTile = ({ name, href, imgSrc, tabIndex }) => {
+	const { globalHeaderItemClick } = require_context.useGlobalHeaderItemClick();
+	const { handleClose } = require_index.useAppHeaderDropdownContext();
+	const lowercasedProviderName = name.toLowerCase();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GrayscaleToColorHoverLink, {
+		href,
+		variant: "interface",
+		tabIndex,
+		width: "100%",
+		height: 48,
+		p: 8,
+		display: "block",
+		onClick: (event) => {
+			globalHeaderItemClick(event, {
+				type: "link",
+				id: `topnav_catalog_cert_${lowercasedProviderName}`,
+				href,
+				text: name,
+				trackingTarget: `topnav_catalog_cert_${lowercasedProviderName}`
+			});
+			handleClose();
+		},
+		overrideImgFilters: name.toLowerCase() === "kubernetes",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Image, {
+			src: imgSrc,
+			alt: name,
+			display: "block",
+			m: "auto"
+		})
+	}, name);
+};
+const CertificationPathsPanel = () => {
+	const { globalHeaderDynamicData } = require_context.useGlobalHeaderDynamicDataContext();
+	const { tabIndex } = require_AppHeaderSectionContext.useAppHeaderSectionContext();
+	const totalCertificationPathCount = globalHeaderDynamicData?.catalogDropdown.certificationPaths.totalCertificationPathCount;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_PanelLayout.PanelLayout, {
+		heading: "Certification paths",
+		description: "Prepare for top industry certifications with a guided path. Each one includes expert-reviewed lessons, hands-on projects, and practice tests to help you pass the exam.",
+		linkItem: {
+			type: "link",
+			href: "/catalog/certification-prep",
+			text: `Explore all${totalCertificationPathCount ? ` ${totalCertificationPathCount}` : ""} certification paths`,
+			trackingTarget: "topnav_catalog_header_explore_all_certification_paths",
+			id: "explore-all-certification-paths"
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+			as: "h3",
+			fontSize: 18,
+			fontWeight: "bold",
+			children: "Providers"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.GridBox, {
+			gridTemplateColumns: {
+				_: "1fr",
+				xs: "repeat(2, 1fr)",
+				sm: "repeat(3, 1fr)",
+				md: "repeat(4, 1fr)"
+			},
+			gap: 16,
+			width: "100%",
+			as: "ul",
+			listStyle: "none",
+			p: 0,
+			m: 0,
+			children: require_consts.CERTIFICATION_PROVIDERS.map(({ name, logoUrl, hubType }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+				as: "li",
+				width: "100%",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProviderTile, {
+					name,
+					href: hubType === "subhub" ? `/search?query=${name} certifications` : `/catalog/certification-prep?provider=${name.toLowerCase()}`,
+					imgSrc: logoUrl,
+					tabIndex
+				})
+			}, name))
+		})]
+	});
+};
+const LiveLearningImage = _emotion_styled.default.img`
+  object-fit: cover;
+  width: 100%;
+`;
+const LiveLearningPanel = () => {
+	const { globalHeaderItemClick } = require_context.useGlobalHeaderItemClick();
+	const { isCoachingEnabled, tabIndex } = require_AppHeaderSectionContext.useAppHeaderSectionContext();
+	const getImageUrl = (id) => `https://static-assets.codecademy.com/assets/components/cards/global-header/live-learning/v1/${id}.webp`;
+	const { handleClose } = require_index.useAppHeaderDropdownContext();
+	const liveLearningItems = require_index$1.liveLearningNavPanelItems(isCoachingEnabled);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PanelLayout.PanelLayout, {
+		heading: "Live learning",
+		description: liveLearningItems.description,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.GridBox, {
+			gridTemplateColumns: {
+				_: "1fr",
+				md: "repeat(2, 1fr)"
+			},
+			gap: 16,
+			children: liveLearningItems.data.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
+				href: item.href,
+				variant: "interface",
+				onClick: (event) => {
+					globalHeaderItemClick(event, item);
+					handleClose();
+				},
+				tabIndex,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Card, {
+					overflow: "hidden",
+					border: 1,
+					borderColor: "border-tertiary",
+					borderRadius: "lg",
+					isInteractive: true,
+					p: 0,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LiveLearningImage, {
+						src: getImageUrl(item.id),
+						alt: "",
+						loading: "lazy"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+						flexDirection: "column",
+						gap: 8,
+						p: 16,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+							variant: "title-xs",
+							children: item.text
+						}), "description" in item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, { children: item.description })]
+					})]
+				}, item.id)
+			}, item.id))
+		})
+	});
+};
+
+//#endregion
+exports.CareerPathsPanel = CareerPathsPanel;
+exports.CertificationPathsPanel = CertificationPathsPanel;
+exports.CourseTopicsPanel = CourseTopicsPanel;
+exports.LiveLearningPanel = LiveLearningPanel;
+exports.SkillPathsPanel = SkillPathsPanel;