import { CategoryPage, SetupPageReplacer, contentBlockStore } from "@depict-ai/js-ui";
const BLOCK1 = () => {
return <div style="background:green">I'm the first content block</div>;
};
const BLOCK2 = () => {
return <div style="background:red">I'm the second content block</div>;
};
const { getContentBlocksByRow, setContentBlocksByRow } = contentBlockStore([
,
,
{
spanColumns: 2,
spanRows: 2,
position: "left" as const,
content: BLOCK1,
},
]);
const changeBlocks = ({ matches }: { matches: boolean }) => {
const currentBlocks = getContentBlocksByRow();
if (matches) {
delete currentBlocks[3];
} else {
currentBlocks[3] = {
spanColumns: 1,
spanRows: 3,
position: "right" as const,
content: BLOCK2,
};
}
setContentBlocksByRow(currentBlocks);
};
const mql = window.matchMedia("(max-width: 1024px)");
changeBlocks(mql);
mql.addEventListener("change", changeBlocks);
SetupPageReplacer({
isPageToReplace: url => url.pathname == "/category.html",
selectorToReplace: `.replace-for-depict`,
renderContent: () =>
CategoryPage({
categoryProvider,
productCard,
getContentBlocksByRow,
}),
});