Pinned
Pinned
new test
import * as React from "react"; import type { Override } from "framer";
// e.g. /notes-app/my-post -> "my-post"
function getCurrentSlugFromPath(): string {
const parts = window.location.pathname.split("/").filter(Boolean);
return decodeURIComponent(parts[parts.length - 1] || "");
}
// Works for absolute or relative hrefs ("/notes-app/foo")
function extractSlugFromUrl(url?: string): string {
if (!url) return "";
try {
const base = url.startsWith("http") ? undefined : window.location.origin;
const u = new URL(url, base);
const parts = u.pathname.split("/").filter(Boolean);
return decodeURIComponent(parts[parts.length - 1] || "");
} catch {
const parts = url.split("?")[0].split("#")[0].split("/").filter(Boolean);
return decodeURIComponent(parts[parts.length - 1] || "");
}
}
/**
Attach to the List Item instance inside the CMS list.
It will try props.slug if present, otherwise derive from props.link/props.href.
Keep variants named "Default" and "Active".
*/
export function noteItemActive(props: { slug?: string; link?: any; href?: string }): Override {
const [currentSlug, setCurrentSlug] = React.useState(getCurrentSlugFromPath());
React.useEffect(() => {
const onPop = () => setCurrentSlug(getCurrentSlugFromPath());
window.addEventListener("popstate", onPop);
return () => window.removeEventListener("popstate", onPop);
}, []);
const itemSlug =
props.slug ||
extractSlugFromUrl(typeof props.link === "string" ? props.link : props.link?.href || props.href);
const isActive = !!itemSlug && itemSlug === currentSlug;
return isActive ? { variant: "Active" } : { variant: "Default" };
}