107 lines
3.1 KiB
TypeScript
107 lines
3.1 KiB
TypeScript
|
import { clsx } from 'clsx'
|
||
|
|
import { Button } from '../../_shared/Button'
|
||
|
|
import { Icon } from '../../_shared/Icon'
|
||
|
|
import { useLocalize } from '../../../context/localize'
|
||
|
|
import styles from './Panel.module.scss'
|
||
|
|
import { useEditorContext } from '../../../context/editor'
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
// isVisible: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
export const Panel = (props: Props) => {
|
||
|
|
const { t } = useLocalize()
|
||
|
|
const {
|
||
|
|
isEditorPanelVisible,
|
||
|
|
wordCounter,
|
||
|
|
actions: { toggleEditorPanel }
|
||
|
|
} = useEditorContext()
|
||
|
|
|
||
|
|
return (
|
||
|
|
<aside class={clsx('col-md-6', styles.Panel, { [styles.hidden]: !isEditorPanelVisible() })}>
|
||
|
|
<div class={styles.actionsHolder}>
|
||
|
|
<Button
|
||
|
|
value={<Icon name="close" />}
|
||
|
|
variant={'inline'}
|
||
|
|
class={styles.close}
|
||
|
|
onClick={() => toggleEditorPanel()}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class={clsx(styles.actionsHolder, styles.scrolled)}>
|
||
|
|
<section>
|
||
|
|
<Button value={t('Publish')} variant={'inline'} class={styles.button} />
|
||
|
|
<Button value={t('Save draft')} variant={'inline'} class={styles.button} />
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<Button
|
||
|
|
value={
|
||
|
|
<>
|
||
|
|
<Icon name="eye" class={styles.icon} />
|
||
|
|
{t('Preview')}
|
||
|
|
</>
|
||
|
|
}
|
||
|
|
variant={'inline'}
|
||
|
|
class={clsx(styles.button, styles.buttonWithIcon)}
|
||
|
|
/>
|
||
|
|
<Button
|
||
|
|
value={
|
||
|
|
<>
|
||
|
|
<Icon name="pencil-outline" class={styles.icon} />
|
||
|
|
{t('Editing')}
|
||
|
|
</>
|
||
|
|
}
|
||
|
|
variant={'inline'}
|
||
|
|
class={clsx(styles.button, styles.buttonWithIcon)}
|
||
|
|
/>
|
||
|
|
<Button
|
||
|
|
value={
|
||
|
|
<>
|
||
|
|
<Icon name="feed-discussion" class={styles.icon} />
|
||
|
|
{t('FAQ')}
|
||
|
|
</>
|
||
|
|
}
|
||
|
|
variant={'inline'}
|
||
|
|
class={clsx(styles.button, styles.buttonWithIcon)}
|
||
|
|
/>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<Button value={t('Invite co-authors')} variant={'inline'} class={styles.button} />
|
||
|
|
<Button value={t('Publication settings')} variant={'inline'} class={styles.button} />
|
||
|
|
<Button value={t('Corrections history')} variant={'inline'} class={styles.button} />
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<p>
|
||
|
|
<a href="/how-to-write-a-good-article">{t('How to write a good article')}</a>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<a href="#">{t('Hotkeys')}</a>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<a href="#">{t('Help')}</a>
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class={styles.stats}>
|
||
|
|
<div>
|
||
|
|
{t('Characters')}: <em>{wordCounter().characters}</em>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
{t('Words')}: <em>{wordCounter().words}</em>
|
||
|
|
</div>
|
||
|
|
<Show when={wordCounter().paragraphs}>
|
||
|
|
<div>
|
||
|
|
{t('Paragraphs')}: <em>{wordCounter().paragraphs}</em>
|
||
|
|
</div>
|
||
|
|
</Show>
|
||
|
|
<div>
|
||
|
|
{t('Last rev.')}: <em>22.03.22 в 18:20</em>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
)
|
||
|
|
}
|