More base layout updates

src/layout/base/NitroLayoutBase.tsx

@@ -0,0 +1,28 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutBaseProps } from './NitroLayoutBase.types';
+
+export const NitroLayoutBase: FC<NitroLayoutBaseProps> = props =>
+{
+    const { className = '', overflow = null, position = null, gap = null, children = null, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = '';
+
+        if(overflow && overflow.length) newClassName += ` overflow-${ overflow }`;
+
+        if(position && position.length) newClassName += ` position-${ position }`;
+
+        if(gap && gap >= 1) newClassName += ` gap-${ gap }`;
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className, overflow, position, gap ]);
+
+    return (
+        <div className={ getClassName } { ...rest }>
+            { children }
+        </div>
+    );
+}

src/layout/base/NitroLayoutBase.types.ts

@@ -0,0 +1,9 @@
+import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+import { NitroLayoutOverflow, NitroLayoutPosition, NitroLayoutSpacing } from '../common';
+
+export interface NitroLayoutBaseProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>
+{
+    overflow?: NitroLayoutOverflow;
+    position?: NitroLayoutPosition;
+    gap?: NitroLayoutSpacing;
+}

src/layout/base/index.ts

@@ -0,0 +1,2 @@
+export * from './NitroLayoutBase';
+export * from './NitroLayoutBase.types';

src/layout/button/NitroLayoutButton.tsx

@@ -0,0 +1,26 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutButtonProps } from './NitroLayoutButton.types';
+
+export const NitroLayoutButton: FC<NitroLayoutButtonProps> = props =>
+{
+    const { className = '', variant = 'primary', size = null, children = null, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'btn';
+
+        if(variant && variant.length) newClassName += ` btn-${ variant }`;
+
+        if(size && size.length) newClassName += ` btn-${ size }`;
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className, variant, size ]);
+
+    return (
+        <button type="button" className={ getClassName } { ...rest }>
+            { children }
+        </button>
+    );
+}

src/layout/button/NitroLayoutButton.types.ts

@@ -0,0 +1,8 @@
+import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+import { NitroLayoutButtonSize, NitroLayoutVariant } from '../common';
+
+export interface NitroLayoutButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+{
+    variant?: NitroLayoutVariant;
+    size?: NitroLayoutButtonSize;
+}

src/layout/button/index.ts

@@ -0,0 +1,2 @@
+export * from './NitroLayoutButton';
+export * from './NitroLayoutButton.types';

src/layout/common/NitroLayoutButtonSize.type.ts

@@ -0,0 +1 @@
+export type NitroLayoutButtonSize = 'sm' | 'lg';

src/layout/common/NitroLayoutVariant.type.ts

@@ -0,0 +1 @@
+export type NitroLayoutVariant = 'primary' | 'success' | 'danger';

src/layout/common/index.ts

@@ -1,4 +1,6 @@
+export * from './NitroLayoutButtonSize.type';
 export * from './NitroLayoutColumns.type';
 export * from './NitroLayoutOverflow.type';
 export * from './NitroLayoutPosition.type';
 export * from './NitroLayoutSpacing.type';
+export * from './NitroLayoutVariant.type';

src/layout/flex-column/NitroLayoutFlexColumn.tsx

@@ -1,28 +1,19 @@
 import { FC, useMemo } from 'react';
+import { NitroLayoutFlex } from '../flex/NitroLayoutFlex';
 import { NitroLayoutFlexColumnProps } from './NitroLayoutFlexColumn.types';
 
 export const NitroLayoutFlexColumn: FC<NitroLayoutFlexColumnProps> = props =>
 {
-    const { className = '', overflow = null, position = null, gap = null, children = null, ...rest } = props;
+    const { className = '', ...rest } = props;
 
     const getClassName = useMemo(() =>
     {
-        let newClassName = 'd-flex flex-column';
+        let newClassName = 'flex-column';
-
-        if(overflow && overflow.length) newClassName += ` overflow-${ overflow }`;
-
-        if(position && position.length) newClassName += ` position-${ position }`;
-
-        if(gap && gap >= 1) newClassName += ` gap-${ gap }`;
 
         if(className && className.length) newClassName += ` ${ className }`;
 
         return newClassName;
-    }, [ className, overflow, position, gap ]);
+    }, [ className ]);
 
-    return (
+    return <NitroLayoutFlex className={ getClassName } { ...rest } />;
-        <div className={ getClassName } { ...rest }>
-            { children }
-        </div>
-    );
 }

src/layout/flex-column/NitroLayoutFlexColumn.types.ts

@@ -1,9 +1,6 @@
-import { DetailsHTMLAttributes } from 'react';
+import { NitroLayoutFlexProps } from '../flex/NitroLayoutFlex.types';
-import { NitroLayoutOverflow, NitroLayoutPosition, NitroLayoutSpacing } from '../common';
 
-export interface NitroLayoutFlexColumnProps extends DetailsHTMLAttributes<HTMLDivElement>
+export interface NitroLayoutFlexColumnProps extends NitroLayoutFlexProps
 {
-    overflow?: NitroLayoutOverflow;
+    
-    position?: NitroLayoutPosition;
-    gap?: NitroLayoutSpacing;
 }

src/layout/flex-column/index.ts

@@ -0,0 +1,2 @@
+export * from './NitroLayoutFlexColumn';
+export * from './NitroLayoutFlexColumn.types';

src/layout/flex/NitroLayoutFlex.tsx

@@ -0,0 +1,19 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutBase } from '../base/NitroLayoutBase';
+import { NitroLayoutFlexProps } from './NitroLayoutFlex.types';
+
+export const NitroLayoutFlex: FC<NitroLayoutFlexProps> = props =>
+{
+    const { className = '', ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'd-flex';
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className ]);
+
+    return <NitroLayoutBase className={ getClassName } { ...rest } />;
+}

src/layout/flex/NitroLayoutFlex.types.ts

@@ -0,0 +1,6 @@
+import { NitroLayoutBaseProps } from '../base/NitroLayoutBase.types';
+
+export interface NitroLayoutFlexProps extends NitroLayoutBaseProps
+{
+    
+}

src/layout/flex/index.ts

@@ -0,0 +1,2 @@
+export * from './NitroLayoutFlex';
+export * from './NitroLayoutFlex.types';

src/layout/grid/NitroLayoutGrid.tsx

@@ -1,24 +1,19 @@
 import { FC, useMemo } from 'react';
+import { NitroLayoutBase } from '../base';
 import { NitroLayoutGridProps } from './NitroLayoutGrid.types';
 
 export const NitroLayoutGrid: FC<NitroLayoutGridProps> = props =>
 {
-    const { className = '', gap = 3, children = null, ...rest } = props;
+    const { className = '', gap = 3, ...rest } = props;
 
     const getClassName = useMemo(() =>
     {
         let newClassName = 'grid h-100';
 
-        if(gap >= 1) newClassName += ` gap-${ gap }`;
-
         if(className && className.length) newClassName += ' ' + className;
 
         return newClassName;
-    }, [ className, gap ]);
+    }, [ className ]);
 
-    return (
+    return <NitroLayoutBase className={ getClassName } gap={ gap } { ...rest }  />;
-        <div className={ getClassName } { ...rest }>
-            { children }
-        </div>
-    );
 }

src/layout/grid/NitroLayoutGrid.types.ts

@@ -1,7 +1,6 @@
-import { DetailsHTMLAttributes } from 'react';
+import { NitroLayoutBaseProps } from '../base';
-import { NitroLayoutSpacing } from '../common';
 
-export interface NitroLayoutGridProps extends DetailsHTMLAttributes<HTMLDivElement>
+export interface NitroLayoutGridProps extends NitroLayoutBaseProps
 {
-    gap?: NitroLayoutSpacing;
+    
 }

src/layout/grid/column/index.ts

@@ -0,0 +1,2 @@
+export * from './NitroLayoutGridColumn';
+export * from './NitroLayoutGridColumn.types';

src/layout/grid/index.ts

@@ -0,0 +1,3 @@
+export * from './column';
+export * from './NitroLayoutGrid';
+export * from './NitroLayoutGrid.types';

src/layout/index.ts

@@ -1,6 +1,12 @@
+export * from './button';
 export * from './card';
+export * from './common';
 export * from './draggable-window';
+export * from './flex';
+export * from './flex-column';
 export * from './gift-card';
+export * from './grid';
+export * from './loading-habbos';
 export * from './loading-spinner';
 export * from './mini-camera';
 export * from './notification-alert';

src/layout/loading-habbos/index.ts

@@ -0,0 +1 @@
+export * from './LoadingHabbosView';