Make sidebar photo count animation consistent

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

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={[
+      items={(title || icon
-        <div key="header" className={cc(
+        ? [
-          'text-gray-900',
+          <div key="header" className={cc(
-          'dark:text-gray-100',
+            'text-gray-900',
-          'flex items-center mb-0.5',
+            'dark:text-gray-100',
-          'uppercase',
+            'flex items-center mb-0.5',
-        )}>
+            'uppercase',
-          {icon}
+          )}>
-          {icon && <>&nbsp;</>}
+            {icon}
-          {title}
+            {icon && title && <>&nbsp;</>}
-        </div>,
+            {title}
-      ].concat(items)}
+          </div>,
-      classNameItem="text-dim"
+        ]
+        :[] as ReactNode[]
+      ).concat(items)}
+      classNameItem="text-dim uppercase"
     />
   );
 }

src/photo/PhotoGridSidebar.tsx

@@ -38,10 +38,9 @@ export default function PhotoGridSidebar({
             hideApple
           />)}
       />}
-      {photosCount > 0 &&
+      {photosCount > 0 && <HeaderList
-        <div className="text-dim uppercase">
+        items={[photoQuantityText(photosCount, false)]}
-          {photoQuantityText(photosCount, false)}
+      />}
-        </div>}
     </>
   );
 }