@campxdev/shared 0.3.12 → 0.3.14

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

@@ -1,42 +1,42 @@
-import {Box, Typography} from '@mui/material'
-import {ReactNode} from 'react'
-import {avatarImage} from '../../../assets/images'
-import MenuButton from '../../MenuButton'
-import {StyledUser} from './styles'
-
-export default function UserBox({
-	username,
-	profileIcon,
-	actions,
-}: {
-	username: string
-	profileIcon: string
-	actions: {label: ReactNode; icon?: ReactNode; onClick: any}[]
-}) {
-	return (
-		<MenuButton
-			anchor={
-				<Box minWidth={'80px'} textAlign='center'>
-					<StyledUser>
-						<img
-							src={profileIcon ?? avatarImage}
-							style={{
-								height: '32px',
-								width: '32px',
-								objectFit: 'contain',
-							}}
-							onError={(e: any) => {
-								e.target.src = avatarImage
-							}}
-						/>
-						<Typography variant='h6'>{username}</Typography>
-					</StyledUser>
-				</Box>
-			}
-			menu={actions}
-			menuProps={{
-				PaperProps: {sx: {top: '64px !important'}},
-			}}
-		/>
-	)
-}
+import {Box, Typography} from '@mui/material'
+import {ReactNode} from 'react'
+import {avatarImage} from '../../../assets/images'
+import MenuButton from '../../MenuButton'
+import {StyledUser} from './styles'
+
+export default function UserBox({
+	username,
+	profileIcon,
+	actions,
+}: {
+	username: string
+	profileIcon: string
+	actions: {label: ReactNode; icon?: ReactNode; onClick: any}[]
+}) {
+	return (
+		<MenuButton
+			anchor={
+				<Box minWidth={'80px'} textAlign='center'>
+					<StyledUser>
+						<img
+							src={profileIcon ?? avatarImage}
+							style={{
+								height: '32px',
+								width: '32px',
+								objectFit: 'contain',
+							}}
+							onError={(e: any) => {
+								e.target.src = avatarImage
+							}}
+						/>
+						<Typography variant='h6'>{username}</Typography>
+					</StyledUser>
+				</Box>
+			}
+			menu={actions}
+			menuProps={{
+				PaperProps: {sx: {top: '64px !important'}},
+			}}
+		/>
+	)
+}

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

@@ -1,60 +1,60 @@
-import GiteTwoToneIcon from '@mui/icons-material/GiteTwoTone'
-import SchoolRoundedIcon from '@mui/icons-material/SchoolRounded'
-import AssignmentRoundedIcon from '@mui/icons-material/AssignmentRounded'
-import AccountBalanceWalletRoundedIcon from '@mui/icons-material/AccountBalanceWalletRounded'
-import PersonRoundedIcon from '@mui/icons-material/PersonRounded'
-
-const isDev =
-	process.env.NODE_ENV === 'development' ||
-	window.location.origin.split('.').slice(-2).join('.') === 'campx.dev'
-
-const origins = {
-	ums: {
-		dev: 'https://ums.campx.dev',
-		prod: 'https://ums.campx.in',
-	},
-	payments: {
-		dev: 'https://payments.campx.dev',
-		prod: 'https://payments.campx.in',
-	},
-	exams: {
-		dev: 'https://exams.campx.dev',
-		prod: 'https://exams.campx.in',
-	},
-}
-
-export const applications = [
-	{
-		title: 'CollegeX',
-		path: isDev ? origins.ums.dev : origins.ums.prod,
-		icon: <SchoolRoundedIcon />,
-		key: 'ums',
-		// description: 'Pack my box with five dozens liquor jugs',
-	},
-	{
-		title: 'ExamX',
-		key: 'exams',
-		path: isDev ? origins.exams.dev : origins.exams.prod,
-		icon: <AssignmentRoundedIcon />,
-		// description: 'Pack my box with five dozens liquor jugs',
-	},
-	{
-		title: 'PayX',
-		key: 'payments',
-		path: isDev ? origins.payments.dev : origins.payments.prod,
-		icon: <AccountBalanceWalletRoundedIcon />,
-		// description: 'Pack my box with five dozens liquor jugs',
-	},
-	// {
-	// 	title: 'PeopleX',
-	// 	path: '/people',
-	// 	icon: <PersonRoundedIcon />,
-	// 	// description: 'Pack my box with five dozens liquor jugs',
-	// },
-	// {
-	// 	title: 'HostelX',
-	// 	path: '/hostel',
-	// 	icon: <GiteTwoToneIcon />,
-	// 	// description: 'Pack my box with five dozens liquor jugs',
-	// },
-]
+import GiteTwoToneIcon from '@mui/icons-material/GiteTwoTone'
+import SchoolRoundedIcon from '@mui/icons-material/SchoolRounded'
+import AssignmentRoundedIcon from '@mui/icons-material/AssignmentRounded'
+import AccountBalanceWalletRoundedIcon from '@mui/icons-material/AccountBalanceWalletRounded'
+import PersonRoundedIcon from '@mui/icons-material/PersonRounded'
+
+const isDev =
+	process.env.NODE_ENV === 'development' ||
+	window.location.origin.split('.').slice(-2).join('.') === 'campx.dev'
+
+const origins = {
+	ums: {
+		dev: 'https://ums.campx.dev',
+		prod: 'https://ums.campx.in',
+	},
+	payments: {
+		dev: 'https://payments.campx.dev',
+		prod: 'https://payments.campx.in',
+	},
+	exams: {
+		dev: 'https://exams.campx.dev',
+		prod: 'https://exams.campx.in',
+	},
+}
+
+export const applications = [
+	{
+		title: 'CollegeX',
+		path: isDev ? origins.ums.dev : origins.ums.prod,
+		icon: <SchoolRoundedIcon />,
+		key: 'ums',
+		// description: 'Pack my box with five dozens liquor jugs',
+	},
+	{
+		title: 'ExamX',
+		key: 'exams',
+		path: isDev ? origins.exams.dev : origins.exams.prod,
+		icon: <AssignmentRoundedIcon />,
+		// description: 'Pack my box with five dozens liquor jugs',
+	},
+	{
+		title: 'PayX',
+		key: 'payments',
+		path: isDev ? origins.payments.dev : origins.payments.prod,
+		icon: <AccountBalanceWalletRoundedIcon />,
+		// description: 'Pack my box with five dozens liquor jugs',
+	},
+	// {
+	// 	title: 'PeopleX',
+	// 	path: '/people',
+	// 	icon: <PersonRoundedIcon />,
+	// 	// description: 'Pack my box with five dozens liquor jugs',
+	// },
+	// {
+	// 	title: 'HostelX',
+	// 	path: '/hostel',
+	// 	icon: <GiteTwoToneIcon />,
+	// 	// description: 'Pack my box with five dozens liquor jugs',
+	// },
+]

package/src/components/Layout/Header/assets/index.ts

@@ -1,7 +1,7 @@
-const collegex = require('./collegex.png')
-const enrollx = require('./enrollx.png')
-const examx = require('./examx.png')
-const payx = require('./payx.png')
-const peoplex = require('./peoplex.png')
-
-export {collegex, enrollx, examx, payx, peoplex}
+const collegex = require('./collegex.png')
+const enrollx = require('./enrollx.png')
+const examx = require('./examx.png')
+const payx = require('./payx.png')
+const peoplex = require('./peoplex.png')
+
+export {collegex, enrollx, examx, payx, peoplex}

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

@@ -1,57 +1,57 @@
-export const AppsIcon = () => {
-  return (
-    <svg
-      id="apps"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-    >
-      <path
-        id="Path_15109"
-        data-name="Path 15109"
-        d="M7,0H4A4,4,0,0,0,0,4V7a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V4A4,4,0,0,0,7,0ZM9,7A2,2,0,0,1,7,9H4A2,2,0,0,1,2,7V4A2,2,0,0,1,4,2H7A2,2,0,0,1,9,4Z"
-        fill="#d4483e"
-      />
-      <path
-        id="Path_15110"
-        data-name="Path 15110"
-        d="M20,0H17a4,4,0,0,0-4,4V7a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V4A4,4,0,0,0,20,0Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V4a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"
-        fill="#f8d759"
-      />
-      <path
-        id="Path_15111"
-        data-name="Path 15111"
-        d="M7,13H4a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V17A4,4,0,0,0,7,13Zm2,7a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2H7a2,2,0,0,1,2,2Z"
-        fill="#88b053"
-      />
-      <path
-        id="Path_15112"
-        data-name="Path 15112"
-        d="M20,13H17a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V17A4,4,0,0,0,20,13Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"
-        fill="#4baabe"
-      />
-    </svg>
-  )
-}
-
-export const NotificationIcon = () => {
-  return (
-    <>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="18.125"
-        height="20"
-        viewBox="0 0 18.125 20"
-      >
-        <path
-          id="bell_10_"
-          data-name="bell (10)"
-          d="M18.958,11.384l-1.583-5.7a7.767,7.767,0,0,0-15.064.395L1.085,11.595a4.166,4.166,0,0,0,4.067,5.07H6.08a4.166,4.166,0,0,0,8.166,0h.7a4.166,4.166,0,0,0,4.015-5.281Zm-8.795,6.948a2.5,2.5,0,0,1-2.346-1.666H12.51A2.5,2.5,0,0,1,10.163,18.332Zm6.771-4.32A2.481,2.481,0,0,1,14.944,15H5.152a2.5,2.5,0,0,1-2.44-3.042L3.937,6.444a6.1,6.1,0,0,1,11.832-.31l1.583,5.7a2.481,2.481,0,0,1-.418,2.181Z"
-          transform="translate(-0.986 -0.002)"
-          fill="#121212"
-        />
-      </svg>
-    </>
-  )
-}
+export const AppsIcon = () => {
+  return (
+    <svg
+      id="apps"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <path
+        id="Path_15109"
+        data-name="Path 15109"
+        d="M7,0H4A4,4,0,0,0,0,4V7a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V4A4,4,0,0,0,7,0ZM9,7A2,2,0,0,1,7,9H4A2,2,0,0,1,2,7V4A2,2,0,0,1,4,2H7A2,2,0,0,1,9,4Z"
+        fill="#d4483e"
+      />
+      <path
+        id="Path_15110"
+        data-name="Path 15110"
+        d="M20,0H17a4,4,0,0,0-4,4V7a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V4A4,4,0,0,0,20,0Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V4a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"
+        fill="#f8d759"
+      />
+      <path
+        id="Path_15111"
+        data-name="Path 15111"
+        d="M7,13H4a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V17A4,4,0,0,0,7,13Zm2,7a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2H7a2,2,0,0,1,2,2Z"
+        fill="#88b053"
+      />
+      <path
+        id="Path_15112"
+        data-name="Path 15112"
+        d="M20,13H17a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V17A4,4,0,0,0,20,13Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"
+        fill="#4baabe"
+      />
+    </svg>
+  )
+}
+
+export const NotificationIcon = () => {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18.125"
+        height="20"
+        viewBox="0 0 18.125 20"
+      >
+        <path
+          id="bell_10_"
+          data-name="bell (10)"
+          d="M18.958,11.384l-1.583-5.7a7.767,7.767,0,0,0-15.064.395L1.085,11.595a4.166,4.166,0,0,0,4.067,5.07H6.08a4.166,4.166,0,0,0,8.166,0h.7a4.166,4.166,0,0,0,4.015-5.281Zm-8.795,6.948a2.5,2.5,0,0,1-2.346-1.666H12.51A2.5,2.5,0,0,1,10.163,18.332Zm6.771-4.32A2.481,2.481,0,0,1,14.944,15H5.152a2.5,2.5,0,0,1-2.44-3.042L3.937,6.444a6.1,6.1,0,0,1,11.832-.31l1.583,5.7a2.481,2.481,0,0,1-.418,2.181Z"
+          transform="translate(-0.986 -0.002)"
+          fill="#121212"
+        />
+      </svg>
+    </>
+  )
+}

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

@@ -1 +1 @@
-export { default } from './AppHeader'
+export { default } from './AppHeader'

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

@@ -1,91 +1,91 @@
-import {
-	AppBar,
-	Box,
-	IconButton,
-	ListItemText,
-	styled,
-	Typography,
-} from '@mui/material'
-
-export const StyledImageWrapper = styled('div')`
-	width: auto;
-	height: 20px;
-	& 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: '10px',
-		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',
-})
-
-export const StyledDescription = styled(Typography)(({theme}) => ({
-	fontSize: '15px',
-	fontWeight: 500,
-	color: theme?.palette?.secondary?.main,
-}))
-
-export const StyledMenuItem = styled(Box)({
-	height: '64px',
-	width: '360px',
-	padding: '20px',
-	transition: 'background ease 0.3s',
-	'&:hover': {
-		background: 'rgba(0, 0, 0, 0.03)',
-	},
-	display: 'flex',
-	alignItems: 'center',
-	gap: '10px',
-})
-
-export const StyledMenuItemContainer = styled(Box)(({theme}) => ({
-	cursor: 'pointer',
-	borderBottom: `1px solid ${theme?.palette?.secondary?.lighter}`,
-	'&:last-of-type': {
-		border: 'none',
-	},
-}))
+import {
+	AppBar,
+	Box,
+	IconButton,
+	ListItemText,
+	styled,
+	Typography,
+} from '@mui/material'
+
+export const StyledImageWrapper = styled('div')`
+	width: auto;
+	height: 20px;
+	& 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: '10px',
+		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',
+})
+
+export const StyledDescription = styled(Typography)(({theme}) => ({
+	fontSize: '15px',
+	fontWeight: 500,
+	color: theme?.palette?.secondary?.main,
+}))
+
+export const StyledMenuItem = styled(Box)({
+	height: '64px',
+	width: '360px',
+	padding: '20px',
+	transition: 'background ease 0.3s',
+	'&:hover': {
+		background: 'rgba(0, 0, 0, 0.03)',
+	},
+	display: 'flex',
+	alignItems: 'center',
+	gap: '10px',
+})
+
+export const StyledMenuItemContainer = styled(Box)(({theme}) => ({
+	cursor: 'pointer',
+	borderBottom: `1px solid ${theme?.palette?.secondary?.lighter}`,
+	'&:last-of-type': {
+		border: 'none',
+	},
+}))

package/src/components/LinearProgress.tsx

@@ -1,19 +1,19 @@
-import {
-	BoxProps,
-	styled,
-	Box,
-	LinearProgress as MuiLinearProgress,
-} from '@mui/material'
-
-export const LinearProgress = styled((props: BoxProps) => (
-	<Box {...props}>
-		<MuiLinearProgress color={'inherit'} sx={{height: '4px'}} />
-	</Box>
-))(({theme}) => ({
-	width: '100%',
-	position: 'fixed',
-	top: 0,
-	left: 0,
-	zIndex: 400,
-	color: theme.palette.primary.main,
-}))
+import {
+	BoxProps,
+	styled,
+	Box,
+	LinearProgress as MuiLinearProgress,
+} from '@mui/material'
+
+export const LinearProgress = styled((props: BoxProps) => (
+	<Box {...props}>
+		<MuiLinearProgress color={'inherit'} sx={{height: '4px'}} />
+	</Box>
+))(({theme}) => ({
+	width: '100%',
+	position: 'fixed',
+	top: 0,
+	left: 0,
+	zIndex: 400,
+	color: theme.palette.primary.main,
+}))