🆙 Init V3

src/common/Column.tsx

@@ -0,0 +1,46 @@
+import { FC, useMemo } from 'react';
+import { Flex, FlexProps } from './Flex';
+import { useGridContext } from './GridContext';
+import { ColumnSizesType } from './types';
+
+export interface ColumnProps extends FlexProps
+{
+    size?: ColumnSizesType;
+    offset?: ColumnSizesType;
+    column?: boolean;
+}
+
+export const Column: FC<ColumnProps> = props =>
+{
+    const { size = 0, offset = 0, column = true, gap = 2, classNames = [], ...rest } = props;
+    const { isCssGrid = false } = useGridContext();
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [];
+
+        if(size)
+        {
+            let colClassName = `col-span-${ size }`;
+
+            if(isCssGrid) colClassName = `${ colClassName }`;
+
+            newClassNames.push(colClassName);
+        }
+
+        if(offset)
+        {
+            let colClassName = `offset-${ offset }`;
+
+            if(isCssGrid) colClassName = `g-start-${ offset }`;
+
+            newClassNames.push(colClassName);
+        }
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ size, offset, isCssGrid, classNames ]);
+
+    return <Flex classNames={ getClassNames } column={ column } gap={ gap } { ...rest } />;
+};