Showcasing components on App.js

src/App.tsx

@@ -1,6 +1,57 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+import SwitchDemo from './components/Switch/SwitchDemo'
+import ButtonDemo from './components/Buttons/Button/ButtonDemo'
+import RadioDemo from './components/Radio/RadioDemo'
+import TabBarDemo from './components/TabBar/TabBarDemo'
+import CheckboxDemo from './components/Checkbox/CheckboxDemo'
+import LayerSidebar from './components/Layer/LayerSidebar/Demo'
+import TagDemo from './components/Tag/TagDemo'
+import InlineMessageDemo from './components/InlineMessage/InlineMessageDemo'
+import TextInputDemo from './components/TextInput/TextInputDemo'
+import TextareaDemo from './components/Textarea/TextareaDemo'
+import CloseButtonDemo from './components/Buttons/CloseButton/CloseButtonDemo'
+import IconButtonDemo from './components/Buttons/IconButton/IconButtonDemo'
+import SliderDemo from './components/Slider/SliderDemo'
+import QualitativeDemo from './components/Legend/QualitativeLegend/QualitativeLegendDemo'
+import LayerParametersDemo from './components/Legend/LayerParameters/LayerParametersDemo'
+import ScaleLegendDemo from './components/Legend/ScaleLegend/ScaleLegendDemo'
+import { LegendItemDemo } from './components/Legend/LegendItem/LegendItemDemo'
+import LegendPanelDemo from './components/Legend/LegendPanel/LegendPanelDemo'
+
 const App = () => (
   <div className='App'>
-    <h1>Welcome to WRI OS</h1>
+    <div className='app-container'>
+      <h1 style={{ marginBottom: '20px' }}>Welcome to WRI OS</h1>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'flex-start',
+          flexWrap: 'wrap',
+          gap: 25,
+        }}
+      >
+        <LegendPanelDemo />
+        <LegendItemDemo />
+        <ScaleLegendDemo />
+        <LayerParametersDemo />
+        <QualitativeDemo />
+        <SliderDemo />
+        <IconButtonDemo />
+        <CloseButtonDemo />
+        <TextInputDemo />
+        <TextareaDemo />
+        <InlineMessageDemo />
+        <TagDemo />
+        <CheckboxDemo />
+        <TabBarDemo />
+        <RadioDemo />
+        <ButtonDemo />
+        <SwitchDemo />
+      </div>
+
+      <LayerSidebar />
+    </div>
   </div>
 )
 

src/index.css

@@ -15,3 +15,14 @@ code {
 *:focus-visible {
   box-shadow: none !important;
 }
+
+.app-container {
+  margin-left: 364px;
+  transition: margin-left 0.1s;
+  padding: 20px;
+}
+
+.app-container.sidebar-closed {
+  margin-left: 64px;
+  transition: margin-left 0.1s;
+}