first

apps/web/modules/marketing/shared/components/ContentMenu.tsx

@@ -0,0 +1,60 @@
+import { LocaleLink } from "@i18n/routing";
+import type { ContentStructureItem } from "@shared/lib/content";
+
+function ContentMenuItem({
+	label,
+	path,
+	isPage,
+	children,
+	activePath,
+}: ContentStructureItem & { activePath: string }) {
+	return (
+		<>
+			{isPage ? (
+				<LocaleLink
+					key={path}
+					className={`block rounded-full px-4 py-1 ${path === activePath ? "bg-primary/5 font-bold" : ""}`}
+					href={`/docs/${path}`}
+				>
+					{label}
+				</LocaleLink>
+			) : (
+				<span key={path} className="block px-4 py-1">
+					{label}
+				</span>
+			)}
+
+			{children && (
+				<div className="-mr-4 pl-4">
+					{children.map((subItem) => (
+						<ContentMenuItem
+							key={subItem.path}
+							{...subItem}
+							activePath={activePath}
+						/>
+					))}
+				</div>
+			)}
+		</>
+	);
+}
+
+export function ContentMenu({
+	items,
+	activePath,
+}: {
+	items: ContentStructureItem[];
+	activePath: string;
+}) {
+	return (
+		<ul className="-mx-4 list-none space-y-2 pr-4">
+			{items.map((item) => (
+				<ContentMenuItem
+					key={item.path}
+					{...item}
+					activePath={activePath}
+				/>
+			))}
+		</ul>
+	);
+}