layout-mapper

layout.server.tsx

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>
  );
}