styling headers, info on pages

src/Components/PageHeader.jsx

@@ -1,8 +1,11 @@
 export default function (props){
     return(
         <header>
+            <h2>
+                {props.super}
+            </h2>
             <h1>
-                {props.text}
+                {props.heading}
             </h1>
         </header>
     )

src/Components/Table.jsx

@@ -138,13 +138,17 @@ export default function Table(props) {
     })
   }
   
-  return <table>
+  return (
+  <>
+  <h2>{props.header}</h2>
+  <table>
     <tbody>
       {renderHeaders(data)}
       {renderRows(data)}
     </tbody>
   </table>
-
+  </>
+)
 
 
 

src/routes/publication.jsx

@@ -7,17 +7,22 @@ const { filterList, highlights, clickables } = submissionsTableOptions
 export default function Publication() {
     const { publicationId } = useParams()
     const { publications } = useLoaderData()
-    const publicationsData = publications.find(row => row.id == publicationId)
+    const publicationData = publications.find(row => row.id == publicationId)
     return (
-        <>
-            <PageHeader text={'Publication#' + publicationId} />
-            {JSON.stringify(publicationsData)}
-            <Table data={publicationsData.submissions}
-                filterList={filterList}
+        <>  <div id="page">
+            <PageHeader super={'Publication#' + publicationId} heading={publicationData.title}/>
+            <div>
+            Link: 
+            <a href={publicationData.link}>{publicationData.link}</a>
+            </div>
+            <Table data={publicationData.submissions}
+                filterList={[...filterList,'publication']}
                 highlights={highlights}
                 clickables={clickables}
                 sortByDefault='date_submitted'
+                header='Submissions:'
             ></Table>
+            </div>
         </>
     )
 }

src/routes/story.jsx

@@ -8,21 +8,20 @@ export default function Story(){
     const { storyId } = useParams()
     const { stories } = useLoaderData()
     const storyData = stories.find(row=>row.id==storyId)
-    filterList.push(
-        'story',
-
-    )
+   
     return(
         <>
-        <PageHeader text={'Story#'+storyId}/>
-        {JSON.stringify(storyData)}
+        <div id="page">
+        <PageHeader super={'Story#'+storyId} heading={storyData.title}/>
      <Table 
      data={storyData.submissions} 
-     filterList={filterList}
+     filterList={[...filterList,'story']}
      highlights={highlights}
      clickables={clickables}
      sortByDefault='date_submitted'
+     header='Submissions:'
      ></Table>
+     </div>
         </>
     )
 }

src/styles/index.css

@@ -54,4 +54,18 @@ html {
   button:hover{
     cursor:pointer;
   }
- 
+ 
+
+  h1{
+    font-size: 4rem;
+    margin:0;
+  }
+  h2{
+    font-size: 2rem;
+    margin:0;
+  }
+  #page{
+    font-size: 1.6rem;
+    width: fit-content;
+    margin:auto;
+  }