Add NitroCardView

src/layout/card/NitroCardView.tsx

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
+import { NitroCardViewProps } from './NitroCardView.types';
+
+export const NitroCardView: FC<NitroCardViewProps> = props =>
+{
+    const { className = '' } = props;
+
+    return (
+        <DraggableWindow handle=".drag-handler">
+            <div className={ 'nitro-card d-flex flex-column ' + className }>
+                { props.children }
+            </div>
+        </DraggableWindow>
+    );
+}

src/layout/card/NitroCardView.types.ts

@@ -0,0 +1,4 @@
+export interface NitroCardViewProps
+{
+    className?: string;
+}

src/layout/card/content/NitroCardContentView.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { NitroCardContentViewProps } from './NitroCardContextView.types';
+
+export const NitroCardContentView: FC<NitroCardContentViewProps> = props =>
+{
+    return (
+        <div className="bg-light rounded-bottom border border-top-0 px-3 py-2 shadow overflow-hidden content-area">
+            { props.children }
+        </div>
+    );
+}

src/layout/card/content/NitroCardContextView.types.ts

@@ -0,0 +1,4 @@
+export interface NitroCardContentViewProps
+{
+    
+}

src/layout/card/content/index.ts

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

src/layout/card/header/NitroCardHeaderView.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { NitroCardHeaderViewProps } from './NitroCardHeaderView.types';
+
+export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
+{
+    const { headerText = null, onCloseClick = null } = props;
+
+    return (
+        <div className="drag-handler d-flex align-items-center bg-primary border border-bottom-0 rounded-top px-3 py-1">
+            <div className="d-flex flex-grow-1 justify-content-center align-items-center">
+                <div className="h4 m-0 text-white text-shadow">{ headerText }</div>
+            </div>
+            <div className="cursor-pointer" onClick={ onCloseClick }>
+                <i className="fas fa-times"></i>
+            </div>
+        </div>
+    );
+}

src/layout/card/header/NitroCardHeaderView.types.ts

@@ -0,0 +1,7 @@
+import { MouseEvent } from 'react';
+
+export interface NitroCardHeaderViewProps
+{
+    headerText: string;
+    onCloseClick: (event: MouseEvent) => void;
+}

src/layout/card/header/index.ts

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

src/layout/card/index.ts

@@ -0,0 +1,5 @@
+export * from './content';
+export * from './header';
+export * from './NitroCardView';
+export * from './NitroCardView.types';
+export * from './tabs';

src/layout/card/tabs/NitroCardTabsView.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { NitroCardTabsViewProps } from './NitroCardTabsView.types';
+
+export const NitroCardTabsView: FC<NitroCardTabsViewProps> = props =>
+{
+    return (
+        <ul className="nav nav-tabs justify-content-center bg-secondary border-start border-end px-3 pt-1">
+            { props.children }
+        </ul>
+    );
+}

src/layout/card/tabs/NitroCardTabsView.types.ts

@@ -0,0 +1,4 @@
+export interface NitroCardTabsViewProps
+{
+
+}

src/layout/card/tabs/index.ts

@@ -0,0 +1,3 @@
+export * from './NitroCardTabsView';
+export * from './NitroCardTabsView.types';
+export * from './tabs-item';

src/layout/card/tabs/tabs-item/NitroCardTabsItemView.tsx

@@ -0,0 +1,14 @@
+import classNames from 'classnames';
+import { FC } from 'react';
+import { NitroCardTabsItemViewProps } from './NitroCardTabsItemView.types';
+
+export const NitroCardTabsItemView: FC<NitroCardTabsItemViewProps> = props =>
+{
+    const { tabText = '', isActive = false, onClick = null } = props;
+
+    return (
+        <li className="nav-item me-1 cursor-pointer" onClick={ onClick }>
+            <span className={ 'nav-link ' + classNames({ 'active': isActive }) }>{ tabText }</span>
+        </li>
+    );
+}

src/layout/card/tabs/tabs-item/NitroCardTabsItemView.types.ts

@@ -0,0 +1,8 @@
+import { MouseEventHandler } from 'react';
+
+export interface NitroCardTabsItemViewProps
+{
+    tabText: string;
+    isActive: boolean;
+    onClick: MouseEventHandler<HTMLLIElement>;
+}

src/layout/card/tabs/tabs-item/index.ts

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

src/layout/index.ts

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