svg-layout-designer-react/src/Components/Settings/Settings.tsx
Eric Nguyen 505813d530 Merged PR 225: Implement translations
Implement translations with useContext in React
+Add events to allow changing the language in the app
+Refactor AppEvents
+Redesign vertical bars in elements
2022-11-04 10:58:06 +00:00

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>
);
}