Compare since previous compare PR

src/App.tsx

@@ -1,49 +1,123 @@
 import './App.css';
-import './SectionView.css';
+import './css_reset.css'
+import './section_view.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFaceSmile } from '@fortawesome/free-solid-svg-icons';
 
 function App() {
-  return (
-    <div className="parent">
-      <div className="section-title">
-        <div className='text'>
-          <h1> Intro </h1>
-          <p>This intro section consists of a tuba quartet in the style of DJ Templeton & The Windsurfers</p>
-        </div>
-        <div className='buttons'>
-          <button> 42 revisions </button>
-          <button> save revision </button>
-        </div>
-      </div>
-      <div className="chords">
-        <ol>
-          <li>C</li>
-          <li>Dm</li>
-          <li>F</li>
-          <li>G</li>
-        </ol>
-      </div>
-      <div className="files">
-        <span>+ Files</span>
-          <div>Bass.mp3 <br></br> <br></br> 2 Comments</div>
-          <div>Drums.mp3 <br></br> <br></br> 2 Comments</div>
-          <div>Yodeling.mp3 <br></br> <br></br> 2 Comments  </div>
-          <div>Tuba.mp3 <br></br> <br></br> 2 Comments  </div>
-      </div>
-      <div className="comments">
-        <span>3 Comments</span>
-        <div className="display-comments">
-        <p><FontAwesomeIcon icon={faFaceSmile} /> Jerry: My name is Schmoopie and I love this song. It reminds me of my grandpa</p>
-        <p><FontAwesomeIcon icon={faFaceSmile} /> Larry: jokes on you! Im deaf.</p>
-        <p><FontAwesomeIcon icon={faFaceSmile} /> Terry: Notice the tinnitus ringing in your ears, let the hiss from your damaged hearing remind you of peaceful ocean waves...</p>
-        </div>
+
+
+
+  const sectionData = {
+    name: 'Intro',
+    description: 'This intro section consists of a tuba quartet in the style of DJ Templeton & The Windsurfers',
+    numRevisions: 42,
+  };
+
+  const currentChordProgression = ['C', 'Dm', 'F', 'G']
+
+  const files = [
+    {
+      title: 'Bass.mp3',
+      numComments: 2,
+    },
+    {
+      title: 'Drums.mp3',
+      numComments: 2,
+    },
+    {
+      title: 'Yodeling.mp3',
+      numComments: 2,
+    },
+    {
+      title: 'Tuba.mp3',
+      numComments: 2,
+    },
+  ]
+
+
+  const comments = [
+    {
+      name: 'Jerry',
+      commentText: 'My name is Schmoopie and I love this song. It reminds me of my grandpa'
+    },
+    {
+      name: 'Lerry',
+      commentText: 'jokes on you! Im deaf.'
+    },
+    {
+      name: 'Jerry',
+      commentText: 'Notice the tinnitus ringing in your ears, let the hiss from your damaged hearing remind you of peaceful ocean waves...'
+    },
+  ]
+
+
+  // Components
+
+  function Files() {
+    return <div className="files">
+      <span>+ Files</span>
+      {files.map((file) =>
+        <div>
+          {file.title}
+          <br></br> <br></br>
+          {file.numComments + ' '}
+          Comments
+        </div>)}
+    </div>
+  }
+
+
+  function ChordProgression() {
+    return <div className="chords">
+      <ol>
+        {currentChordProgression.map((chord, index) => <li>{chord}</li>)}
+      </ol>
+    </div>
+  }
+
+
+  function Comments() {
+    return <div className="comments">
+      <span>3 Comments</span>
+      <div className="display-comments">
+        {comments.map((comment, index) => {
+          return <>
+            <p><FontAwesomeIcon icon={faFaceSmile} /> {comments[index].name}: {comments[index].commentText}</p>
+          </>
+        })}
       </div>
-      <div className="submit">
+    </div>
+  }
+
+  function Submit() {
+    return <div className="submit">
       <textarea placeholder="make a comment"></textarea>
       <button>Submit</button>
+    </div>
+  }
+
+  function SectionTitle() {
+    return <div className="section-title">
+      <div className='text'>
+        <h1> {sectionData.name} </h1>
+        <p>{sectionData.description}</p>
+      </div>
+      <div className='buttons'>
+        <button> {sectionData.numRevisions} revisions </button>
+        <button> Save revision </button>
       </div>
     </div>
+  }
+
+  return (
+    <div className="root">
+      <SectionTitle />
+      <ChordProgression />
+      <Files />
+      <Comments />
+      <Submit />
+    </div>
   );
 }
 

src/css_reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

src/SectionView.css → src/section_view.css

@@ -1,63 +1,3 @@
-/* http://meyerweb.com/eric/tools/css/reset/ 
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-body {
-	line-height: 1;
-}
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-
-
-
-
-
-
-
-
-
-/* END OF CSS RESET */
-
-
 
 
 * { 
@@ -67,7 +7,7 @@ table {
 html {font-size: 62.5%;}
 
 
-.parent {
+.root {
   display: flex;
   background-color: rgb(95, 193, 208);
   justify-content: center;