Added UI, completed songsList

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+steps.txt

src/App.js

@@ -1,11 +1,43 @@
+import { useEffect } from 'react';
+import React, { useState } from 'react';
 import MainScreen from './views/screens/MainScreen';
+import MainScreenPortrait from './views/screens/MainScreenPortrait';
+
+function _debounce(fn, ms) {
+  let timer;
+  return _ => {
+    clearTimeout(timer);
+    timer = setTimeout((_) => {
+      timer = null;
+      fn.apply(this, arguments)
+    }, ms);
+  }
+}
 
 function App() {
+  const [dimension, setDimensions] = useState({
+    height: window.innerHeight,
+    width: window.innerWidth,
+  });
+
+  useEffect(() => {
+    const debouncedHandleResize = _debounce(function handleRezise() {
+      setDimensions({
+        height: window.innerHeight,
+        width: window.innerWidth,
+      })
+    })
+    window.addEventListener('resize', debouncedHandleResize);
+
+    return (_) => {
+      window.removeEventListener('resize', debouncedHandleResize);
+    }
+  });
+
   return (
-    <div className='App'>
-      <MainScreen />
+    <div className='App' id='App'>
+      {dimension.height > dimension.width ? <MainScreenPortrait /> : <MainScreen />}
     </div>
-
   );
 }
 

src/index.css

@@ -18,9 +18,14 @@ body {
 
 .mainScreenLayout {
     display: flex;
+    flex-direction: row;
     margin-top: 0;
 }
 
+.mainScreenLayoutPortrait {
+    flex-direction: column;
+}
+
 .playlistSection {
     height: 400px;
     width: 50%;

src/index.js

@@ -5,6 +5,7 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
+
 root.render(
   <React.StrictMode>
     <App />