DmitriyB
70 lines
2.5 KiB
TypeScript
70 lines
2.5 KiB
TypeScript
import React from "react";
|
|
import { ButtonContainer } from "./buttonContainer";
|
|
import './toolbar.css';
|
|
import { ToolbarButton } from "./toolbarButton";
|
|
import { BorderLine } from "./toolbarButtonContainerBorderLine";
|
|
|
|
type TProps = {
|
|
onClickOpenButton: () => void
|
|
isOpen: boolean
|
|
}
|
|
|
|
export const Toolbar:React.FC<TProps> = React.memo((props) => {
|
|
return <div className={`toolbar-container ${props.isOpen ? 'opened' : 'closed'}`}>
|
|
<div className="toolbar-field">
|
|
<div className="toolbar-field-part">
|
|
<ToolbarButton
|
|
type="fullscreen"
|
|
onClick={() => null}
|
|
/>
|
|
<ButtonContainer
|
|
buttons={[
|
|
{
|
|
type: "admin",
|
|
onClick: () => console.log('click'),
|
|
},
|
|
{
|
|
type: "self",
|
|
onClick: () => console.log('click')
|
|
},
|
|
{
|
|
type: "guest",
|
|
onClick: () => console.log('click')
|
|
},
|
|
{
|
|
type: "guest",
|
|
onClick: () => console.log('click'),
|
|
isNotification: true
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
<div className="toolbar-field-part">
|
|
<ButtonContainer
|
|
buttons={[
|
|
{
|
|
type: "control",
|
|
onClick: () => console.log('click')
|
|
},
|
|
{
|
|
type: "micro",
|
|
onClick: () => console.log('click')
|
|
}
|
|
]}
|
|
/>
|
|
<ToolbarButton
|
|
type="share"
|
|
onClick={() => console.log('click')}
|
|
/>
|
|
<BorderLine />
|
|
<ToolbarButton
|
|
type="exit"
|
|
onClick={() => null}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<button className='toolbar-open-button' onClick={() => props.onClickOpenButton()}>
|
|
<span className="toolbar-open-button-icon"></span>
|
|
</button>
|
|
</div>
|
|
}) |