From 61aa800fb002ba5082d96015c727779a56775f7e Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 10 Feb 2025 20:28:35 -0600
Subject: [PATCH] Format photo library tile

---
 src/admin/AdminAppInsights.tsx | 39 ++++++++++++++++++++--------------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/admin/AdminAppInsights.tsx b/src/admin/AdminAppInsights.tsx
index 5148b3de..74aa0269 100644
--- a/src/admin/AdminAppInsights.tsx
+++ b/src/admin/AdminAppInsights.tsx
@@ -1,9 +1,10 @@
-import { dateRangeForPhotos } from '@/photo';
+import { dateRangeForPhotos } from '@/photo';;
 import {
   getPhotosMeta,
   getUniqueCameras,
   getUniqueTags,
 } from '@/photo/db/query';
+import clsx from 'clsx/lite';
 
 export default async function AdminAppInsights() {
   const [
@@ -19,24 +20,30 @@ export default async function AdminAppInsights() {
   const { start, end } = dateRangeForPhotos(undefined, dateRange);
   
   return (
-    <div className="flex flex-col justify-center gap-4 *:text-center">
-      <div className="font-bold uppercase text-main">
+    <div className={clsx(
+      'flex flex-col items-center justify-center w-full gap-4',
+      'mt-2 mb-6',
+    )}>
+      <div className="text-center text-main uppercase font-bold">
         Photo library
       </div>
-      <div>
-        {count} photos
+      <div className={clsx(
+        'grid grid-cols-2 gap-2 uppercase',
+        'border border-main rounded-md p-4 bg-main shadow-xs',
+        'w-[80%]',
+      )}>
+        <div className="tracking-wide">Photos</div>
+        <div className="text-right">{count}</div>
+        <div>Tags</div>
+        <div className="text-right">{tags.length}</div>
+        <div>Cameras</div>
+        <div className="text-right">{cameras.length}</div>
+        <span className="text-center col-span-2">
+          {start === end
+            ? start
+            : <>{end} – {start}</>}
+        </span>
       </div>
-      <div>
-        {tags.length} tags
-      </div>
-      <div>
-        {cameras.length} cameras
-      </div>
-      <span className="text-dim uppercase">
-        {start === end
-          ? start
-          : <>{end} – {start}</>}
-      </span>
     </div>
   );
 }