expand / collapse

This commit is contained in:
cv
2021-06-13 12:39:24 +02:00
parent df44d3fcbc
commit f066e974e6
4 changed files with 58 additions and 40 deletions
+18 -13
View File
@@ -1,30 +1,35 @@
import { Icon } from '@chakra-ui/react';
import { useState } from 'react';
import { FiChevronUp } from 'react-icons/fi';
import style from './Info.module.css';
export default function InfoLogger(props) {
const [collapsed, setCollapsed] = useState(false);
const { logData } = props;
return (
<div className={style.container}>
<div className={style.header}>
Log
<Icon
className={style.moreCollapsed}
className={collapsed ? style.moreCollapsed : style.moreExpanded}
as={FiChevronUp}
marginTop='-0.5em'
// onClick={() => props.setCollapsed(true)}
onClick={() => setCollapsed((c) => !c)}
/>
</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>
{!collapsed && (
<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: 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>
);
}