Format photo library tile

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>
   );
 }