Implement translations with useContext in React +Add events to allow changing the language in the app +Refactor AppEvents +Redesign vertical bars in elements
32 lines
1 KiB
TypeScript
32 lines
1 KiB
TypeScript
import { ArrowUpOnSquareIcon, CameraIcon } from '@heroicons/react/24/outline';
|
|
import React from 'react';
|
|
import { Text } from '../Text/Text';
|
|
|
|
interface ISettingsProps {
|
|
saveEditorAsJSON: () => void
|
|
saveEditorAsSVG: () => void
|
|
};
|
|
|
|
export function Settings(props: ISettingsProps): JSX.Element {
|
|
return (
|
|
<div className='transition-all grid grid-cols-1 overflow-auto md:grid-cols-1 gap-2
|
|
m-2 md:text-xs font-bold'>
|
|
<button type="button"
|
|
className={'w-full transition-all flex sidebar-component'}
|
|
title={Text({ textId: '@ExportAsJSON' })}
|
|
onClick={props.saveEditorAsJSON}
|
|
>
|
|
<ArrowUpOnSquareIcon className="heroicon w-16 h-7" />
|
|
{Text({ textId: '@ExportAsJSON' })}
|
|
</button>
|
|
<button type="button"
|
|
className={'w-full transition-all flex sidebar-component'}
|
|
title={Text({ textId: '@ExportAsSVG' })}
|
|
onClick={props.saveEditorAsSVG}
|
|
>
|
|
<CameraIcon className="heroicon w-16 h-7" />
|
|
{Text({ textId: '@ExportAsSVG' })}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|