added columns children and dot notation for columns

src/components/layouts/ThreeColumn/ColumnLayout.tsx

@@ -1,12 +1,21 @@
-import React, { Fragment, useState, useRef, useEffect } from "react";
+import React, {
+  Fragment,
+  useState,
+  useRef,
+  useEffect,
+  FC,
+  isValidElement,
+} from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { BottomSheetModal } from "components/containers/modal/BottomSheetModal";
 import { BottomBarAcceptCookies } from "components/containers/modal/BottomBarAcceptCookies";
 import { Button } from "components/Button/Button";
 import classNames from "classnames";
 import "./ColumnLayout.css";
-import { container } from "webpack";
-
+import { Children } from "react";
+import MainColumn from "./Maincolumn";
+import LeftColumn from "./LeftColumn";
+import RightColumn from "./RightColumn";
 /* -------------------------------------------------------------------------- */
 /*                    Custom hook to track container width                    */
 /* -------------------------------------------------------------------------- */
@@ -28,14 +37,41 @@ const useScreenWidth = () => {
   return [ref, width];
 };
 
+/* -------------------------------------------------------------------------- */
+/*                            Component extentions                            */
+/* -------------------------------------------------------------------------- */
+
+type ColumnExtentions = {
+  Left: React.FC<{
+    children: React.ReactNode;
+    openLeftBar?: boolean;
+    widthElement?: number;
+    className?: string;
+  }>;
+  Main: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+  }>;
+  Right: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+  }>;
+};
+
 /* -------------------------------------------------------------------------- */
 /*                            Component properties                            */
 /* -------------------------------------------------------------------------- */
 
+type ColumnLayoutProps = {
+  children: React.ReactNode; //Column layout gets as children not more than three children
+} & Omit<React.ComponentPropsWithRef<"div">, "">;
+
 /* -------------------------------------------------------------------------- */
 /*                             Component function                             */
 /* -------------------------------------------------------------------------- */
-export function ColumnLayout() {
+export const ColumnLayout: React.FC<ColumnLayoutProps> & ColumnExtentions = ({
+  children,
+}) => {
   const mdScreen = 768;
 
   //Hooks
@@ -44,6 +80,7 @@ export function ColumnLayout() {
   function leftBar() {
     return setOpenLeftBar(!openLeftBar);
   }
+
   // Change openLeftBar when width of screen > 768
   useEffect(() => {
     if (widthElement > mdScreen) {
@@ -51,45 +88,32 @@ export function ColumnLayout() {
     }
   });
 
-  return (
-    <div ref={ref} className="w-full px-2 xl:px-12 column-layout-grid">
-      <Transition
-        appear
-        as={Fragment}
-        show={widthElement < mdScreen ? openLeftBar : true}
-        enter={classNames(
-          widthElement < mdScreen
-            ? "ease-in-out duration-150"
-            : "transition-none"
-        )}
-        enterFrom="-translate-x-full"
-        enterTo="translate-x-0"
-        leave="ease-in-out duration-150"
-        leaveFrom="translate-x-0"
-        leaveTo="-translate-x-full"
-      >
-        <div
-          className={classNames("h-full bg-blue-600 left-bar", {
-            "fixed inset-0 w-80": widthElement < mdScreen,
-          })}
-        >
-          ffadfag
-        </div>
-      </Transition>
+  const countChildren = React.Children.count(children);
 
-      <div className="text-gray-900 bg-blue-200 h-full main-bar">
-        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus ad,
-        autem quas hic architecto iusto maxime veritatis laborum. Quas ducimus
-        sequi impedit harum tempora est nesciunt porro assumenda animi
-        temporibus?
-        <div className="h-96 bg-blue-100"></div>
-        <div className="h-96 bg-blue-400"></div>
-        <div className="h-96 bg-blue-700"></div>
-        <div className="h-96 bg-blue-100"></div>
-        <div className="h-96 bg-blue-200"></div>
-        <div className="h-96 bg-blue-800"></div>
+  const columns = React.Children.map(children, (child) => {
+    if (
+      child &&
+      React.isValidElement(child) &&
+      React.Children.only(child).type === LeftColumn
+    ) {
+      return React.cloneElement(child, {
+        openLeftBar: openLeftBar,
+        widthElement: widthElement,
+      });
+    } else {
+      return child;
+    }
+  });
+
+  return (
+    <div ref={ref} className="flex">
+      <div className="w-full px-2 xl:px-12 column-layout-grid">
+        {countChildren <= 3 ? columns : undefined}
       </div>
-      <div className="h-full  bg-blue-400 right-bar">dflajdfjlj</div>
     </div>
   );
-}
+};
+
+ColumnLayout.Left = LeftColumn;
+ColumnLayout.Main = MainColumn;
+ColumnLayout.Right = RightColumn;

src/components/layouts/ThreeColumn/LeftColumn.tsx

@@ -0,0 +1,49 @@
+import React, { Fragment, FunctionComponent as FC } from "react";
+import { Transition } from "@headlessui/react";
+import classNames from "classnames";
+
+type LeftColumnProps = {
+  children: React.ReactNode;
+  openLeftBar?: boolean;
+  widthElement?: number;
+  className?: string;
+} & Omit<React.ComponentPropsWithoutRef<"div">, "">;
+
+const LeftColumn: React.FC<LeftColumnProps> = ({
+  className,
+  children,
+  widthElement = 0,
+  openLeftBar = false,
+}): JSX.Element => {
+  const mdScreen = 768;
+  return (
+    <Transition
+      appear
+      as={Fragment}
+      show={widthElement < mdScreen ? openLeftBar : true}
+      enter={classNames(
+        widthElement < mdScreen ? "ease-in-out duration-150" : "transition-none"
+      )}
+      enterFrom="-translate-x-full"
+      enterTo="translate-x-0"
+      leave="ease-in-out duration-150"
+      leaveFrom="translate-x-0"
+      leaveTo="-translate-x-full"
+    >
+      <div
+        className={classNames(
+          "h-full left-bar",
+          {
+            "fixed inset-0 w-80": widthElement < mdScreen,
+          },
+          className
+        )}
+      >
+        {children}
+      </div>
+    </Transition>
+  );
+};
+
+LeftColumn.displayName = "LeftColumn";
+export default LeftColumn;

src/components/layouts/ThreeColumn/Maincolumn.tsx

@@ -0,0 +1,18 @@
+import classNames from "classnames";
+import React from "react";
+
+type MainColumnProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+function MainColumn({ children, className }: MainColumnProps) {
+  return (
+    <div className={classNames("h-full main-bar overflow-auto", className)}>
+      {children}
+    </div>
+  );
+}
+
+export default MainColumn;
+MainColumn.displayName = "MainColumn";

src/components/layouts/ThreeColumn/RightColumn.tsx

@@ -0,0 +1,18 @@
+import classNames from "classnames";
+import React from "react";
+
+type RightColumnProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+function RightColumn({ children, className }: RightColumnProps) {
+  return (
+    <div className={classNames("h-full right-bar overflow-auto", className)}>
+      {children}
+    </div>
+  );
+}
+
+export default RightColumn;
+RightColumn.displayName = "RightColumn";