From eae78d2194c6e42cc6f0e5c95e5f03671e1bbd28 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 21 Oct 2023 13:55:22 -0500
Subject: [PATCH] Make sidebar photo count animation consistent

---
 src/components/AnimateItems.tsx |  4 ++--
 src/components/HeaderList.tsx   | 34 ++++++++++++++++++---------------
 src/photo/PhotoGridSidebar.tsx  |  7 +++----
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/components/AnimateItems.tsx b/src/components/AnimateItems.tsx
index a2873e0d..5fe89d4a 100644
--- a/src/components/AnimateItems.tsx
+++ b/src/components/AnimateItems.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useRef } from 'react';
+import { ReactNode, useRef } from 'react';
 import { Variant, motion } from 'framer-motion';
 import { useAppState } from '@/state';
 
@@ -17,7 +17,7 @@ export interface AnimationConfig {
 interface Props extends AnimationConfig {
   className?: string
   classNameItem?: string
-  items: JSX.Element[]
+  items: ReactNode[]
   animateFromAppState?: boolean
   animateOnFirstLoadOnly?: boolean
   staggerOnFirstLoadOnly?: boolean
diff --git a/src/components/HeaderList.tsx b/src/components/HeaderList.tsx
index 536582f5..5566e15b 100644
--- a/src/components/HeaderList.tsx
+++ b/src/components/HeaderList.tsx
@@ -1,33 +1,37 @@
 import { cc } from '@/utility/css';
 import AnimateItems from './AnimateItems';
+import { ReactNode } from 'react';
 
 export default function HeaderList({
   title,
   icon,
   items,
 }: {
-  title: string,
+  title?: string,
   icon?: JSX.Element,
-  items: JSX.Element[]
+  items: ReactNode[]
 }) {
   return (
     <AnimateItems
       scaleOffset={0.95}
       duration={0.5}
       staggerDelay={0.05}
-      items={[
-        <div key="header" className={cc(
-          'text-gray-900',
-          'dark:text-gray-100',
-          'flex items-center mb-0.5',
-          'uppercase',
-        )}>
-          {icon}
-          {icon && <>&nbsp;</>}
-          {title}
-        </div>,
-      ].concat(items)}
-      classNameItem="text-dim"
+      items={(title || icon
+        ? [
+          <div key="header" className={cc(
+            'text-gray-900',
+            'dark:text-gray-100',
+            'flex items-center mb-0.5',
+            'uppercase',
+          )}>
+            {icon}
+            {icon && title && <>&nbsp;</>}
+            {title}
+          </div>,
+        ]
+        :[] as ReactNode[]
+      ).concat(items)}
+      classNameItem="text-dim uppercase"
     />
   );
 }
diff --git a/src/photo/PhotoGridSidebar.tsx b/src/photo/PhotoGridSidebar.tsx
index de6d3c85..f2f7ff16 100644
--- a/src/photo/PhotoGridSidebar.tsx
+++ b/src/photo/PhotoGridSidebar.tsx
@@ -38,10 +38,9 @@ export default function PhotoGridSidebar({
             hideApple
           />)}
       />}
-      {photosCount > 0 &&
-        <div className="text-dim uppercase">
-          {photoQuantityText(photosCount, false)}
-        </div>}
+      {photosCount > 0 && <HeaderList
+        items={[photoQuantityText(photosCount, false)]}
+      />}
     </>
   );
 }