Artpage basic styling #7

frontend/src/Components/App.tsx

 import React from 'react';
 import MainPage from './MainPage';
-import './App.css';
+import '../Style/App.css';
 
 const App = () => {
   return (

frontend/src/Components/ArtPage.tsx

@@ -3,8 +3,8 @@ import ExhibitionPiece from './ExhibitionPiece';
 import FavoriteButton from './FavoriteButton';
 import DropDown from './DropDown';
 import NavButton from './NavButton';
+import '../Style/ArtPage.css';
 
-;
 
 type props = {
   pageId: number; // The id of the page
@@ -18,12 +18,16 @@ class ArtPage extends React.Component<props> {
 
   render() {
     return (
-      <div className={"artpage"}>
-        <FavoriteButton />
-        <DropDown />
-        <ExhibitionPiece artId={this.props.pageId} />
-        <NavButton />
-        <NavButton />
+      <div className={'artpage'}>
+        <FavoriteButton/>
+        <DropDown/>
+        <ExhibitionPiece artId={this.props.pageId}/>
+        <div className={'navbutton left'}>
+          <NavButton/>
+        </div>
+        <div className={'navbutton right'}>
+          <NavButton/>
+        </div>
       </div>
     );
   }

frontend/src/Components/DropDown.tsx

 import React from 'react';
 
 const DropDown = () => {
-  return <div>DropDown</div>
+  return <div className={"dropdown"}>DropDown</div>
 };
 
 export default DropDown;
\ No newline at end of file

frontend/src/Components/ExhibitionPiece.tsx

 import React, { useEffect, useState } from 'react';
 import usePoetry from './usePoetry';
+import { render } from 'react-dom';
 
 const SVGs = [ // Collection of Artworks that will be displayed
-  <svg viewBox={"50 50 200 80"}>
+  <svg viewBox={"0 0 200 80"}>
     <rect width={"200"} height={80} fill={"blue"} />
   </svg>,
   // TODO: ADD SVGS IN HERE
@@ -15,17 +16,25 @@ type props = {
 const ExhibitionPiece = (props: props) => {
   const [title, poem, author] = usePoetry(props.artId-1); // Calls on the usePoetry hook to retrieve the poem corresponding to Id
 
+  const renderPoems = () => {
+    if (poem != null)
+      return poem.map(line => <p>{line}</p>)
+    return <p>Loading...</p>
+  }
+
   return (
     <div className={'exhibition-piece'}>
-      <div>
+      <div className={"title"}>
         {title}
+      </div>
+      <div className={"author"}>
         {author}
       </div>
-      <div>
+      <div className={"svg-artwork"}>
         {SVGs[props.artId-1]}
       </div>
-      <div>
-        {poem}
+      <div className={"poem"}>
+        {renderPoems()}
       </div>
     </div>
   );

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 '../Style/MainPage.css';
 import ExhibitionPiece from './ExhibitionPiece';
 import LandingPage from './LandingPage';
 import ArtPage from './ArtPage';

frontend/src/Components/usePoetry.tsx

@@ -22,8 +22,8 @@ type dataResponse = {
 
 const usePoetry = (poetId: number) => { // Custom hook for retrieving poetry. Enter id and it will retrieve the corresponding poem
   const [poem, setPoem] = useState<Array<string> | null>(null); // The poem itself. Initialized as null
-  const [title, setTitle] = useState("");
-  const [author, setAuthor] = useState("");
+  const [title, setTitle] = useState("Loading...");
+  const [author, setAuthor] = useState("Loading...");
 
   useEffect(() => { // Will run every time the Id changes
     fetch(`https://poetrydb.org/author,poemcount,linecount/${poets[poetId]};1;4`) // GET request to poetryDb
@@ -35,6 +35,6 @@ const usePoetry = (poetId: number) => { // Custom hook for retrieving poetry. En
       });
   }, [poetId]);
 
-  return [title, poem, author];
+  return [title, poem, author] as const;
 }
 export default usePoetry;
\ No newline at end of file

frontend/src/Style/ArtPage.css

+.artpage {
+    display: grid;
+    grid-template-columns: 1fr 2fr 1fr;
+    grid-template-rows: 1fr 10fr 1fr;
+    height: 100vh;
+}
+
+.exhibition-piece {
+    display: flex;
+    grid-row: 2 / 3;
+    grid-column: 2 / 3;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.dropdown {
+    grid-row: 1 / 2;
+    grid-column: 3 / 4;
+    display: flex;
+    flex-direction: row-reverse;
+    margin-right: 2rem;
+    margin-top: 1rem;
+}
+
+.navbutton {
+    grid-row: 3 / 4;
+    display: flex;
+}
+
+.navbutton.left {
+    grid-column: 1 / 2;
+    flex-direction: row-reverse;
+    margin-right: 10rem;
+}
+.navbutton.right {
+    grid-column: 3 / 4;
+    margin-left: 10rem;
+}
\ No newline at end of file

frontend/src/Style/MainPage.css

+.main-page {
+    height: 100vh;
+}
+
+.header {
+    background-color: grey;
+}
\ No newline at end of file