Style the main content headers and metadata 📈.

gmarty · Apr 19, 2024 · 5b835db · 5b835db
1 parent b3c47ba
commit 5b835db
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 9 deletions.
diff --git a/src/components/Main.js b/src/components/Main.js
@@ -1,5 +1,5 @@
 const Main = ({ children }) => (
-  <main className="grow space-y-4 overflow-y-auto px-4 py-6 sm:px-6 lg:px-7 xl:px-8">
+  <main className="grow space-y-4 overflow-y-auto p-4 md:space-y-5 md:p-5 xl:space-y-6 xl:p-6">
     {children}
   </main>
 );

diff --git a/src/components/MainHeader.js b/src/components/MainHeader.js
@@ -0,0 +1,14 @@
+const MainHeader = ({ title, children }) => {
+  return (
+    <div className="flex justify-between gap-4">
+      {title && (
+        <h1 className="whitespace-nowrap text-2xl font-semibold text-slate-700">
+          {title}
+        </h1>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default MainHeader;
diff --git a/src/components/ResourceMetadata.js b/src/components/ResourceMetadata.js
@@ -14,7 +14,7 @@ const ResourceMetadata = ({ metadata }) => {
   );
 
   return (
-    <div className="mb-3 mt-2 grid w-max grid-cols-[auto_auto_auto] gap-x-2 gap-y-1 rounded bg-slate-200 p-2 text-xs text-slate-600">
+    <div className="grid w-max grid-cols-[auto_auto_auto] gap-x-2 gap-y-1 whitespace-nowrap rounded bg-slate-200 p-2 text-xs text-slate-700">
       <div className="font-bold">payload offset:</div>
       <div className="text-right font-mono">0x{hex(metadata.offset)}</div>
       <div className="font-mono opacity-50">({metadata.offset})</div>

diff --git a/src/components/Room.js b/src/components/Room.js
@@ -1,3 +1,4 @@
+import MainHeader from './MainHeader';
 import ResourceMetadata from './ResourceMetadata';
 import RoomCanvasContainer from '../containers/RoomCanvasContainer';
 import HoveredObjects from './HoveredObjects';
@@ -16,8 +17,9 @@ const Room = ({
 
   return (
     <>
-      <h1>Room {room.metadata.id}</h1>
-      <ResourceMetadata metadata={room.metadata} />
+      <MainHeader title={`Room ${room.metadata.id}`}>
+        <ResourceMetadata metadata={room.metadata} />
+      </MainHeader>
       <div
         className="relative overflow-hidden"
         style={{ maxWidth: width * 8 * zoom }}>

diff --git a/src/containers/PrepositionsContainer.js b/src/containers/PrepositionsContainer.js
@@ -1,7 +1,8 @@
 import SecondaryColumn from '../components/SecondaryColumn';
-import Main from '../components/Main';
 import ColumnListHeader from '../components/ColumnListHeader';
 import PrepositionsList from '../components/PrepositionsList';
+import Main from '../components/Main';
+import MainHeader from '../components/MainHeader';
 import ResourceMetadata from '../components/ResourceMetadata';
 
 const PrepositionsContainer = ({ preps, lang }) => {
@@ -15,8 +16,9 @@ const PrepositionsContainer = ({ preps, lang }) => {
         />
       </SecondaryColumn>
       <Main>
-        <h1>Prepositions</h1>
-        <ResourceMetadata metadata={preps.metadata} />
+        <MainHeader title="Prepositions">
+          <ResourceMetadata metadata={preps.metadata} />
+        </MainHeader>
       </Main>
     </>
   );

diff --git a/src/containers/RomMapContainer.js b/src/containers/RomMapContainer.js
@@ -1,9 +1,10 @@
 import Main from '../components/Main';
+import MainHeader from '../components/MainHeader';
 
 const RomMapContainer = ({ rom, res, rooms }) => {
   return (
     <Main>
-      <h1>ROM Map</h1>
+      <MainHeader title="ROM Map" />
     </Main>
   );
 };

diff --git a/src/containers/RoomGfxContainer.js b/src/containers/RoomGfxContainer.js
@@ -1,9 +1,10 @@
 import Main from '../components/Main';
+import MainHeader from '../components/MainHeader';
 
 const RoomGfxContainer = ({ roomgfx }) => {
   return (
     <Main>
-      <h1>Room Gfx</h1>
+      <MainHeader title="Room Gfx" />
     </Main>
   );
 };