@campxdev/shared 1.6.2 → 1.6.4

package/src/components/Layout/Header/styles.tsx

@@ -1,133 +1,133 @@
-import {
-  alpha,
-  AppBar,
-  Box,
-  IconButton,
-  ListItemText,
-  styled,
-  Typography,
-  Link,
-  Avatar,
-} from '@mui/material'
-import { Link as RouterLink } from 'react-router-dom'
-
-export const StyledImageWrapper = styled('div')`
-  width: auto;
-  height: 24px;
-  & img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-`
-
-export const StyledItemText = styled(ListItemText)(({ theme }) => ({
-  color: theme.palette.text.primary,
-  transition: '0.2s ease',
-}))
-
-export const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  backgroundColor: 'white',
-  boxShadow: '0px 8px 28px rgb(136,136,136, 0.3)',
-}))
-
-export const StyledHeader = styled(Box)(({ theme }) => ({
-  boxShadow: '0px 2px 10px #0000001a',
-  backgroundColor: 'white',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  '& .actions': {
-    marginRight: '20px',
-    display: 'flex',
-    alignItems: 'center',
-    gap: '14px',
-  },
-}))
-
-export const StyledUser = styled(Box)(({ theme }) => ({
-  cursor: 'pointer',
-  borderRadius: '5px',
-  transition: 'background 0.2s ease',
-  padding: '5px 16px',
-  display: 'flex',
-  alignItems: 'center',
-  gap: '8px',
-  '&:hover': {
-    background: theme.palette.secondary.light,
-  },
-}))
-
-export const StyledIconButton = styled(IconButton)({
-  padding: '20px',
-  backgroundColor: 'black',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '0px',
-  border: '1px solid white',
-})
-
-export const StyledLink = styled(Link)({
-  textDecoration: 'none',
-})
-
-export const StyledDescription = styled(Typography)(({ theme }) => ({
-  fontSize: '12px',
-  fontWeight: 600,
-  color: alpha(theme?.palette?.secondary?.lighter, 0.5),
-}))
-
-export const StyledMenuItem = styled(Box)({
-  height: '68px',
-  width: '380px',
-  padding: '40px 20px',
-  transition: 'background ease 0.3s',
-  '&:hover': {
-    background: 'rgba(0, 0, 0, 0.03)',
-  },
-  display: 'flex',
-  alignItems: 'center',
-  gap: '20px',
-})
-
-export const StyledMenuItemContainer = styled(Box)(({ theme }) => ({
-  cursor: 'pointer',
-
-  padding: '8px 0px',
-
-  borderBottom: `1px solid ${theme?.palette?.secondary?.lighter}`,
-}))
-
-export const StyledAvatar = styled(Avatar)(({ theme }) => ({
-  background: theme.palette.secondary.main,
-  cursor: 'pointer',
-  height: '45px',
-  width: '45px',
-}))
-
-export const StyledLogosWrapper = styled(Box)(() => ({
-  display: 'flex',
-  alignItems: 'center',
-  gap: '10px',
-  padding: '10px',
-  transition: 'background ease 0.3s',
-  borderRadius: '5px',
-  '&:hover': {
-    background: 'rgba(0, 0, 0, 0.05)',
-  },
-}))
-
-export const StyledImageBox = styled(Box)(() => ({
-  height: '40px',
-  width: '40px',
-  boxShadow: '0px 5px 5px 0px rgba(48, 62, 99,0.1) ',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '5px',
-}))
-
-export const StyledRouterLink = styled(RouterLink)(() => ({
-  textDecoration: 'none',
-}))
+import {
+  alpha,
+  AppBar,
+  Box,
+  IconButton,
+  ListItemText,
+  styled,
+  Typography,
+  Link,
+  Avatar,
+} from '@mui/material'
+import { Link as RouterLink } from 'react-router-dom'
+
+export const StyledImageWrapper = styled('div')`
+  width: auto;
+  height: 24px;
+  & img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+`
+
+export const StyledItemText = styled(ListItemText)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  transition: '0.2s ease',
+}))
+
+export const StyledAppBar = styled(AppBar)(({ theme }) => ({
+  backgroundColor: 'white',
+  boxShadow: '0px 8px 28px rgb(136,136,136, 0.3)',
+}))
+
+export const StyledHeader = styled(Box)(({ theme }) => ({
+  boxShadow: '0px 2px 10px #0000001a',
+  backgroundColor: 'white',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  '& .actions': {
+    marginRight: '20px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '14px',
+  },
+}))
+
+export const StyledUser = styled(Box)(({ theme }) => ({
+  cursor: 'pointer',
+  borderRadius: '5px',
+  transition: 'background 0.2s ease',
+  padding: '5px 16px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  '&:hover': {
+    background: theme.palette.secondary.light,
+  },
+}))
+
+export const StyledIconButton = styled(IconButton)({
+  padding: '20px',
+  backgroundColor: 'black',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '0px',
+  border: '1px solid white',
+})
+
+export const StyledLink = styled(Link)({
+  textDecoration: 'none',
+})
+
+export const StyledDescription = styled(Typography)(({ theme }) => ({
+  fontSize: '12px',
+  fontWeight: 600,
+  color: alpha(theme?.palette?.secondary?.lighter, 0.5),
+}))
+
+export const StyledMenuItem = styled(Box)({
+  height: '68px',
+  width: '380px',
+  padding: '40px 20px',
+  transition: 'background ease 0.3s',
+  '&:hover': {
+    background: 'rgba(0, 0, 0, 0.03)',
+  },
+  display: 'flex',
+  alignItems: 'center',
+  gap: '20px',
+})
+
+export const StyledMenuItemContainer = styled(Box)(({ theme }) => ({
+  cursor: 'pointer',
+
+  padding: '8px 0px',
+
+  borderBottom: `1px solid ${theme?.palette?.secondary?.lighter}`,
+}))
+
+export const StyledAvatar = styled(Avatar)(({ theme }) => ({
+  background: theme.palette.secondary.main,
+  cursor: 'pointer',
+  height: '45px',
+  width: '45px',
+}))
+
+export const StyledLogosWrapper = styled(Box)(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px',
+  padding: '10px',
+  transition: 'background ease 0.3s',
+  borderRadius: '5px',
+  '&:hover': {
+    background: 'rgba(0, 0, 0, 0.05)',
+  },
+}))
+
+export const StyledImageBox = styled(Box)(() => ({
+  height: '40px',
+  width: '40px',
+  boxShadow: '0px 5px 5px 0px rgba(48, 62, 99,0.1) ',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '5px',
+}))
+
+export const StyledRouterLink = styled(RouterLink)(() => ({
+  textDecoration: 'none',
+}))

package/src/components/Layout/Helmet.tsx

@@ -1,49 +1,49 @@
-import { Helmet as ReactHelmet } from 'react-helmet'
-
-type MetaProps = JSX.IntrinsicElements['meta']
-type LinkProps = JSX.IntrinsicElements['link']
-
-interface IHelmetProps {
-  appTitle: string
-  favicon: string
-  description?: string
-  meta?: MetaProps[] | undefined
-  link?: LinkProps[] | undefined
-}
-
-export default function Helmet({
-  appTitle,
-  favicon,
-  description,
-  meta = [],
-  link = [],
-}: IHelmetProps) {
-  return (
-    <ReactHelmet
-      htmlAttributes={{ lang: 'en' }}
-      title={appTitle}
-      meta={[
-        {
-          charSet: 'utf-8',
-        },
-        {
-          name: 'description',
-          content: description,
-        },
-        {
-          name: 'viewport',
-          content: 'width=device-width, initial-scale=1',
-        },
-        ...meta,
-      ]}
-      link={[
-        { rel: 'icon', href: favicon },
-        {
-          rel: 'apple-touch-icon',
-          href: favicon,
-        },
-        ...link,
-      ]}
-    />
-  )
-}
+import { Helmet as ReactHelmet } from 'react-helmet'
+
+type MetaProps = JSX.IntrinsicElements['meta']
+type LinkProps = JSX.IntrinsicElements['link']
+
+interface IHelmetProps {
+  appTitle: string
+  favicon: string
+  description?: string
+  meta?: MetaProps[] | undefined
+  link?: LinkProps[] | undefined
+}
+
+export default function Helmet({
+  appTitle,
+  favicon,
+  description,
+  meta = [],
+  link = [],
+}: IHelmetProps) {
+  return (
+    <ReactHelmet
+      htmlAttributes={{ lang: 'en' }}
+      title={appTitle}
+      meta={[
+        {
+          charSet: 'utf-8',
+        },
+        {
+          name: 'description',
+          content: description,
+        },
+        {
+          name: 'viewport',
+          content: 'width=device-width, initial-scale=1',
+        },
+        ...meta,
+      ]}
+      link={[
+        { rel: 'icon', href: favicon },
+        {
+          rel: 'apple-touch-icon',
+          href: favicon,
+        },
+        ...link,
+      ]}
+    />
+  )
+}

package/src/components/Layout/LayoutWrapper.tsx

@@ -1,28 +1,28 @@
-import {
-  StyledLeftNavContainer,
-  StyledMainContentContainer,
-} from '../../layouts/Components/styles'
-import ErrorBoundary from '../ErrorBoundary'
-import SideNav from './SideNav'
-interface Props {
-  children?: React.ReactNode
-  menu: any[]
-  sideMenuHeader?: React.ReactNode
-}
-
-export default function LayoutWrapper({
-  children,
-  menu,
-  sideMenuHeader,
-}: Props) {
-  return (
-    <ErrorBoundary>
-      <StyledLeftNavContainer>
-        <SideNav menuItems={menu as any[]} header={sideMenuHeader} />
-      </StyledLeftNavContainer>
-      <StyledMainContentContainer>
-        <ErrorBoundary>{children}</ErrorBoundary>
-      </StyledMainContentContainer>
-    </ErrorBoundary>
-  )
-}
+import {
+  StyledLeftNavContainer,
+  StyledMainContentContainer,
+} from '../../layouts/Components/styles'
+import ErrorBoundary from '../ErrorBoundary'
+import SideNav from './SideNav'
+interface Props {
+  children?: React.ReactNode
+  menu: any[]
+  sideMenuHeader?: React.ReactNode
+}
+
+export default function LayoutWrapper({
+  children,
+  menu,
+  sideMenuHeader,
+}: Props) {
+  return (
+    <ErrorBoundary>
+      <StyledLeftNavContainer>
+        <SideNav menuItems={menu as any[]} header={sideMenuHeader} />
+      </StyledLeftNavContainer>
+      <StyledMainContentContainer>
+        <ErrorBoundary>{children}</ErrorBoundary>
+      </StyledMainContentContainer>
+    </ErrorBoundary>
+  )
+}

package/src/components/Layout/SideMenuHeader.tsx

@@ -1,29 +1,29 @@
-import { KeyboardBackspace } from '@mui/icons-material'
-import { Box, styled as styledMui, Typography } from '@mui/material'
-import { useNavigate } from 'react-router-dom'
-
-const StyledSideMenuHeader = styledMui(Box)(({ theme }) => ({
-  height: '60px',
-  display: 'flex',
-  gap: '8px',
-  alignItems: 'center',
-  cursor: 'pointer',
-  background: '#1d1d1d',
-}))
-
-export const SideMenuHeader = ({ title, path }) => {
-  const navigate = useNavigate()
-
-  return (
-    <StyledSideMenuHeader
-      onClick={() => {
-        navigate(path)
-      }}
-    >
-      <KeyboardBackspace />
-      <Typography variant="h3" color={'white'}>
-        {title}
-      </Typography>
-    </StyledSideMenuHeader>
-  )
-}
+import { KeyboardBackspace } from '@mui/icons-material'
+import { Box, styled as styledMui, Typography } from '@mui/material'
+import { useNavigate } from 'react-router-dom'
+
+const StyledSideMenuHeader = styledMui(Box)(({ theme }) => ({
+  height: '60px',
+  display: 'flex',
+  gap: '8px',
+  alignItems: 'center',
+  cursor: 'pointer',
+  background: '#1d1d1d',
+}))
+
+export const SideMenuHeader = ({ title, path }) => {
+  const navigate = useNavigate()
+
+  return (
+    <StyledSideMenuHeader
+      onClick={() => {
+        navigate(path)
+      }}
+    >
+      <KeyboardBackspace />
+      <Typography variant="h3" color={'white'}>
+        {title}
+      </Typography>
+    </StyledSideMenuHeader>
+  )
+}