9bc703a437
* mvp done * wip * fix ts errors and other code improvements * fix ts errors * ensure mobile layout support * Make skeleton responsive on screen resize * refactor * Add test for EmbedElement * make skeleton closer to pixel perfect * Address PR feedback * Remove PR_TODO --------- Co-authored-by: Benny Joo <sldisek783@gmail.com> Co-authored-by: amrit <iamamrit27@gmail.com>
59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
import type { AllPossibleLayouts, EmbedPageType } from "../types";
|
|
import { generateSkeleton } from "../ui/skeleton";
|
|
|
|
const html = ({
|
|
layout = "month_view",
|
|
pageType,
|
|
}: {
|
|
layout?: AllPossibleLayouts;
|
|
pageType: EmbedPageType | null;
|
|
}) => {
|
|
const { skeletonContent, skeletonContainerStyle, skeletonStyle } = getSkeletonData({
|
|
layout,
|
|
pageType,
|
|
});
|
|
|
|
return `
|
|
<div id="skeleton-container" style="${skeletonContainerStyle}">
|
|
<div id="skeleton" style="${skeletonStyle}" class="absolute z-highest">
|
|
${skeletonContent}
|
|
</div>
|
|
<div id="wrapper" style="top:50%; left:50%; transform:translate(-50%,-50%)" class="absolute z-highest">
|
|
<div class="loader border-brand-default dark:border-darkmodebrand">
|
|
<span class="loader-inner bg-brand dark:bg-darkmodebrand"></span>
|
|
</div>
|
|
<div id="error" style="transform:translate(-50%,-50%)" class="hidden">
|
|
Something went wrong.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<slot></slot>
|
|
`;
|
|
};
|
|
|
|
export const getSkeletonData = ({
|
|
layout,
|
|
pageType,
|
|
}: {
|
|
layout: AllPossibleLayouts;
|
|
pageType: EmbedPageType | null;
|
|
}) => {
|
|
// We keep width 100% for mobile because we want it to take the entire screen width, which it would take because skeletonContainer is taking entire screen width
|
|
const mobileStyleForSkeleton = "width:100%;";
|
|
// We don't do width:100% here because we want skeleton to be centered horizontally and not take the entire screen width in desktop
|
|
const desktopStyleForSkeleton = "left:50%; transform:translate(-50%,0%)";
|
|
|
|
const styleForSkeleton = layout === "mobile" ? mobileStyleForSkeleton : desktopStyleForSkeleton;
|
|
|
|
// height is set via JS to be same as skeleton inside it
|
|
// Width 100% so that the entire width is available just like for iframe
|
|
const styleForSkeletonContainer = "width:100%;";
|
|
|
|
return {
|
|
skeletonContent: generateSkeleton({ layout, pageType }),
|
|
skeletonContainerStyle: styleForSkeletonContainer,
|
|
skeletonStyle: styleForSkeleton,
|
|
};
|
|
};
|
|
export default html;
|