Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added more documentation

Browse source
This commit is contained in:
Eric NGUYEN 2022-09-22 17:45:35 +02:00
parent 74debbf90c
commit e5e9f7f7c0
9 changed files with 1049 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/Components/Bar/Bar.tsx
View file

@ -1,5 +1,6 @@
import { ClockIcon, CubeIcon, LinkIcon, MailIcon } from '@heroicons/react/outline';
import * as React from 'react';
import { ClockIcon, CubeIcon, LinkIcon, MailIcon } from '@heroicons/react/outline';
import { ClockIcon as ClockIconS, CubeIcon as CubeIconS, LinkIcon as LinkIconS, MailIcon as MailIconS } from '@heroicons/react/solid';
import { BarIcon } from './BarIcon';
interface IBarProps {
@ -12,6 +13,7 @@ interface IBarProps {
toggleSymbols: () => void
toggleTimeline: () => void
toggleMessages: () => void
goHome: () => void
}
export const BAR_WIDTH = 64; // 4rem
@ -23,25 +25,41 @@ export function Bar(props: IBarProps): JSX.Element {
isActive={props.isSidebarOpen}
title='Components'
onClick={() => props.toggleSidebar()}>
<CubeIcon className='heroicon' />
{
props.isSidebarOpen
? <CubeIconS className='heroicon' />
: <CubeIcon className='heroicon' />
}
</BarIcon>
<BarIcon
isActive={props.isSymbolsOpen}
title='Symbols'
onClick={() => props.toggleSymbols()}>
<LinkIcon className='heroicon' />
{
props.isSymbolsOpen
? <LinkIconS className='heroicon' />
: <LinkIcon className='heroicon' />
}
</BarIcon>
<BarIcon
isActive={props.isHistoryOpen}
title='Timeline'
onClick={() => props.toggleTimeline()}>
<ClockIcon className='heroicon' />
{
props.isHistoryOpen
? <ClockIconS className='heroicon' />
: <ClockIcon className='heroicon' />
}
</BarIcon>
<BarIcon
isActive={props.isMessagesOpen}
title='Messages'
onClick={() => props.toggleMessages()}>
<MailIcon className='heroicon' />
{
props.isMessagesOpen
? <MailIconS className='heroicon' />
: <MailIcon className='heroicon' />
}
</BarIcon>
</div>
);