diff --git a/.eslintrc.js b/.eslintrc.js
index 6314368afa71aab6d1bc2e9b29ae1a47d14c58d5..db23e77c14f01ca7f0650be965aca69675c1d07e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -18,5 +18,6 @@ module.exports = {
'object-curly-newline': 0,
'implicit-arrow-linebreak': 0,
'react/prop-types': 0,
+ 'react/jsx-wrap-multilines': ['error', { arrow: true, return: true, declaration: true }],
},
};
diff --git a/package-lock.json b/package-lock.json
index 5254bb45302fce0a77597033336b26c0f9580076..24a38915ebd687ca4de4d83b630961752a8eabae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2081,6 +2081,11 @@
"integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
"dev": true
},
+ "@types/lodash": {
+ "version": "4.14.168",
+ "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.168.tgz",
+ "integrity": "sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q=="
+ },
"@types/minimatch": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
diff --git a/package.json b/package.json
index f0269bcdeaccb8b89b7e645852b2e6ae473d8b70..8b71ca04852516e38e9d43e5f2383ea0b108befd 100644
--- a/package.json
+++ b/package.json
@@ -47,8 +47,10 @@
"dependencies": {
"@material-ui/core": "^4.11.2",
"@material-ui/icons": "^4.11.2",
+ "@types/lodash": "^4.14.168",
"axios": "^0.21.1",
"http-proxy-middleware": "^1.0.6",
+ "lodash": "^4.17.20",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-hook-form": "^6.14.2",
diff --git a/public/index.html b/public/index.html
index 678cb12482ad593ac63c85a3206165b84545d348..43547803880d14b76501ae8b2a14c4c36c9fe9e1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,6 +12,11 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+ <link
+ rel="stylesheet"
+ href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+ />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/Routes.tsx b/src/Routes.tsx
index d11cc5a1c8fa2dfad2f9f9b6dafee1d2d54aae3e..7059c3bff0520d3d6df187e6646c9f2cfb68284b 100644
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@@ -1,16 +1,19 @@
import React from 'react';
-import { Route, Switch } from 'react-router';
-import ProfileButton from './components/ProfileButton';
+import { Redirect, Route, Switch } from 'react-router';
import NewsPage from './pages/NewsPage';
+import RulesPage from './pages/RulesPage';
const Routes: React.FC = () => (
<Switch>
<Route path="/" exact>
- <ProfileButton />
+ <Redirect to="/news" />
</Route>
<Route path="/news">
<NewsPage />
</Route>
+ <Route path="/rules">
+ <RulesPage />
+ </Route>
</Switch>
);
diff --git a/src/components/DrawerMenu.tsx b/src/components/DrawerMenu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5fe4920a51762ffa94d50447f6c57ade958ed796
--- /dev/null
+++ b/src/components/DrawerMenu.tsx
@@ -0,0 +1,62 @@
+import { Divider, Drawer, Grid, List, ListItem, ListItemText, makeStyles } from '@material-ui/core';
+import React from 'react';
+import SCHBodyIcon from '../svg/SCHBodyIcon';
+import { MENU_ITEMS } from './Header';
+import WrapperLink from './WrapperLink';
+
+type DrawerMenuProps = {
+ open: boolean;
+ toggleOpen: () => void;
+ handleLogout: () => void;
+};
+
+const useStyles = makeStyles((theme) => ({
+ item: {
+ textAlign: 'center',
+ fontWeight: 500,
+ color: theme.palette.secondary.main,
+ '&:hover': {
+ color: theme.palette.text.primary,
+ backgroundColor: theme.palette.grey[700],
+ },
+ },
+ grid: {
+ marginTop: `${theme.spacing(2)}px`,
+ marginBottom: `${theme.spacing(2)}px`,
+ },
+ list: {
+ minWidth: '250px',
+ },
+}));
+
+const DrawerMenu: React.FC<DrawerMenuProps> = ({ open, toggleOpen, handleLogout }) => {
+ const classes = useStyles();
+ return (
+ <Drawer anchor="left" open={open} onClose={toggleOpen}>
+ <div className={classes.list}>
+ <Grid className={classes.grid} container justify="center">
+ <div>
+ <SCHBodyIcon width="64px" height="48px" />
+ </div>
+ </Grid>
+ <List>
+ {MENU_ITEMS.map((item) => (
+ <WrapperLink key={item.id} to={item.redirectTo}>
+ <ListItem className={classes.item}>
+ <ListItemText>{item.title}</ListItemText>
+ </ListItem>
+ </WrapperLink>
+ ))}
+ </List>
+ <Divider />
+ <List>
+ <ListItem className={classes.item} button onClick={handleLogout}>
+ <ListItemText>Kijelentkezés</ListItemText>
+ </ListItem>
+ </List>
+ </div>
+ </Drawer>
+ );
+};
+
+export default DrawerMenu;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 191c5bc6b9fed4543f0ddc9d4ad8bebb29f839fa..fccb5b18fab9e0c8802d88738f508a25dd4a6ffa 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,85 +1,126 @@
import {
AppBar,
+ Badge,
+ Box,
Button,
Grid,
+ IconButton,
makeStyles,
Tab,
Tabs,
Toolbar,
Typography,
} from '@material-ui/core';
+import { ExitToApp, MailOutline, Report } from '@material-ui/icons';
+import { isNil } from 'lodash';
import React, { useState } from 'react';
import { useHistory } from 'react-router';
+import { useUserContext } from '../hooks/useUserContext';
+import SCHBodyIcon from '../svg/SCHBodyIcon';
-interface AppBarMenuItem {
+export interface AppBarMenuItem {
id: number;
title: string;
redirectTo: string;
}
-const MENU_ITEMS: AppBarMenuItem[] = [
+export const MENU_ITEMS: AppBarMenuItem[] = [
{
id: 0,
- title: 'News',
+ title: 'Hírek',
redirectTo: '/news',
},
{
id: 1,
- title: 'About',
+ title: 'Rólunk',
redirectTo: '/about',
},
{
id: 2,
- title: 'FAQ',
- redirectTo: '/faq',
+ title: 'Házirend',
+ redirectTo: '/rules',
+ },
+];
+
+const USER_MENU_ITEMS: AppBarMenuItem[] = [
+ {
+ id: 3,
+ title: 'Időszakok',
+ redirectTo: '/terms',
+ },
+];
+
+const ADMIN_MENU_ITEMS: AppBarMenuItem[] = [
+ {
+ id: 4,
+ title: 'Felhasználók',
+ redirectTo: '/users',
},
];
const useStyles = makeStyles((theme) => ({
appBar: {
backgroundColor: theme.palette.primary.main,
- padding: theme.spacing(1),
+ },
+ tabContainer: {
+ flexGrow: 1,
+ height: '100%',
+ },
+ tabs: {
+ height: '100%',
+ marginRight: `${theme.spacing(1)}px`,
},
tab: {
color: theme.palette.secondary.main,
fontWeight: 600,
- padding: '0px',
+ minWidth: '0px',
},
indicator: {
+ height: '5px',
backgroundColor: theme.palette.secondary.main,
},
- navItem: {
- flex: 1,
- alignItems: 'center',
- '&:first-child': {
- marginRight: 'auto;',
- },
- '&:last-child': {
- marginRight: 'auto;',
- },
+ texts: {
+ flexShrink: 0,
+ marginRight: `${theme.spacing(1)}px`,
+ marginLeft: `${theme.spacing(1)}px`,
},
}));
-const Header: React.FC = () => {
+export type HeaderProps = {
+ customToolbar?: React.ReactElement;
+ menuItems?: AppBarMenuItem[];
+ handleLogout?: () => void;
+};
+
+const Header: React.FC<HeaderProps> = ({ customToolbar, handleLogout, menuItems = MENU_ITEMS }) => {
const classes = useStyles();
const history = useHistory();
+ const { profile } = useUserContext();
const [value, setValue] = useState(
- MENU_ITEMS.find((item) => history.location.pathname === item.redirectTo)?.id ?? 0,
+ menuItems.find((item) => history.location.pathname === item.redirectTo)?.id ?? 0,
);
return (
<AppBar className={classes.appBar} position="static">
- <Toolbar>
- <Grid container>
- <Grid className={classes.navItem} item container justify="flex-start">
+ {customToolbar !== undefined ? (
+ customToolbar
+ ) : (
+ <Toolbar>
+ <div>
+ <SCHBodyIcon width="64px" height="48px" />
+ </div>
+
+ <Grid item className={classes.tabContainer} container justify="flex-end">
<Tabs
+ className={classes.tabs}
+ classes={{ flexContainer: classes.tabs }}
value={value}
onChange={(event, val): void => {
setValue(val);
}}
TabIndicatorProps={{ className: classes.indicator }}
>
- {MENU_ITEMS.map((item) => (
+ {menuItems.map((item) => (
<Tab
key={item.id}
className={classes.tab}
@@ -89,18 +130,70 @@ const Header: React.FC = () => {
}}
/>
))}
+ {!isNil(profile) && (
+ <>
+ {USER_MENU_ITEMS.map((item) => (
+ <Tab
+ key={item.id}
+ className={classes.tab}
+ label={item.title}
+ onClick={(): void => {
+ history.push(item.redirectTo);
+ }}
+ />
+ ))}
+
+ {profile.role === 'ADMIN' && (
+ <>
+ {ADMIN_MENU_ITEMS.map((item) => (
+ <Tab
+ key={item.id}
+ className={classes.tab}
+ label={item.title}
+ onClick={(): void => {
+ history.push(item.redirectTo);
+ }}
+ />
+ ))}
+ </>
+ )}
+ </>
+ )}
</Tabs>
</Grid>
- <Grid className={classes.navItem} item container justify="center">
- <Typography variant="h4">SCH-BODY</Typography>
- </Grid>
- <Grid className={classes.navItem} item container justify="flex-end">
+
+ {!isNil(profile) ? (
+ <>
+ <IconButton size="medium">
+ <Badge
+ badgeContent={profile.notices.filter((item) => !item.isSeen).length}
+ color="error"
+ >
+ <MailOutline style={{ color: 'white' }} />
+ </Badge>
+ </IconButton>
+
+ {profile.warnings.length > 0 && (
+ <IconButton size="medium" disableRipple>
+ <Report color="error" />
+ </IconButton>
+ )}
+ <Typography variant="h6" align="center" className={classes.texts}>
+ {profile.name}
+ </Typography>
+ <Box color="secondary.main">
+ <IconButton color="inherit" size="medium" onClick={handleLogout}>
+ <ExitToApp />
+ </IconButton>
+ </Box>
+ </>
+ ) : (
<Button color="secondary" variant="contained">
- Login
+ Belépés
</Button>
- </Grid>
- </Grid>
- </Toolbar>
+ )}
+ </Toolbar>
+ )}
</AppBar>
);
};
diff --git a/src/components/MobileHeader.tsx b/src/components/MobileHeader.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..76dee9a3cf6333bf20bd32d763184012e90472f2
--- /dev/null
+++ b/src/components/MobileHeader.tsx
@@ -0,0 +1,30 @@
+import { IconButton, Toolbar } from '@material-ui/core';
+import { Menu as MenuIcon, Person } from '@material-ui/icons';
+import React from 'react';
+import SCHBodyIcon from '../svg/SCHBodyIcon';
+import Header, { HeaderProps } from './Header';
+
+export type MobileHeaderProps = HeaderProps & {
+ onMenuClick: () => void;
+};
+
+const MobileHeader: React.FC<MobileHeaderProps> = ({ onMenuClick }) => {
+ return (
+ <Header
+ customToolbar={
+ <Toolbar>
+ <IconButton edge="start" color="inherit" aria-label="menu" onClick={onMenuClick}>
+ <MenuIcon />
+ </IconButton>
+ <div style={{ flexGrow: 1 }}>
+ <SCHBodyIcon width="64px" height="48px" />
+ </div>
+ {/* TODO: Profile image if present */}
+ <Person />
+ </Toolbar>
+ }
+ />
+ );
+};
+
+export default MobileHeader;
diff --git a/src/components/WrapperLink.tsx b/src/components/WrapperLink.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..99e9d2fb1cb1cbc7db5d428e7583731a7b315133
--- /dev/null
+++ b/src/components/WrapperLink.tsx
@@ -0,0 +1,20 @@
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+// Link component with removed underline style
+// For wrap components, which needs navigation
+
+const WrapperLink = styled(Link)`
+ text-decoration: none;
+
+ &:focus,
+ &:hover,
+ &:visited,
+ &:link,
+ &:active {
+ text-decoration: none;
+ color: inherit;
+ }
+`;
+
+export default WrapperLink;
diff --git a/src/context/UserContext.tsx b/src/context/UserContext.tsx
index 6dbe3ef4ed5241ff2d06c7fac61b90dd2b54c403..e05fe777084579ce0c6318cc70b19cdbff831ca8 100644
--- a/src/context/UserContext.tsx
+++ b/src/context/UserContext.tsx
@@ -1,29 +1,32 @@
import React, { createContext, useState } from 'react';
import { IProfile, Role } from '../types/Profile';
-interface ContextProps {
- profile: IProfile;
+export interface UserContextType {
+ profile: IProfile | undefined;
setProfile: (profile: IProfile) => void;
}
// Context
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
const initialState: IProfile = {
externalId: 'abcd',
studentCardNumber: '1234',
roomNumber: 104,
- role: Role.User,
+ role: Role.Admin,
email: 'alma@gmail.com',
name: 'Nagy Gizike',
warnings: [],
- notices: [],
+ notices: [{ _id: '123', text: 'Asd', isSeen: false }],
};
-export const userContext = createContext({} as ContextProps);
-const { Provider } = userContext;
+
+export const UserContext = createContext({} as UserContextType);
+
+const { Provider } = UserContext;
export const UserStateProvider: React.FC = ({ children }) => {
- const [profile, setProfile] = useState<IProfile>(initialState);
+ const [profile, setProfile] = useState<IProfile | undefined>(initialState);
return <Provider value={{ profile, setProfile }}>{children}</Provider>;
};
-export default { userContext, UserStateProvider };
+export default { UserContext, UserStateProvider };
diff --git a/src/hooks/useToggle.ts b/src/hooks/useToggle.ts
new file mode 100644
index 0000000000000000000000000000000000000000..89eec270f3c3b0e817429cd99573917e7bbeaa98
--- /dev/null
+++ b/src/hooks/useToggle.ts
@@ -0,0 +1,19 @@
+import { useRef, useState } from 'react';
+
+// eslint-disable-next-line import/prefer-default-export
+export function useToggle(
+ defaultState = false,
+): [boolean, { toggleOn: () => void; toggleOff: () => void; toggle: () => void }] {
+ const [state, setState] = useState(defaultState);
+ const toggleOn = useRef(() => setState(true));
+ const toggleOff = useRef(() => setState(false));
+ const toggle = useRef(() => setState((s) => !s));
+ return [
+ state,
+ {
+ toggleOn: toggleOn.current,
+ toggleOff: toggleOff.current,
+ toggle: toggle.current,
+ },
+ ];
+}
diff --git a/src/hooks/useUserContext.ts b/src/hooks/useUserContext.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6813b61a8972fdcc93b534c189569ba390b8b9e7
--- /dev/null
+++ b/src/hooks/useUserContext.ts
@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { UserContext, UserContextType } from '../context';
+
+// eslint-disable-next-line import/prefer-default-export
+export function useUserContext(): UserContextType {
+ const userContext = useContext(UserContext);
+ if (!userContext) {
+ throw new Error('You must use `UserContextProvider` to access the `IntervalContext`.');
+ }
+ return userContext;
+}
diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
index 9e4880632792fae9d33e5575cca99e7e5df298a2..c0e23b076a7b286fac1f120201c1aebd7a3dd1b5 100644
--- a/src/pages/Page.tsx
+++ b/src/pages/Page.tsx
@@ -1,7 +1,10 @@
-import { Box, makeStyles } from '@material-ui/core';
+import { Box, makeStyles, Theme, useMediaQuery } from '@material-ui/core';
import React from 'react';
+import DrawerMenu from '../components/DrawerMenu';
import Footer from '../components/Footer';
import Header from '../components/Header';
+import MobileHeader from '../components/MobileHeader';
+import { useToggle } from '../hooks/useToggle';
const useStyles = makeStyles((theme) => ({
root: {
@@ -13,11 +16,20 @@ const useStyles = makeStyles((theme) => ({
}));
const Page: React.FC = ({ children }) => {
+ const [openDrawer, { toggleOn, toggleOff }] = useToggle(false);
+ const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('xs'));
const classes = useStyles();
return (
<Box className={classes.root}>
- <Header />
+ {isMobile ? (
+ <MobileHeader onMenuClick={toggleOn} />
+ ) : (
+ <Header handleLogout={(): void => {}} />
+ )}
+ {isMobile && (
+ <DrawerMenu open={openDrawer} toggleOpen={toggleOff} handleLogout={(): void => {}} />
+ )}
<Box flexGrow={1} flexShrink={0} flexBasis="auto">
{children}
</Box>
diff --git a/src/pages/RulesPage.tsx b/src/pages/RulesPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fd06edd9be9660a64dc2d862f540451e44ede44d
--- /dev/null
+++ b/src/pages/RulesPage.tsx
@@ -0,0 +1,77 @@
+import { Box, Container, Divider, List, ListItem, makeStyles, Typography } from '@material-ui/core';
+import React from 'react';
+import Page from './Page';
+
+const useStyles = makeStyles((theme) => ({
+ title: {
+ marginTop: 30,
+ marginBottom: 30,
+ fontSize: '36px',
+ color: theme.palette.primary.contrastText,
+ },
+ container: {
+ color: theme.palette.primary.contrastText,
+ backgroundColor: theme.palette.background.paper,
+ margin: theme.spacing(2),
+ padding: theme.spacing(1),
+ },
+ text: {
+ fontSize: '18px',
+ },
+}));
+
+const RulesPage: React.FC = () => {
+ const classes = useStyles();
+
+ return (
+ <Page>
+ <Container>
+ <Typography className={classes.title} align="center">
+ Házirend
+ </Typography>
+ <List className={classes.container}>
+ <ListItem divider>
+ <Typography className={classes.text}>
+ Mindenki a saját testi épségéért felelős! Alkohol vagy drog hatása alatt a teremben
+ tartózkodni, edzeni tilos!
+ </Typography>
+ </ListItem>
+ <ListItem>
+ <Typography className={classes.text}>
+ A konditerem csak érvényes
+ <Box component="span" fontWeight="fontWeightBold" px={1}>
+ BELÉPŐVEL
+ </Box>
+ és megfelelő
+ <Box component="span" fontWeight="fontWeightBold" pl={1}>
+ TISZTA CIPŐBEN, ALSÓ- ÉS FELSŐRUHÁZATBAN HASZNÁLHATÓ
+ </Box>
+ ! A félmeztelen edzés tilos! A kondi belépőnek az edzés ideje alatt végig nálad kell
+ lennie a teremben!
+ </Typography>
+ </ListItem>
+ <Divider />
+ <ListItem>
+ <Typography className={classes.text}>
+ A teremben higiéniai okok miatt mindenkinek saját, megfelelő méretű
+ <Box component="span" fontWeight="fontWeightBold" pl={1}>
+ TÖRÖLKÖZŐ HASZNÁLATA KÖTELEZŐ
+ </Box>
+ ! Csak a kardió részleg használata esetén is kell törölköző!
+ </Typography>
+ </ListItem>
+ <Divider />
+ <ListItem>
+ <Typography className={classes.text}>
+ A terem csak tiszta, zárt, gumitalpú cipőben használható! Mezítlábas, zoknis és
+ papucsos edzés tilos! A terembe utcai cipőben belépni tilos! Aki megfelelő ruházat
+ nélkül edz, az edzés azonnali megszakítására, és a terem elhagyására kötelezhető.
+ </Typography>
+ </ListItem>
+ </List>
+ </Container>
+ </Page>
+ );
+};
+
+export default RulesPage;
diff --git a/src/styles/darkTheme.ts b/src/styles/darkTheme.ts
index be08ab4c858e9c0d12bbf296140746f30f03fa3d..719abe9478baa6319bb395fdcc517b8f922cecd5 100644
--- a/src/styles/darkTheme.ts
+++ b/src/styles/darkTheme.ts
@@ -21,6 +21,7 @@ const darkTheme = createMuiTheme({
paper: '#202020',
},
+ divider: '#444444',
/* success: {},
info: {},
warning: {}, */
diff --git a/src/svg/SCHBodyIcon.tsx b/src/svg/SCHBodyIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3289d74d2d62b63d31a79d44ef544c27c169a00d
--- /dev/null
+++ b/src/svg/SCHBodyIcon.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+interface ISCHBodyIconProps extends React.SVGProps<SVGSVGElement> {
+ color?: string;
+}
+
+const SCHBodyIcon: React.FC<ISCHBodyIconProps> = ({
+ height = '24px',
+ width = '24px',
+ color = '#FFFFFF',
+ ...props
+}) => {
+ return (
+ <svg
+ width={width}
+ height={height}
+ viewBox="0 0 103 45"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ {...props}
+ >
+ <g clipPath="url(#clip0)">
+ <path
+ d="M7.19328 0.249505C7.04203 0.387624 6.3703 1.01139 5.69858 1.6396C5.02685 2.26782 4.15938 3.07871 3.76791 3.4396C3.38089 3.80049 2.80703 4.33515 2.49563 4.62475C2.18423 4.91881 1.49916 5.55594 0.969781 6.04604C0.903053 6.10396 0.582758 6.39802 0.00444854 6.93267L0.0266912 11.2678L0.0489339 15.6074C6.59273 15.6208 10.2316 15.6252 10.9612 15.6297C16.9623 15.6386 21.8868 15.6653 21.9046 15.6832C21.9224 15.701 21.5398 16.0842 21.0505 16.5342C20.9926 16.5876 20.6946 16.8594 20.1652 17.3495H10.0804H0V20.7936V24.2332C7.82053 24.2332 12.1623 24.2332 13.0298 24.2332C20.2008 24.2332 26.0773 24.202 26.0951 24.1619C26.1129 24.1262 26.4866 23.7564 26.927 23.3421C27.3674 22.9322 28.0881 22.2549 28.5285 21.8361C29.5071 20.9094 31.6069 18.9579 32.59 18.0579C32.6345 18.0134 32.8747 17.795 33.3106 17.3985L33.3195 13.0366L33.3284 8.67475L22.3361 8.6703L11.3438 8.66584L12.2379 7.82376L13.1321 6.98168H23.2303L33.3284 6.97723V3.48861V0H20.3965H7.46464L7.19328 0.249505ZM42.1321 0.436634C41.4604 1.05594 40.6418 1.82228 39.8233 2.58861C39.4363 2.95842 38.5911 3.74257 37.946 4.3396C37.301 4.93663 36.3979 5.77871 35.9442 6.21535C35.8908 6.26881 35.615 6.53168 35.1167 7.00841V12.1678V17.3272C35.4726 17.6525 35.6684 17.8351 35.704 17.8708C37.688 19.7109 38.6355 20.5931 39.3028 21.2213C39.721 21.6134 40.2904 22.1436 40.5706 22.402C40.8509 22.6559 41.4025 23.1728 41.794 23.547C41.8429 23.5916 42.0787 23.8188 42.5058 24.2287L55.4777 24.2332H68.4452V20.7936V17.3495H58.3959H48.3467C48.1109 17.1356 47.9819 17.0198 47.9552 16.9975C47.7372 16.8015 46.8609 15.9906 46.0023 15.1931C45.8955 15.095 45.3751 14.6094 44.4364 13.7406V12.1634V10.5817C45.1882 9.88218 45.6019 9.49455 45.6865 9.41881C46.3715 8.77723 47.2346 7.96634 47.5993 7.61436C47.6438 7.5698 47.8662 7.3604 48.2666 6.97723H58.3559H68.4452V3.48861V0L55.5266 0.00445544H42.6036L42.1321 0.436634ZM70.3314 12.1188V24.2332H74.9445H79.5576V19.9426V15.652H86.9466H94.3357V19.9693V24.2822L98.9977 24.2554L103.66 24.2287L103.633 12.1411L103.611 0.0490099H98.9977H94.3846L94.3579 4.36188L94.3357 8.67475H86.9466H79.5576V4.3396V0H74.9445H70.3314V12.1188ZM0 35.6926V45.3564H12.4292H24.854V41.8901V38.4282C24.0577 37.6262 23.6173 37.1851 23.5283 37.096C21.9624 35.5233 21.9491 35.853 23.6262 34.1911C23.7107 34.1109 24.12 33.7054 24.854 32.9748V29.4995V26.0243H12.4292H0V35.6926ZM28.9733 28.7955L26.2686 31.5356V35.7059V39.8807L29.0045 42.6163L31.7403 45.3564H38.68H45.6197L48.3734 42.5941L51.1226 39.8317V35.6926V31.549L48.3734 28.7866L45.6197 26.0243L38.6489 26.0421L31.6825 26.0554L28.9733 28.7955ZM52.4393 35.6926V45.3564H62.1149H71.7905L74.5441 42.5985L77.2978 39.8406V35.6881V31.5401L74.5397 28.7822L71.786 26.0243H62.1149H52.4393V35.6926ZM78.6145 30.15V34.2757L81.4127 37.0827L84.2108 39.8851H85.8834H87.5605V42.6208V45.3564H91.0437H94.527V42.6208V39.8851H96.2396H97.9568L100.71 37.1317L103.469 34.3738V30.199V26.0243H100.034H96.5955V28.6886V31.3574L95.1142 32.8411L93.6283 34.3247H91.0393H88.4502L87.0178 32.8856L85.5809 31.4465V28.7376V26.0243H82.0977H78.6145V30.15ZM16.2861 31.6559C16.2861 31.696 16.0236 31.9901 15.7033 32.3153C15.6633 32.3554 15.4676 32.5559 15.1161 32.9079H11.0413H6.96641V32.2485V31.5891C9.76454 31.5891 11.3171 31.5891 11.6285 31.5891C14.1908 31.5891 16.2861 31.6203 16.2861 31.6559ZM42.7193 33.0238L44.1562 34.4629V35.6881V36.9134L42.7193 38.3525L41.2869 39.7916H38.6489H36.0154L34.5785 38.3569L33.1416 36.9178V35.6926V34.4673L34.574 33.0282L36.0109 31.5891H38.6444H41.2824L42.7193 33.0238ZM68.9434 32.9792L70.3314 34.3738V35.6926V37.0069L68.9434 38.4015L67.5555 39.7916H63.4851H59.4102L59.388 35.6926L59.3613 31.5891H63.4584H67.5555L68.9434 32.9792ZM15.6989 39.0609C16.0236 39.3817 16.2861 39.6802 16.2861 39.7203C16.2861 39.7604 14.1908 39.7916 11.6285 39.7916C11.3171 39.7916 9.76454 39.7916 6.96641 39.7916V39.1322V38.4728H11.0368H15.1072L15.6989 39.0609Z"
+ fill={color}
+ />
+ </g>
+ <defs>
+ <clipPath id="clip0">
+ <rect width="102.761" height="45" fill="white" />
+ </clipPath>
+ </defs>
+ </svg>
+ );
+};
+
+export default SCHBodyIcon;