Add card context

src/layout/card/NitroCardView.tsx

@@ -1,27 +1,26 @@
 import { FC } from 'react';
 import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
+import { NitroCardContextProvider } from './context/NitroCardContext';
 import { NitroCardViewProps } from './NitroCardView.types';
 
 export const NitroCardView: FC<NitroCardViewProps> = props =>
 {
-    const { className = '', simple = false, disableDrag = false, children = null } = props;
+    const { className = '', disableDrag = false, simple = false, theme = 'primary', children = null } = props;
-
-    if(simple)
-    {
-        return (
-            <div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
-                { children }
-            </div>
-        );
-    }
 
     return (
-        <div className="nitro-card-responsive">
+        <NitroCardContextProvider value={ { theme } }>
-            <DraggableWindow handle=".drag-handler" disableDrag= { disableDrag }>
+            { simple &&
                 <div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
                     { children }
-                </div>
+                </div> }
-            </DraggableWindow>
+            { !simple &&
-        </div>
+                <div className="nitro-card-responsive">
+                    <DraggableWindow handle=".drag-handler" disableDrag= { disableDrag }>
+                        <div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
+                            { children }
+                        </div>
+                    </DraggableWindow>
+                </div> }
+        </NitroCardContextProvider>
     );
 }

src/layout/card/NitroCardView.types.ts

@@ -1,6 +1,7 @@
 export interface NitroCardViewProps
 {
     className?: string;
-    simple?: boolean;
     disableDrag?: boolean;
+    simple?: boolean;
+    theme?: string;
 }

src/layout/card/context/NitroCardContext.tsx

@@ -0,0 +1,13 @@
+import { createContext, FC, useContext } from 'react';
+import { INitroCardContext, NitroCardContextProps } from './NitroCardContext.types';
+
+const NitroCardContext = createContext<INitroCardContext>({
+    theme: null
+});
+
+export const NitroCardContextProvider: FC<NitroCardContextProps> = props =>
+{
+    return <NitroCardContext.Provider value={ props.value }>{ props.children }</NitroCardContext.Provider>
+}
+
+export const useNitroCardContext = () => useContext(NitroCardContext);

src/layout/card/context/NitroCardContext.types.ts

@@ -0,0 +1,11 @@
+import { ProviderProps } from 'react';
+
+export interface INitroCardContext
+{
+    theme: string;
+}
+
+export interface NitroCardContextProps extends ProviderProps<INitroCardContext>
+{
+
+}

src/layout/card/header/NitroCardHeaderView.tsx

@@ -1,12 +1,14 @@
 import { FC } from 'react';
+import { useNitroCardContext } from '../context/NitroCardContext';
 import { NitroCardHeaderViewProps } from './NitroCardHeaderView.types';
 
 export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
 {
     const { headerText = null, onCloseClick = null } = props;
+    const { theme } = useNitroCardContext();
 
     return (
-        <div className="drag-handler container-fluid bg-primary">
+        <div className={ `drag-handler container-fluid bg-${ theme }` }>
             <div className="row nitro-card-header">
                 <div className="col-10 offset-1 d-flex justify-content-center align-items-center">
                     <div className="h4 m-0 text-white text-shadow">{ headerText }</div>