🆙 Init V3

src/common/card/NitroCardContentView.tsx

@@ -0,0 +1,19 @@
+import { FC, useMemo } from 'react';
+import { Column, ColumnProps } from '..';
+
+export const NitroCardContentView: FC<ColumnProps> = props =>
+{
+    const { overflow = 'auto', classNames = [], ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        // Theme Changer
+        const newClassNames: string[] = [ 'container-fluid', 'h-full p-[8px] overflow-auto', 'bg-light' ];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
+
+    return <Column classNames={ getClassNames } overflow={ overflow } { ...rest } />;
+};

src/common/card/NitroCardContext.tsx

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

src/common/card/NitroCardHeaderView.tsx

@@ -0,0 +1,41 @@
+import { FC, MouseEvent } from 'react';
+import { FaFlag } from 'react-icons/fa';
+import { Base, Column, ColumnProps, Flex } from '..';
+
+interface NitroCardHeaderViewProps extends ColumnProps
+{
+    headerText: string;
+    isGalleryPhoto?: boolean;
+    noCloseButton?: boolean;
+    onReportPhoto?: (event: MouseEvent) => void;
+    onCloseClick: (event: MouseEvent) => void;
+}
+
+export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
+{
+    const { headerText = null, isGalleryPhoto = false, noCloseButton = false, onReportPhoto = null, onCloseClick = null, justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props;
+
+
+
+    const onMouseDown = (event: MouseEvent<HTMLDivElement>) =>
+    {
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+    };
+
+    return (
+        <Column center className={ 'relative flex items-center justify-center flex-col drag-handler min-h-card-header max-h-card-header bg-card-header' } { ...rest }>
+            <Flex center fullWidth>
+                <span className="text-xl text-white drop-shadow-lg">{ headerText }</span>
+                { isGalleryPhoto &&
+                    <Base className="end-4 nitro-card-header-report-camera" position="absolute" onClick={ onReportPhoto }>
+                        <FaFlag className="fa-icon" />
+                    </Base>
+                }
+                <div className="absolute flex items-center justify-center cursor-pointer right-2 p-[2px] ubuntu-close-button" onClick={ onCloseClick } onMouseDownCapture={ onMouseDown }>
+                </div>
+
+            </Flex>
+        </Column>
+    );
+};

src/common/card/NitroCardView.tsx

@@ -0,0 +1,35 @@
+import { FC, useMemo, useRef } from 'react';
+import { Column, ColumnProps } from '..';
+import { DraggableWindow, DraggableWindowPosition, DraggableWindowProps } from '../draggable-window';
+import { NitroCardContextProvider } from './NitroCardContext';
+
+export interface NitroCardViewProps extends DraggableWindowProps, ColumnProps
+{
+    theme?: string;
+}
+
+export const NitroCardView: FC<NitroCardViewProps> = props =>
+{
+    const { theme = 'primary', uniqueKey = null, handleSelector = '.drag-handler', windowPosition = DraggableWindowPosition.CENTER, disableDrag = false, overflow = 'hidden', position = 'relative', gap = 0, classNames = [], ...rest } = props;
+    const elementRef = useRef<HTMLDivElement>();
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'resize', 'rounded', 'shadow', ];
+
+        // Card Theme Changer
+        newClassNames.push('border-[1px] border-[#283F5D]');
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
+
+    return (
+        <NitroCardContextProvider value={ { theme } }>
+            <DraggableWindow disableDrag={ disableDrag } handleSelector={ handleSelector } uniqueKey={ uniqueKey } windowPosition={ windowPosition }>
+                <Column classNames={ getClassNames } gap={ gap } innerRef={ elementRef } overflow={ overflow } position={ position } { ...rest } />
+            </DraggableWindow>
+        </NitroCardContextProvider>
+    );
+};

src/common/card/accordion/NitroCardAccordionContext.tsx

@@ -0,0 +1,21 @@
+import { createContext, Dispatch, FC, ProviderProps, SetStateAction, useContext } from 'react';
+
+export interface INitroCardAccordionContext
+{
+    closers: Function[];
+    setClosers: Dispatch<SetStateAction<Function[]>>;
+    closeAll: () => void;
+}
+
+const NitroCardAccordionContext = createContext<INitroCardAccordionContext>({
+    closers: null,
+    setClosers: null,
+    closeAll: null
+});
+
+export const NitroCardAccordionContextProvider: FC<ProviderProps<INitroCardAccordionContext>> = props =>
+{
+    return <NitroCardAccordionContext.Provider { ...props } />;
+};
+
+export const useNitroCardAccordionContext = () => useContext(NitroCardAccordionContext);

src/common/card/accordion/NitroCardAccordionItemView.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { Flex, FlexProps } from '../..';
+
+export interface NitroCardAccordionItemViewProps extends FlexProps
+{
+
+}
+
+export const NitroCardAccordionItemView: FC<NitroCardAccordionItemViewProps> = props =>
+{
+    const { alignItems = 'center', gap = 1, children = null, ...rest } = props;
+
+    return (
+        <Flex alignItems={ alignItems } gap={ gap } { ...rest }>
+            { children }
+        </Flex>
+    );
+};

src/common/card/accordion/NitroCardAccordionSetView.tsx

@@ -0,0 +1,84 @@
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { FaCaretDown, FaCaretUp } from 'react-icons/fa';
+import { Column, ColumnProps, Flex, Text } from '../..';
+import { useNitroCardAccordionContext } from './NitroCardAccordionContext';
+
+export interface NitroCardAccordionSetViewProps extends ColumnProps
+{
+    headerText: string;
+    isExpanded?: boolean;
+}
+
+export const NitroCardAccordionSetView: FC<NitroCardAccordionSetViewProps> = props =>
+{
+    const { headerText = '', isExpanded = false, gap = 0, classNames = [], children = null, ...rest } = props;
+    const [ isOpen, setIsOpen ] = useState(false);
+    const { setClosers = null, closeAll = null } = useNitroCardAccordionContext();
+
+    const onClick = () =>
+    {
+        closeAll();
+
+        setIsOpen(prevValue => !prevValue);
+    };
+
+    const onClose = useCallback(() => setIsOpen(false), []);
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames = [ 'nitro-card-accordion-set' ];
+
+        if(isOpen) newClassNames.push('active');
+
+        if(classNames && classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ isOpen, classNames ]);
+
+    useEffect(() =>
+    {
+        setIsOpen(isExpanded);
+    }, [ isExpanded ]);
+
+    useEffect(() =>
+    {
+        const closeFunction = onClose;
+
+        setClosers(prevValue =>
+        {
+            const newClosers = [ ...prevValue ];
+
+            newClosers.push(closeFunction);
+
+            return newClosers;
+        });
+
+        return () =>
+        {
+            setClosers(prevValue =>
+            {
+                const newClosers = [ ...prevValue ];
+
+                const index = newClosers.indexOf(closeFunction);
+
+                if(index >= 0) newClosers.splice(index, 1);
+
+                return newClosers;
+            });
+        };
+    }, [ onClose, setClosers ]);
+
+    return (
+        <Column classNames={ getClassNames } gap={ gap } { ...rest }>
+            <Flex pointer className="nitro-card-accordion-set-header px-2 py-1" justifyContent="between" onClick={ onClick }>
+                <Text>{ headerText }</Text>
+                { isOpen && <FaCaretUp className="fa-icon" /> }
+                { !isOpen && <FaCaretDown className="fa-icon" /> }
+            </Flex>
+            { isOpen &&
+                <Column fullHeight className="nitro-card-accordion-set-content" gap={ 0 } overflow="auto">
+                    { children }
+                </Column> }
+        </Column>
+    );
+};

src/common/card/accordion/NitroCardAccordionView.tsx

@@ -0,0 +1,25 @@
+import { FC, useCallback, useState } from 'react';
+import { Column, ColumnProps } from '../..';
+import { NitroCardAccordionContextProvider } from './NitroCardAccordionContext';
+
+interface NitroCardAccordionViewProps extends ColumnProps
+{
+
+}
+
+export const NitroCardAccordionView: FC<NitroCardAccordionViewProps> = props =>
+{
+    const { ...rest } = props;
+    const [ closers, setClosers ] = useState<Function[]>([]);
+
+    const closeAll = useCallback(() =>
+    {
+        for(const closer of closers) closer();
+    }, [ closers ]);
+
+    return (
+        <NitroCardAccordionContextProvider value={ { closers, setClosers, closeAll } }>
+            <Column gap={ 0 } { ...rest } />
+        </NitroCardAccordionContextProvider>
+    );
+};

src/common/card/accordion/index.ts

@@ -0,0 +1,4 @@
+export * from './NitroCardAccordionContext';
+export * from './NitroCardAccordionItemView';
+export * from './NitroCardAccordionSetView';
+export * from './NitroCardAccordionView';

src/common/card/index.ts

@@ -0,0 +1,6 @@
+export * from './NitroCardContentView';
+export * from './NitroCardContext';
+export * from './NitroCardHeaderView';
+export * from './NitroCardView';
+export * from './accordion';
+export * from './tabs';

src/common/card/tabs/NitroCardTabsItemView.tsx

@@ -0,0 +1,36 @@
+import { FC, useMemo } from 'react';
+import { Flex, FlexProps } from '../../Flex';
+import { LayoutItemCountView } from '../../layout';
+
+interface NitroCardTabsItemViewProps extends FlexProps
+{
+    isActive?: boolean;
+    count?: number;
+}
+
+export const NitroCardTabsItemView: FC<NitroCardTabsItemViewProps> = props =>
+{
+    const { isActive = false, count = 0, overflow = 'hidden', position = 'relative', pointer = true, classNames = [], children = null, ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'overflow-hidden relative cursor-pointer rounded-t-md flex bg-card-tab-item px-3 py-1 z-[1] border-card-border border-t border-l border-r before:absolute before:w-[93%] before:h-[3px] before:rounded-md before:top-[1.5px] before:left-0 before:right-0 before:m-auto before:z-[1] before:bg-[#C2C9D1]',
+            isActive && 'bg-card-tab-item-active -mb-[1px] before:bg-white' ];
+
+        //if (isActive) newClassNames.push('bg-[#dfdfdf] border-b-[1px_solid_black]');
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ isActive, classNames ]);
+
+    return (
+        <Flex classNames={ getClassNames } overflow={ overflow } pointer={ pointer } position={ position } { ...rest }>
+            <Flex center shrink>
+                { children }
+            </Flex>
+            { (count > 0) &&
+                <LayoutItemCountView count={ count } /> }
+        </Flex>
+    );
+};

src/common/card/tabs/NitroCardTabsView.tsx

@@ -0,0 +1,22 @@
+import { FC, useMemo } from 'react';
+import { Flex, FlexProps } from '../..';
+
+export const NitroCardTabsView: FC<FlexProps> = props =>
+{
+    const { justifyContent = 'center', gap = 1, classNames = [], children = null, ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'justify-center gap-0.5 flex bg-card-tabs min-h-card-tabs max-h-card-tabs pt-1 border-b border-card-border px-2 -mt-[1px]' ];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
+
+    return (
+        <Flex classNames={ getClassNames } gap={ gap } justifyContent={ justifyContent } { ...rest }>
+            { children }
+        </Flex>
+    );
+};

src/common/card/tabs/index.ts

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