From ac20ec74dbba612d1391f21a9f28abe012323ce9 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 7 Nov 2023 00:59:06 -0600
Subject: [PATCH] Refine /sets layout

---
 src/app/(static)/sets/page.tsx | 25 ++++++++++++++-----------
 src/components/InfoBlock.tsx   |  5 ++++-
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/app/(static)/sets/page.tsx b/src/app/(static)/sets/page.tsx
index d97da11b..c7ff0530 100644
--- a/src/app/(static)/sets/page.tsx
+++ b/src/app/(static)/sets/page.tsx
@@ -4,12 +4,12 @@ import {
   getUniqueFilmSimulationsCached,
   getUniqueTagsCached,
 } from '@/cache';
+import InfoBlock from '@/components/InfoBlock';
 import RedirectOnDesktop from '@/components/RedirectOnDesktop';
 import SiteGrid from '@/components/SiteGrid';
 import PhotoGridSidebar from '@/photo/PhotoGridSidebar';
 import { SHOW_FILM_SIMULATIONS } from '@/site/config';
 import { PATH_GRID } from '@/site/paths';
-import { cc } from '@/utility/css';
 
 export default async function SetsPage() {
   const [
@@ -26,17 +26,20 @@ export default async function SetsPage() {
 
   return (
     <SiteGrid
-      contentMain={<div className={cc(
-        'top-4 space-y-4 text-base',
-      )}>
+      contentMain={<InfoBlock
+        padding="tight"
+        centered={false}
+      >
         <RedirectOnDesktop redirectPath={PATH_GRID} />
-        <PhotoGridSidebar {...{
-          tags,
-          cameras,
-          simulations,
-          photosCount,
-        }} />
-      </div>}
+        <div className="text-base space-y-4 p-2">
+          <PhotoGridSidebar {...{
+            tags,
+            cameras,
+            simulations,
+            photosCount,
+          }} />
+        </div>
+      </InfoBlock>}
     />
   );
 }
diff --git a/src/components/InfoBlock.tsx b/src/components/InfoBlock.tsx
index 982c0e78..f15df9dd 100644
--- a/src/components/InfoBlock.tsx
+++ b/src/components/InfoBlock.tsx
@@ -5,10 +5,12 @@ export default function InfoBlock({
   children,
   className,
   padding = 'normal',
+  centered = true,
 }: {
   children: ReactNode
   className?: string
   padding?: 'loose' | 'normal' | 'tight';
+  centered?: boolean;
 } ) {
   const getPaddingClasses = () => {
     switch (padding) {
@@ -28,7 +30,8 @@ export default function InfoBlock({
       className,
     )}>
       <div className={cc(
-        'flex flex-col items-center justify-center w-full',
+        'flex flex-col justify-center w-full',
+        centered && 'items-center',
         'space-y-4',
         'text-medium',
       )}>