goobs-frontend 0.8.17 → 0.8.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.17",
+  "version": "0.8.18",
   "type": "module",
   "description": "A comprehensive React-based UI library built on Material-UI, offering a wide range of customizable components including grids, typography, buttons, cards, forms, navigation, pricing tables, steppers, tooltips, accordions, and more. Designed for building responsive and consistent user interfaces with advanced features like form validation, theming, and code syntax highlighting.",
   "license": "MIT",

package/src/components/Tabs/index.tsx

@@ -1,46 +1,27 @@
 'use client'
 import React, { useState, useEffect } from 'react'
-import { AppBar, Toolbar, Box, Tabs as MuiTabs, Tab } from '@mui/material'
+import { AppBar, Tabs as MuiTabs, Tab } from '@mui/material'
 import { usePathname } from 'next/navigation'
+// Import your black palette color
+import { black } from '../../styles/palette'
 
-/** Represents the shape of each tab item in the horizontal nav. */
 export interface TabsItem {
-  /** The text/title displayed on the tab */
   title?: string
-
-  /** The URL route */
   route?: string
-
-  /** The trigger type: 'route' | 'onClick' */
   trigger?: 'route' | 'onClick'
-
-  /** OnClick callback */
   onClick?: () => void
-
-  /** Optional left border */
   hasleftborder?: string
-
-  /** Optional right border */
   hasrightborder?: string
 }
 
-/** Represents the currently active/selected tab */
 export interface ActiveTabValue {
   tabId: string | false
 }
 
-/** Props for the horizontal Tabs component. */
 export interface TabsProps {
-  /** Array of horizontal items (TabsItem). */
   items: TabsItem[]
-
-  /** Height of the tabs bar. */
   height?: string
-
-  /** MUI alignment. */
   alignment?: 'left' | 'center' | 'right' | 'inherit' | 'justify'
-
-  /** Unique name for this tab set (for managing active tab). */
   navname?: string
 }
 
@@ -59,11 +40,8 @@ function Tabs({
   const pathname = usePathname()
 
   useEffect(() => {
-    /**
-     * Find the item whose route matches the current path
-     */
+    // Find the item whose route matches the current path
     const currentTab = items.find(item => item.route === pathname)
-
     setActiveTabValues(prev => ({
       ...prev,
       [navname]: { tabId: currentTab?.title || false },
@@ -71,8 +49,7 @@ function Tabs({
   }, [items, navname, pathname])
 
   /**
-   * When user changes tab via click,
-   * update the activeTabValues record.
+   * When user changes tab via click, update the activeTabValues record.
    */
   const handleTabChange = (event: React.SyntheticEvent, newValue: string) => {
     setActiveTabValues(prev => ({
@@ -97,97 +74,72 @@ function Tabs({
   return (
     <AppBar
       position="sticky"
+      elevation={0} // Remove MUI's default shadow
       sx={{
-        backgroundColor: 'black',
-        color: 'white',
+        backgroundColor: black.main, // Ensure the AppBar is black
+        color: '#fff',
+        overflow: 'hidden', // Prevent hover effects from spilling
+        height,
+        minHeight: height,
+        display: 'flex',
+        justifyContent: 'center',
+        boxShadow: 'none',
       }}
     >
-      <Toolbar
-        disableGutters
+      <MuiTabs
+        value={activeTabValues[navname]?.tabId || false}
+        onChange={handleTabChange}
+        variant="fullWidth"
+        aria-label="nav tabs"
         sx={{
-          paddingLeft: 0,
-          paddingRight: 0,
-          height: `${height} !important`,
-          minHeight: `${height} !important`,
-          borderTop: '1px solid white',
-        }}
-      >
-        <Box
-          sx={{
-            width: '100%',
+          // Make the entire Tabs area black too
+          backgroundColor: black.main,
+          height: '100%',
+          '& .MuiTabs-flexContainer': {
+            height: '100%',
             display: 'flex',
-            flexDirection: 'row',
             justifyContent: alignment === 'left' ? 'flex-start' : alignment,
-          }}
-        >
-          <Box
+            // The container is also black
+            backgroundColor: black.main,
+          },
+          '& .MuiTab-root': {
+            height: '100%',
+            minHeight: 'unset',
+            display: 'flex',
+            alignItems: 'center',
+            textTransform: 'none',
+            boxSizing: 'border-box',
+            backgroundColor: black.main,
+            color: '#fff',
+            fontWeight: 500,
+            fontFamily: 'Merriweather',
+            fontSize: 16,
+            '&:hover': {
+              backgroundColor: 'rgba(255, 255, 255, 0.1)',
+            },
+            '&.Mui-selected': {
+              backgroundColor: 'rgba(255, 255, 255, 0.2)',
+            },
+          },
+        }}
+      >
+        {items.map(item => (
+          <Tab
+            key={item.title}
+            value={item.title || ''}
+            label={item.title || ''}
+            onClick={() => handleTabClick(item)}
             sx={{
-              flexGrow: 1,
-              display: 'flex',
-              height: height,
-              justifyContent: 'flex-start',
-              paddingLeft: 0,
-              paddingRight: 0,
+              ...(item.hasleftborder === 'true' && {
+                borderLeft: '1px solid white',
+              }),
+              ...(item.hasrightborder === 'true' && {
+                borderRight: '1px solid white',
+              }),
             }}
-          >
-            <MuiTabs
-              value={activeTabValues[navname]?.tabId || false}
-              onChange={handleTabChange}
-              aria-label="nav tabs"
-              variant="fullWidth"
-              sx={{
-                height: height,
-                '& .MuiTabs-flexContainer': {
-                  height: '100%',
-                },
-                '& .MuiTab-root': {
-                  height: '100%',
-                  minHeight: 'unset',
-                },
-              }}
-            >
-              {items.map(item => (
-                <Tab
-                  key={item.title}
-                  value={item.title || ''}
-                  label={item.title || ''}
-                  onClick={() => handleTabClick(item)}
-                  sx={{
-                    flex: 1,
-                    textTransform: 'none',
-                    boxSizing: 'border-box',
-                    backgroundColor: 'black',
-                    color: '#fff',
-                    fontWeight: 500,
-                    fontFamily: 'Merriweather',
-                    fontSize: 16,
-                    height: height,
-                    '&:hover': {
-                      backgroundColor: 'rgba(255, 255, 255, 0.1)',
-                    },
-                    '& .MuiTouchRipple-root': {
-                      color: '#fff',
-                    },
-                    '&.Mui-selected': {
-                      color: '#fff',
-                      backgroundColor: 'rgba(255, 255, 255, 0.2)',
-                    },
-                    '& .MuiSvgIcon-root': {
-                      color: '#fff',
-                    },
-                    ...(item.hasleftborder === 'true' && {
-                      borderLeft: '1px solid white',
-                    }),
-                    ...(item.hasrightborder === 'true' && {
-                      borderRight: '1px solid white',
-                    }),
-                  }}
-                />
-              ))}
-            </MuiTabs>
-          </Box>
-        </Box>
-      </Toolbar>
+          />
+        ))}
+      </MuiTabs>
     </AppBar>
   )
 }