Merged PR 203: Improve responsive design and refactor layout

src/Components/Settings/Settings.tsx

@@ -0,0 +1,31 @@
+import { ArrowUpOnSquareIcon, CameraIcon } from '@heroicons/react/24/outline';
+import React from 'react';
+
+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='Export as JSON'
+        onClick={props.saveEditorAsJSON}
+      >
+        <ArrowUpOnSquareIcon className="heroicon w-16 h-7" />
+        Export as JSON
+      </button>
+      <button type="button"
+        className={'w-full transition-all flex sidebar-component'}
+        title='Export as SVG'
+        onClick={props.saveEditorAsSVG}
+      >
+        <CameraIcon className="heroicon w-16 h-7" />
+        Export as SVG
+      </button>
+    </div>
+  );
+}