@campxdev/shared 1.10.37 → 1.10.38

package/src/components/MyProfile/StyledTabsContainer.tsx

@@ -1,53 +1,53 @@
-import { Tab } from '@mui/material'
-import { ChangeEvent, ReactNode, useEffect, useState } from 'react'
-import { StyledComponentWrapper, StyledTabs } from './Styles'
-
-export interface TabsContainerProps {
-  tabs: {
-    key: string
-    label: string
-    component: ReactNode
-  }[]
-  size?: 'small' | 'medium'
-  onTabChange?: (tabKey: string) => void
-  centered: any
-  textColor?: any
-  indicatorBackgroundColor?: any
-}
-
-export default function StyledTabsContainer({
-  tabs,
-  onTabChange,
-  textColor,
-  indicatorBackgroundColor,
-}: TabsContainerProps) {
-  const [currentTab, setCurrentTab] = useState(tabs[0].key)
-
-  const handleTabsChange = (_event: ChangeEvent<{}>, value: string): void => {
-    setCurrentTab(value)
-    onTabChange && onTabChange(value)
-  }
-  useEffect(() => {
-    setCurrentTab(tabs[0].key)
-  }, [])
-
-  return (
-    <>
-      <StyledTabs
-        onChange={handleTabsChange}
-        value={currentTab}
-        size="small"
-        centered
-        textColor={textColor}
-        indicatorBackgroundColor={indicatorBackgroundColor}
-      >
-        {tabs.map((tab) => (
-          <Tab key={tab.key} label={tab.label} value={tab.key} />
-        ))}
-      </StyledTabs>
-      <StyledComponentWrapper>
-        {tabs.find((tab) => tab.key === currentTab)?.component}
-      </StyledComponentWrapper>
-    </>
-  )
-}
+import { Tab } from '@mui/material'
+import { ChangeEvent, ReactNode, useEffect, useState } from 'react'
+import { StyledComponentWrapper, StyledTabs } from './Styles'
+
+export interface TabsContainerProps {
+  tabs: {
+    key: string
+    label: string
+    component: ReactNode
+  }[]
+  size?: 'small' | 'medium'
+  onTabChange?: (tabKey: string) => void
+  centered: any
+  textColor?: any
+  indicatorBackgroundColor?: any
+}
+
+export default function StyledTabsContainer({
+  tabs,
+  onTabChange,
+  textColor,
+  indicatorBackgroundColor,
+}: TabsContainerProps) {
+  const [currentTab, setCurrentTab] = useState(tabs[0].key)
+
+  const handleTabsChange = (_event: ChangeEvent<{}>, value: string): void => {
+    setCurrentTab(value)
+    onTabChange && onTabChange(value)
+  }
+  useEffect(() => {
+    setCurrentTab(tabs[0].key)
+  }, [])
+
+  return (
+    <>
+      <StyledTabs
+        onChange={handleTabsChange}
+        value={currentTab}
+        size="small"
+        centered
+        textColor={textColor}
+        indicatorBackgroundColor={indicatorBackgroundColor}
+      >
+        {tabs.map((tab) => (
+          <Tab key={tab.key} label={tab.label} value={tab.key} />
+        ))}
+      </StyledTabs>
+      <StyledComponentWrapper>
+        {tabs.find((tab) => tab.key === currentTab)?.component}
+      </StyledComponentWrapper>
+    </>
+  )
+}

package/src/components/MyProfile/Styles.tsx

@@ -1,128 +1,128 @@
-import { KeyboardArrowLeft } from '@mui/icons-material'
-import { Avatar, Box, FormLabel, Tabs, styled } from '@mui/material'
-import CoverBg from '../../assets/images/CoverBg.png'
-
-export const StyledSubContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-  gap: '5px',
-  height: '50vh',
-}))
-export const StyledArrowIcon = styled(KeyboardArrowLeft)({
-  marginRight: '8px',
-  width: '2rem',
-  height: '25px',
-  cursor: 'pointer',
-  color: 'white',
-})
-export const StyledMainContainer = styled(Box)(({ theme }) => ({
-  maxHeight: '50vh',
-  height: 'auto',
-  marginTop: '25px',
-  overflowY: 'auto',
-  '&::-webkit-scrollbar': {
-    width: '0.5em',
-    height: '0.5em',
-  },
-
-  border: theme.borders.grayLight,
-  borderRadius: '10px',
-  '& .MuiTabs-root': {
-    backgroundColor: 'white',
-    borderBottom: theme.borders.grayLight,
-    '& .MuiTab-root': {
-      padding: '0 20px',
-      paddingBottom: '8px',
-    },
-  },
-}))
-export const StyledTabs = styled(Tabs)<{
-  size: 'small' | 'medium'
-  indicatorBackgroundColor?: string
-  textColor?: string
-}>(({ theme, size, indicatorBackgroundColor, textColor }) => ({
-  borderTopRightRadius: '10px',
-  borderTopLeftRadius: '10px',
-  background: theme.palette.secondary.light,
-  minHeight: '60px',
-  paddingLeft: '15px',
-  '& .MuiTabs-flexContainer': {
-    height: '100%',
-    alignItems: 'end',
-  },
-  '& .MuiTabs-indicator': {
-    backgroundColor: indicatorBackgroundColor || theme.palette.common.yellow,
-  },
-  '& .MuiTab-root.Mui-selected': {
-    color: textColor || theme.palette.secondary.main,
-  },
-  '& .MuiTab-root': {
-    textTransform: 'none',
-    transition: 'color 0.2s ease-in-out',
-    padding: '5px 15px',
-    paddingBottom: '8px',
-    minHeight: 0,
-    fontSize: size === 'medium' ? '16px' : '14px',
-    fontWeight: '600',
-  },
-}))
-
-export const StyledComponentWrapper = styled(Box)<{}>(({ theme }) => ({
-  padding: '15px',
-  height: '50vh',
-  overflow: 'auto',
-
-  '&::-webkit-scrollbar': {
-    width: '0.5em',
-    height: '0.5em',
-  },
-}))
-
-export const StyledUploadContainer = styled(FormLabel)({
-  border: '1px dashed #0000001A',
-  padding: '40px',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  borderRadius: '10px',
-  cursor: 'pointer',
-  '&:hover': {
-    backgroundColor: '#EFEFEF',
-  },
-})
-
-export const StyledUploadedFileContainer = styled(Box)({
-  border: '1px solid #1212121A',
-  borderRadius: '10px',
-  padding: '10px',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  margin: '10px 0px',
-})
-
-export const StyledBox = styled(Box)({
-  height: '200px',
-  width: '100%',
-  background: `url(${CoverBg})`,
-  position: 'absolute',
-  left: 0,
-  top: 0,
-  zIndex: 0,
-})
-
-export const StyledBoxHeader = styled(Box)({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'flex-end',
-  marginTop: '1rem',
-})
-
-export const StyledAvatar = styled(Avatar)({
-  width: '160px',
-  height: '160px',
-  borderRadius: '10px',
-  backgroundColor: 'lightgrey',
-})
+import { KeyboardArrowLeft } from '@mui/icons-material'
+import { Avatar, Box, FormLabel, Tabs, styled } from '@mui/material'
+import CoverBg from '../../assets/images/CoverBg.png'
+
+export const StyledSubContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '5px',
+  height: '50vh',
+}))
+export const StyledArrowIcon = styled(KeyboardArrowLeft)({
+  marginRight: '8px',
+  width: '2rem',
+  height: '25px',
+  cursor: 'pointer',
+  color: 'white',
+})
+export const StyledMainContainer = styled(Box)(({ theme }) => ({
+  maxHeight: '50vh',
+  height: 'auto',
+  marginTop: '25px',
+  overflowY: 'auto',
+  '&::-webkit-scrollbar': {
+    width: '0.5em',
+    height: '0.5em',
+  },
+
+  border: theme.borders.grayLight,
+  borderRadius: '10px',
+  '& .MuiTabs-root': {
+    backgroundColor: 'white',
+    borderBottom: theme.borders.grayLight,
+    '& .MuiTab-root': {
+      padding: '0 20px',
+      paddingBottom: '8px',
+    },
+  },
+}))
+export const StyledTabs = styled(Tabs)<{
+  size: 'small' | 'medium'
+  indicatorBackgroundColor?: string
+  textColor?: string
+}>(({ theme, size, indicatorBackgroundColor, textColor }) => ({
+  borderTopRightRadius: '10px',
+  borderTopLeftRadius: '10px',
+  background: theme.palette.secondary.light,
+  minHeight: '60px',
+  paddingLeft: '15px',
+  '& .MuiTabs-flexContainer': {
+    height: '100%',
+    alignItems: 'end',
+  },
+  '& .MuiTabs-indicator': {
+    backgroundColor: indicatorBackgroundColor || theme.palette.common.yellow,
+  },
+  '& .MuiTab-root.Mui-selected': {
+    color: textColor || theme.palette.secondary.main,
+  },
+  '& .MuiTab-root': {
+    textTransform: 'none',
+    transition: 'color 0.2s ease-in-out',
+    padding: '5px 15px',
+    paddingBottom: '8px',
+    minHeight: 0,
+    fontSize: size === 'medium' ? '16px' : '14px',
+    fontWeight: '600',
+  },
+}))
+
+export const StyledComponentWrapper = styled(Box)<{}>(({ theme }) => ({
+  padding: '15px',
+  height: '50vh',
+  overflow: 'auto',
+
+  '&::-webkit-scrollbar': {
+    width: '0.5em',
+    height: '0.5em',
+  },
+}))
+
+export const StyledUploadContainer = styled(FormLabel)({
+  border: '1px dashed #0000001A',
+  padding: '40px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '10px',
+  cursor: 'pointer',
+  '&:hover': {
+    backgroundColor: '#EFEFEF',
+  },
+})
+
+export const StyledUploadedFileContainer = styled(Box)({
+  border: '1px solid #1212121A',
+  borderRadius: '10px',
+  padding: '10px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  margin: '10px 0px',
+})
+
+export const StyledBox = styled(Box)({
+  height: '200px',
+  width: '100%',
+  background: `url(${CoverBg})`,
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  zIndex: 0,
+})
+
+export const StyledBoxHeader = styled(Box)({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'flex-end',
+  marginTop: '1rem',
+})
+
+export const StyledAvatar = styled(Avatar)({
+  width: '160px',
+  height: '160px',
+  borderRadius: '10px',
+  backgroundColor: 'lightgrey',
+})

package/src/components/MyProfile/Workshop/Styles.tsx

@@ -1,38 +1,38 @@
-import { Box, styled } from '@mui/material'
-
-export const StyledBox = styled(Box)({
-  display: 'flex',
-  justifyContent: 'space-between',
-})
-
-export const StyledBoxContainer = styled(Box)({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  margin: '10px 0',
-})
-
-export const StyledAvatar = styled(Box)({
-  width: '100px',
-  height: '100px',
-  borderRadius: '10px',
-  border: '1px solid #E5E5E5',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  backgroundColor: '#E5E5E5',
-})
-
-export const StyledTextContainer = styled(Box)({
-  marginTop: '8px',
-  marginLeft: '20px',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-})
-
-export const StyledBoxCard = styled(Box)({
-  display: 'grid',
-  gridTemplateColumns: 'repeat(auto-fill, minmax(500px, 1fr))',
-  gap: '1rem',
-})
+import { Box, styled } from '@mui/material'
+
+export const StyledBox = styled(Box)({
+  display: 'flex',
+  justifyContent: 'space-between',
+})
+
+export const StyledBoxContainer = styled(Box)({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  margin: '10px 0',
+})
+
+export const StyledAvatar = styled(Box)({
+  width: '100px',
+  height: '100px',
+  borderRadius: '10px',
+  border: '1px solid #E5E5E5',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: '#E5E5E5',
+})
+
+export const StyledTextContainer = styled(Box)({
+  marginTop: '8px',
+  marginLeft: '20px',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+})
+
+export const StyledBoxCard = styled(Box)({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(500px, 1fr))',
+  gap: '1rem',
+})

package/src/components/MyProfile/Workshop/Workshop.tsx

@@ -1,49 +1,49 @@
-import NoDataSection from '../NoDataSection'
-import StyledTabsContainer from '../StyledTabsContainer'
-import WorkshopData from './WorkshopData'
-import { WorkshopForm } from './WorkshopForm'
-
-const Workshop = ({ workshops }) => {
-  const attendedWorkshops = workshops?.filter((w) => !w.organized)
-  const organisedWorkshops = workshops?.filter((w) => w.organized)
-
-  const tabs = [
-    {
-      key: 'Attended',
-      label: 'Attended',
-      component: (
-        <WorkshopData title={'Attended'} workshop={attendedWorkshops} />
-      ),
-    },
-    {
-      key: 'Organised',
-      label: 'Organised',
-      component: (
-        <WorkshopData title={'Organised'} workshop={organisedWorkshops} />
-      ),
-    },
-  ]
-  const isWorkshop = workshops && workshops?.length > 0
-
-  return isWorkshop ? (
-    <>
-      <StyledTabsContainer
-        tabs={tabs}
-        centered
-        textColor="primary"
-        indicatorBackgroundColor="primary"
-      />
-    </>
-  ) : (
-    <NoDataSection
-      title="Workshop"
-      subtitle="Add Workshop"
-      addButtonTitle="Add Your workshop"
-      addButtonContent={({ close }) => (
-        <WorkshopForm data={null} hideDialog={close} />
-      )}
-    />
-  )
-}
-
-export default Workshop
+import NoDataSection from '../NoDataSection'
+import StyledTabsContainer from '../StyledTabsContainer'
+import WorkshopData from './WorkshopData'
+import { WorkshopForm } from './WorkshopForm'
+
+const Workshop = ({ workshops }) => {
+  const attendedWorkshops = workshops?.filter((w) => !w.organized)
+  const organisedWorkshops = workshops?.filter((w) => w.organized)
+
+  const tabs = [
+    {
+      key: 'Attended',
+      label: 'Attended',
+      component: (
+        <WorkshopData title={'Attended'} workshop={attendedWorkshops} />
+      ),
+    },
+    {
+      key: 'Organised',
+      label: 'Organised',
+      component: (
+        <WorkshopData title={'Organised'} workshop={organisedWorkshops} />
+      ),
+    },
+  ]
+  const isWorkshop = workshops && workshops?.length > 0
+
+  return isWorkshop ? (
+    <>
+      <StyledTabsContainer
+        tabs={tabs}
+        centered
+        textColor="primary"
+        indicatorBackgroundColor="primary"
+      />
+    </>
+  ) : (
+    <NoDataSection
+      title="Workshop"
+      subtitle="Add Workshop"
+      addButtonTitle="Add Your workshop"
+      addButtonContent={({ close }) => (
+        <WorkshopForm data={null} hideDialog={close} />
+      )}
+    />
+  )
+}
+
+export default Workshop

package/src/components/MyProfile/Workshop/WorkshopCard.tsx

@@ -1,64 +1,64 @@
-import { Box, Card, Typography } from '@mui/material'
-import moment from 'moment'
-import { EditButton } from '../../IconButtons'
-import Image from '../../Image/Image'
-import { DialogButton } from '../../ModalButtons'
-import { StyledAvatar, StyledBox, StyledTextContainer } from './Styles'
-import { WorkshopForm } from './WorkshopForm'
-
-const WorkshopCard = ({ data }) => {
-  return (
-    <div>
-      <Card
-        sx={{
-          padding: '15px',
-        }}
-      >
-        <StyledBox>
-          <Box
-            sx={{
-              display: 'flex',
-            }}
-          >
-            {data?.image?.url ? (
-              <Image
-                alt=""
-                radius={'10px'}
-                src={data?.image?.url}
-                width={'100px'}
-                height={'100px'}
-                fit={'cover'}
-              />
-            ) : (
-              <StyledAvatar>
-                <Typography sx={{ color: 'blue', fontSize: '30px' }}>
-                  {data?.title[0].toUpperCase()}
-                </Typography>
-              </StyledAvatar>
-            )}
-            <StyledTextContainer>
-              <Typography variant="h5">{data?.title}</Typography>
-              <Typography variant="subtitle2">{data?.stream}</Typography>
-              <Typography variant="subtitle2">
-                {moment(data?.fromDate).format('DD MMM YYYY')} -{' '}
-                {moment(data?.toDate).format('DD MMM YYYY')}
-              </Typography>
-            </StyledTextContainer>
-          </Box>
-          <Box>
-            <DialogButton
-              key={data?.id}
-              title={'Edit Workshop'}
-              anchor={({ open }) => <EditButton onClick={open} />}
-              content={({ close }) => (
-                <WorkshopForm data={data} hideDialog={close} />
-              )}
-            />
-          </Box>
-        </StyledBox>
-      </Card>
-    </div>
-  )
-}
-
-export default WorkshopCard
+import { Box, Card, Typography } from '@mui/material'
+import moment from 'moment'
+import { EditButton } from '../../IconButtons'
+import Image from '../../Image/Image'
+import { DialogButton } from '../../ModalButtons'
+import { StyledAvatar, StyledBox, StyledTextContainer } from './Styles'
+import { WorkshopForm } from './WorkshopForm'
+
+const WorkshopCard = ({ data }) => {
+  return (
+    <div>
+      <Card
+        sx={{
+          padding: '15px',
+        }}
+      >
+        <StyledBox>
+          <Box
+            sx={{
+              display: 'flex',
+            }}
+          >
+            {data?.image?.url ? (
+              <Image
+                alt=""
+                radius={'10px'}
+                src={data?.image?.url}
+                width={'100px'}
+                height={'100px'}
+                fit={'cover'}
+              />
+            ) : (
+              <StyledAvatar>
+                <Typography sx={{ color: 'blue', fontSize: '30px' }}>
+                  {data?.title[0].toUpperCase()}
+                </Typography>
+              </StyledAvatar>
+            )}
+            <StyledTextContainer>
+              <Typography variant="h5">{data?.title}</Typography>
+              <Typography variant="subtitle2">{data?.stream}</Typography>
+              <Typography variant="subtitle2">
+                {moment(data?.fromDate).format('DD MMM YYYY')} -{' '}
+                {moment(data?.toDate).format('DD MMM YYYY')}
+              </Typography>
+            </StyledTextContainer>
+          </Box>
+          <Box>
+            <DialogButton
+              key={data?.id}
+              title={'Edit Workshop'}
+              anchor={({ open }) => <EditButton onClick={open} />}
+              content={({ close }) => (
+                <WorkshopForm data={data} hideDialog={close} />
+              )}
+            />
+          </Box>
+        </StyledBox>
+      </Card>
+    </div>
+  )
+}
+
+export default WorkshopCard