@campxdev/shared 1.5.0 → 1.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/FilterComponents/SearchBar.tsx

@@ -1,16 +1,21 @@
 import { Search } from '@mui/icons-material'
 import { InputAdornment } from '@mui/material'
 import _ from 'lodash'
-import { useMemo, useState } from 'react'
+import { ReactNode, useMemo, useState } from 'react'
 import { TextField } from '../Input'
 import { ITextFieldProps } from '../Input/TextField'
 
 interface SearchBarProps {
   onSearch: (v: string) => void
+  label?: ReactNode
   textFieldProps?: ITextFieldProps
 }
 
-export default function SearchBar({ onSearch, ...restProps }: SearchBarProps) {
+export default function SearchBar({
+  onSearch,
+  label,
+  ...restProps
+}: SearchBarProps) {
   const [, setSearch] = useState('')
 
   const debouncedChangeHandler = useMemo(
@@ -24,7 +29,7 @@ export default function SearchBar({ onSearch, ...restProps }: SearchBarProps) {
 
   return (
     <TextField
-      label="Search"
+      label={label}
       placeholder="Search"
       onChange={debouncedChangeHandler}
       InputProps={{

package/src/components/Tabs/NavigationTabs.tsx

@@ -0,0 +1,80 @@
+import { Box, BoxProps, styled, Typography } from '@mui/material'
+import { NavLink } from 'react-router-dom'
+
+interface TabsContainerProps {
+  tabs: {
+    label: string
+    path: string
+  }[]
+  size?: 'small' | 'medium'
+  center?: boolean
+}
+
+export const StyledTabsWrapper = styled(Box)<{
+  size: 'small' | 'medium'
+  center
+}>(({ theme, size, center }) => ({
+  justifyContent: center ? 'center' : 'flex-start',
+  borderBottom: theme.borders.grayLight,
+  minHeight: size === 'small' ? '48px' : '60px',
+  display: 'flex',
+  width: '100%',
+  gap: '5px',
+  gapY: '20px',
+  alignItems: 'end',
+  paddingLeft: '20px',
+  flexWrap: 'wrap',
+  '& a': {
+    display: 'block',
+    textDecoration: 'none',
+    fontSize: size === 'small' ? '14px' : '15px',
+    fontWeight: 600,
+    color: theme.palette.secondary.main,
+  },
+}))
+
+const StyledTab = styled(
+  (props: BoxProps) => (
+    <Box {...props}>
+      <Typography variant="h6" fontSize={16}>
+        {props.children}
+      </Typography>
+      <span className="indicator"></span>
+    </Box>
+  ),
+  { shouldForwardProp: (prop) => prop !== 'active' },
+)<{ active: boolean }>(({ theme, active }) => ({
+  paddingRight: '24px',
+  paddingBottom: '0',
+  transition: 'all 0.4s ease',
+  '& .indicator': {
+    display: 'block',
+    background: theme.palette.common.yellow,
+    visibility: 'hidden',
+    height: '3px',
+    width: '70%',
+    borderRadius: '2px',
+    marginTop: '3px',
+    ...(active && {
+      visibility: 'visible',
+    }),
+  },
+}))
+
+export default function NavigationTabs({
+  tabs,
+  size = 'medium',
+  center = false,
+}: TabsContainerProps) {
+  return (
+    <StyledTabsWrapper size={size} center={center}>
+      {tabs?.map((item, index) => (
+        <NavLink key={index} to={item?.path}>
+          {({ isActive }) => (
+            <StyledTab active={isActive}>{item?.label}</StyledTab>
+          )}
+        </NavLink>
+      ))}
+    </StyledTabsWrapper>
+  )
+}

package/src/components/Tabs/Tabs.tsx

@@ -2,6 +2,7 @@ import { Tab } from '@mui/material'
 import { ChangeEvent, useEffect, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import { StyledTabs, StyledTabsWrapper } from './styles'
+
 interface TabsContainerProps {
   tabs: {
     key: string

package/src/components/index.ts

@@ -27,6 +27,7 @@ import RenderForm from './Form/RenderForm'
 import AsyncSearchSelect from './Input/AsyncSearchSelect'
 import FilterButton from './FilterComponents/FilterButton'
 import Helmet from './Layout/Helmet'
+import NavigationTabs from './Tabs/NavigationTabs'
 export { default as Image } from './Image'
 export { default as PageHeader } from './PageHeader'
 export { PageContent } from './PageContent'
@@ -83,6 +84,7 @@ export {
   AsyncSearchSelect,
   FilterButton,
   Helmet,
+  NavigationTabs,
 }
 
 export * from './UploadButton/types'