Create MainPage #6 #7

Intended to render everything that is visible no matter what page you are on. LandingPage or ArtPage

frontend/src/Components/App.css

+body {
+    margin: 0;
+    padding: 0;
+}
\ No newline at end of file

frontend/src/Components/App.tsx

 import React from 'react';
+import MainPage from './MainPage';
+import './App.css';
 
 const App = () => {
   return (
     <div className="App">
-      <div>Test</div>
+      <MainPage />
     </div>
   );
 };

frontend/src/Components/ArtPage.tsx

+import React from 'react';
+
+interface props {
+  pageId: number; // The id of the page
+}
+
+class ArtPage extends React.Component<props> {
+
+  constructor(props: props) {
+    super(props);
+  }
+
+
+  render() {
+    return <div>ArtPage</div>;
+  }
+}
+
+export default ArtPage;
\ No newline at end of file

frontend/src/Components/ExhibitionPiece.tsx

+import React from 'react';
+
+const ExhibitionPiece = () => {
+  return (
+    <div className={'exhibition-piece'}>
+      Exhib Piece
+    </div>
+  );
+};
+
+export default ExhibitionPiece;
\ No newline at end of file

frontend/src/Components/LandingPage.tsx

+import React from 'react';
+
+class LandingPage extends React.Component {
+
+  render() {
+    return <div>LandingPage</div>;
+  }
+}
+
+export default LandingPage;
\ No newline at end of file

frontend/src/Components/MainPage.css

+.main-page {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 1fr 15fr 1fr;
+    height: 100vh;
+}
+
+.header {
+    grid-row: 1 / 2;
+    grid-column: 1 / -1;
+    background-color: grey;
+}
+
+.body {
+    grid-row: 2 / 3;
+    grid-column: 1 / -1;
+}
\ No newline at end of file

frontend/src/Components/MainPage.tsx

+import React from 'react';
+import './MainPage.css';
+import ExhibitionPiece from './ExhibitionPiece';
+import LandingPage from './LandingPage';
+import ArtPage from './ArtPage';
+
+
+class MainPage extends React.Component {
+
+  state = {currentPage: 0}; // Index of which page to render. 0 is the landing page
+
+  determineRender() {
+    return this.state.currentPage == 0 ? <LandingPage /> : <ArtPage pageId={this.state.currentPage} />
+  }
+
+  render() {
+    return (
+      <div className={'main-page'}>
+        <div className={'header'}>
+          Header
+        </div>
+        <div className={'body'}>
+          {this.determineRender()}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default MainPage;
\ No newline at end of file