cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-09-01 04:19:12 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

make components reusable

Browse Source
This commit is contained in:
cv
2021-06-11 11:17:29 +02:00
parent 9f896fe440
commit 8221c72629
3 changed files with 70 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/features/info/Info.jsx
+7 -73
View File
@@ -1,82 +1,16 @@
import { Icon } from '@chakra-ui/react';
import { FiChevronUp } from 'react-icons/fi';
import style from './Info.module.css'; import style from './Info.module.css';
import InfoTitle from './InfoTitle';
import InfoLogger from './InfoLogger';
export default function Info() { export default function Info() {
const data = {};
const logData = [];
return ( return (
<> <>
<div className={style.main}>Event 1/31</div> <div className={style.main}>Event 1/31</div>
<InfoTitle title={'Now'} data={data} />
<div className={style.container}> <InfoTitle title={'Next'} data={data} />
<div className={style.header}> <InfoLogger logData={logData} />
Now
<Icon
className={style.moreExpanded}
as={FiChevronUp}
marginTop='-0.5em'
// onClick={() => props.setCollapsed(true)}
/>
</div>
<div>
<span className={style.label}>Title: </span>Demo title
</div>
<div>
<span className={style.label}>Subtitle: </span>Demo Subtitle
</div>
<div>
<span className={style.label}>Presenter: </span>Demo Presenter Name
</div>
<div>
<span className={style.label}>Notes: </span>Demo Notes
</div>
</div>
<div className={style.container}>
<div className={style.header}>
Next
<Icon
className={style.moreExpanded}
as={FiChevronUp}
marginTop='-0.5em'
// onClick={() => props.setCollapsed(true)}
/>
</div>
<div>
<span className={style.label}>Title: </span>Demo title
</div>
<div>
<span className={style.label}>Subtitle: </span>Demo Subtitle
</div>
<div>
<span className={style.label}>Presenter: </span>Demo Presenter Name
</div>
<div>
<span className={style.label}>Notes: </span>Demo Notes
</div>
</div>
<div className={style.container}>
<div className={style.header}>
Log
<Icon
className={style.moreCollapsed}
as={FiChevronUp}
marginTop='-0.5em'
// onClick={() => props.setCollapsed(true)}
/>
</div>
<ul className={style.log}>
<li className={style.info}>10:35:23 [PLAYBACK] Next</li>
<li className={style.client}>
10:32:10 [CLIENT] New Socket client (Total now 3)
</li>
<li className={style.info}>10:28:23 [PLAYBACK] Next</li>
<li className={style.info}>10:25:23 [PLAYBACK] Play</li>
<li className={style.info}>10:23:13 [SERVER] Server Reconnected</li>
<li className={style.error}>10:23:10 [SERVER] Server Disconnected</li>
</ul>
</div>
</> </>
); );
} }
client/src/features/info/InfoLogger.jsx
+30
View File
@@ -0,0 +1,30 @@
import { Icon } from '@chakra-ui/react';
import { FiChevronUp } from 'react-icons/fi';
import style from './Info.module.css';
export default function InfoLogger(props) {
const { logData } = props;
return (
<div className={style.container}>
<div className={style.header}>
Log
<Icon
className={style.moreCollapsed}
as={FiChevronUp}
marginTop='-0.5em'
// onClick={() => props.setCollapsed(true)}
/>
</div>
<ul className={style.log}>
<li className={style.info}>10:35:23 [PLAYBACK] Next</li>
<li className={style.client}>
10:32:10 [CLIENT] New Socket client (Total now 3)
</li>
<li className={style.info}>10:28:23 [PLAYBACK] Next</li>
<li className={style.info}>10:25:23 [PLAYBACK] Play</li>
<li className={style.info}>10:23:13 [SERVER] Server Reconnected</li>
<li className={style.error}>10:23:10 [SERVER] Server Disconnected</li>
</ul>
</div>
);
}
client/src/features/info/InfoTitle.jsx
+33
View File
@@ -0,0 +1,33 @@
import { Icon } from '@chakra-ui/react';
import { FiChevronUp } from 'react-icons/fi';
import style from './Info.module.css';
export default function InfoTitle(props) {
const { title, data } = props;
return (
<div className={style.container}>
<div className={style.header}>
{title}
<Icon
className={style.moreExpanded}
as={FiChevronUp}
marginTop='-0.5em'
// onClick={() => props.setCollapsed(true)}
/>
</div>
<div>
<span className={style.label}>Title: </span>Demo title
</div>
<div>
<span className={style.label}>Subtitle: </span>Demo Subtitle
</div>
<div>
<span className={style.label}>Presenter: </span>Demo Presenter Name
</div>
<div>
<span className={style.label}>Notes: </span>Demo Notes
</div>
</div>
);
}