Update card tabs

src/common/card/NitroCardView.scss

@@ -49,6 +49,38 @@ $nitro-card-tabs-height: 33px;
 
         .nitro-card-tabs {
             background-color: $secondary;
+
+            .nav-item {
+                padding: $nav-link-padding-y $nav-link-padding-x;
+                background-color: $muted;
+                color: $black;
+                z-index: 1;
+                margin-bottom: -1px;
+
+                &.active {
+                    background-color: $light;
+                    border-color: $border-color $border-color $light !important;
+                    border-bottom: 1px solid black;
+
+                    &:before {
+                        background: $white;
+                    }
+                }
+
+                &:before {
+                    content: "";
+                    position: absolute;
+                    width: 93%;
+                    height: 3px;
+                    border-radius: 0.25rem;
+                    top: 1.5px;
+                    left: 0;
+                    right: 0;
+                    margin: auto;
+                    background: #c2c9d1;
+                    z-index: 1;
+                }
+            }
         }
 
         .content-area {
@@ -146,7 +178,7 @@ $nitro-card-tabs-height: 33px;
 }
 
 .nitro-card-tabs {
-    min-height: $nitro-card-tabs-height;
+    height: 100%;
     max-height: $nitro-card-tabs-height;
     border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
 }

src/common/card/tabs/NitroCardTabsItemView.tsx

@@ -1,23 +1,35 @@
-import classNames from 'classnames';
+import { FC, useMemo } from 'react';
-import { FC, MouseEventHandler } from 'react';
+import { Flex, FlexProps } from '../../Flex';
 import { LayoutItemCountView } from '../../layout';
 
-interface NitroCardTabsItemViewProps
+interface NitroCardTabsItemViewProps extends FlexProps
 {
     isActive?: boolean;
     count?: number;
-    onClick?: MouseEventHandler<HTMLLIElement>;
 }
 
 export const NitroCardTabsItemView: FC<NitroCardTabsItemViewProps> = props =>
 {
-    const { children = null, isActive = false, count = 0, onClick = null } = props;
+    const { isActive = false, count = 0, overflow = 'hidden', position = 'relative', pointer = true, classNames = [], children = null, ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'nav-item', 'rounded-top', 'border' ];
+
+        if(isActive) newClassNames.push('active');
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ isActive, classNames ]);
 
     return (
-        <li className={ 'nav-link cursor-pointer position-relative' + classNames({ ' active': isActive }) } onClick={ onClick }>
+        <Flex overflow={ overflow } pointer={ pointer } position={ position } classNames={ getClassNames } { ...rest }>
+            <Flex shrink center>
                 { children }
+            </Flex>
             { (count > 0) &&
                 <LayoutItemCountView count={ count } /> }
-        </li>
+        </Flex>
     );
 }

src/common/card/tabs/NitroCardTabsView.tsx

@@ -3,7 +3,7 @@ import { Flex, FlexProps } from '../..';
 
 export const NitroCardTabsView: FC<FlexProps> = props =>
 {
-    const { justifyContent = 'center', classNames = [], children = null, ...rest } = props;
+    const { justifyContent = 'center', gap = 1, classNames = [], children = null, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -15,10 +15,8 @@ export const NitroCardTabsView: FC<FlexProps> = props =>
     }, [ classNames ]);
 
     return (
-        <Flex justifyContent={ justifyContent } classNames={ getClassNames } { ...rest }>
+        <Flex justifyContent={ justifyContent } gap={ gap } classNames={ getClassNames } { ...rest }>
-            <ul className="nav nav-tabs border-0 gap-1">
             { children }
-            </ul>
         </Flex>
     );
 }