diff --git a/frontend/src/Components/App.tsx b/frontend/src/Components/App.tsx
index 94ada66c9f29705c138c4cff1732a31f24e612b0..31398c67d7d640f67e0c4615f6ca4764b4e85389 100644
--- a/frontend/src/Components/App.tsx
+++ b/frontend/src/Components/App.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import MainPage from './MainPage';
-import './App.css';
+import '../Style/App.css';
const App = () => {
return (
diff --git a/frontend/src/Components/ArtPage.tsx b/frontend/src/Components/ArtPage.tsx
index e0f22c1e476520356b50a7780a961591c8d4f875..6cbd55de9210c7c4ba3096c5a048172e4c44baff 100644
--- a/frontend/src/Components/ArtPage.tsx
+++ b/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>
);
}
diff --git a/frontend/src/Components/DropDown.tsx b/frontend/src/Components/DropDown.tsx
index ce3aefc478ea38833ef0290132bdc1c3b46588de..8ffd481e1a9f13b9a7fce3c42aeef218a59fffab 100644
--- a/frontend/src/Components/DropDown.tsx
+++ b/frontend/src/Components/DropDown.tsx
@@ -1,7 +1,7 @@
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
diff --git a/frontend/src/Components/ExhibitionPiece.tsx b/frontend/src/Components/ExhibitionPiece.tsx
index 38ba99d0f811e4a426968284e6f379b9cefc75c8..64fd7191efda9c9a6fb801832b153a8871c6fb5c 100644
--- a/frontend/src/Components/ExhibitionPiece.tsx
+++ b/frontend/src/Components/ExhibitionPiece.tsx
@@ -1,8 +1,9 @@
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>
);
diff --git a/frontend/src/Components/MainPage.css b/frontend/src/Components/MainPage.css
deleted file mode 100644
index cd7462d682c8e87296400cfb6376e802282a1d3a..0000000000000000000000000000000000000000
--- a/frontend/src/Components/MainPage.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.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
diff --git a/frontend/src/Components/MainPage.tsx b/frontend/src/Components/MainPage.tsx
index b3f81d9d176285b22ac5879edb2babb5ef7a9ef0..420baeaa85a3bd27066060766a3bc0f11409eda3 100644
--- a/frontend/src/Components/MainPage.tsx
+++ b/frontend/src/Components/MainPage.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import './MainPage.css';
+import '../Style/MainPage.css';
import ExhibitionPiece from './ExhibitionPiece';
import LandingPage from './LandingPage';
import ArtPage from './ArtPage';
diff --git a/frontend/src/Components/usePoetry.tsx b/frontend/src/Components/usePoetry.tsx
index f02531db15f0090a7f51a36ef4efe4e1d332e47f..db327c8bd1b9e2ed62b7ea89b8779937ede47671 100644
--- a/frontend/src/Components/usePoetry.tsx
+++ b/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
diff --git a/frontend/src/Components/App.css b/frontend/src/Style/App.css
similarity index 100%
rename from frontend/src/Components/App.css
rename to frontend/src/Style/App.css
diff --git a/frontend/src/Style/ArtPage.css b/frontend/src/Style/ArtPage.css
new file mode 100644
index 0000000000000000000000000000000000000000..f8c2bdc556e8c6220eeb25286a0580f965e7808a
--- /dev/null
+++ b/frontend/src/Style/ArtPage.css
@@ -0,0 +1,39 @@
+.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
diff --git a/frontend/src/Style/MainPage.css b/frontend/src/Style/MainPage.css
new file mode 100644
index 0000000000000000000000000000000000000000..c3f53d6544978fcf5afa09bd15881ee919bc3924
--- /dev/null
+++ b/frontend/src/Style/MainPage.css
@@ -0,0 +1,7 @@
+.main-page {
+ height: 100vh;
+}
+
+.header {
+ background-color: grey;
+}
\ No newline at end of file