Skip to content

Instantly share code, notes, and snippets.

@ndreckshage
Last active January 27, 2022 06:48
Show Gist options
  • Save ndreckshage/b0669516d152f3e9616438b09b3a6935 to your computer and use it in GitHub Desktop.
Save ndreckshage/b0669516d152f3e9616438b09b3a6935 to your computer and use it in GitHub Desktop.
layout-mapper
const COMPONENT_MAP = {
LayoutComponent: Layout,
CarouselComponent: Carousel,
GridComponent: Grid,
ListComponent: List,
BookAuthorsComponent: BookAuthors,
BookCategoriesComponent: BookCategories,
BookDetailsComponent: BookDetails,
BookImageComponent: BookImage,
BookTitleComponent: BookTitle,
BookActionComponent: BookAction,
MarkdownComponent: Markdown,
};
function Layout({
__typename,
root,
flexDirection,
container,
components,
className,
}: LayoutProps) {
return (
<div
className={cx("flex", className, {
"container mx-auto px-4 overflow-hidden": container,
"my-5": container && root,
"flex-col space-y-5": flexDirection === "col",
"flex-col md:flex-row md:space-x-5": flexDirection === "row",
})}
>
{components.map((component) => {
// @ts-ignore
const Component = COMPONENT_MAP[component.__typename];
if (!Component) {
return (
<div
key={component.__typename}
className="container mx-auto px-4 my-5"
>
<p>Component for {component.__typename} not found</p>
</div>
);
}
return <Component key={component.id} {...component} />;
})}
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment