derivatives count on art gallery

uwu-labs · Jan 9, 2024 · 1014ece · 1014ece
1 parent 45c6b67
commit 1014ece
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/src/components/Derivatives.css b/src/components/Derivatives.css
@@ -27,12 +27,25 @@
   }
 }
 
+.derivatives-count {
+  font-size: 2rem;
+  font-weight: 600;
+  margin: 0 auto;
+  margin-bottom: 2rem;
+  text-align: center;
+
+  @media (max-width: 720px) {
+    margin-bottom: 1rem;
+  }
+}
+
 .derivatives-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(15rem, 1fr));
   grid-gap: 2rem;
   width: 40vw;
   margin: auto;
+  margin-top: 4rem;
 
   @media (max-width: 800px) {
     grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));

diff --git a/src/components/Derivatives.tsx b/src/components/Derivatives.tsx
@@ -26,6 +26,7 @@ const Derivatives = () => {
   return (
     <div className="derivatives-styled-derivatives">
       <h1 className="derivatives-title">Art Gallery</h1>
+      <h2 className="derivatives-count">{`${filtered.length} Total Derivatives`}</h2>
       <div className="derivatives-grid">
         <div className="derivatives-filters">
           <div className="derivatives-label">Artist:</div>