Update filters for publish date

Author: Jacobdeanr

app/ui/header.tsx

@@ -3,11 +3,11 @@
 import { useState, useEffect } from 'react';
 
 interface HeaderProps {
-  onChange: (opts: { sort: string; query: string }) => void;
+  onChange: (opts: { sort: 'alpha' | 'alpha-desc' | 'published-date-desc' | 'published-date-asc'; query: string }) => void;
 }
 
 export default function Header({ onChange }: HeaderProps) {
-  const [sort, setSort]   = useState<'alpha' | 'date'>('alpha');
+  const [sort, setSort]   = useState<'alpha' | 'alpha-desc' | 'published-date-desc' | 'published-date-asc'>('published-date-desc');
   const [query, setQuery] = useState('');
 
   useEffect(() => onChange({ sort, query }), [sort, query, onChange]);
@@ -48,8 +48,10 @@ export default function Header({ onChange }: HeaderProps) {
               focus:outline-none focus:ring-2 focus:ring-amber-500
             "
           >
-            <option value="alpha">A → Z</option>
-            <option value="date">Z → A</option>
+            <option value="published-date-desc">Published Date (Newest)</option>
+            <option value="alpha">Name (A → Z)</option>
+            <option value="alpha-desc">Name (Z → A)</option>
+            <option value="published-date-asc">Published Date (Oldest)</option>
           </select>
         </div>
       </div>

app/ui/skyboxcard.tsx

@@ -4,8 +4,6 @@ import Image from 'next/image';
 import Modal from './modal';
 import { useState } from 'react';
 
-type Props = { slug: string };
-
 export default function SkyboxCard({
   slug,
   meta,

app/ui/skyboxgrid.tsx

@@ -11,8 +11,8 @@ export default function SkyboxGrid({
   slugs: string[];
   meta: Record<string, any>;
 }) {
-  const [filter, setFilter] = useState<{ sort: string; query: string }>({
-    sort: 'alpha',
+  const [filter, setFilter] = useState<{ sort: 'alpha' | 'alpha-desc' | 'published-date-desc' | 'published-date-asc'; query: string }>({
+    sort: 'published-date-desc',
     query: '',
   });
 
@@ -22,8 +22,29 @@ export default function SkyboxGrid({
       const q = filter.query.toLowerCase();
       list = list.filter((s) => s.includes(q));
     }
-    if (filter.sort === 'date') list.sort().reverse();
-    else list.sort();
+    switch (filter.sort) {
+      case 'alpha-desc':
+        list.sort().reverse(); // Z-A
+        break;
+      case 'published-date-desc': // Newest to Oldest
+        list.sort((a, b) => {
+          const dateA = meta[a]?.publishDate ? new Date(meta[a].publishDate).getTime() : 0;
+          const dateB = meta[b]?.publishDate ? new Date(meta[b].publishDate).getTime() : 0;
+          return dateB - dateA; // Sorts undefined/null dates to the end (as oldest)
+        });
+        break;
+      case 'published-date-asc': // Oldest to Newest
+        list.sort((a, b) => {
+          const dateA = meta[a]?.publishDate ? new Date(meta[a].publishDate).getTime() : Number.MAX_SAFE_INTEGER;
+          const dateB = meta[b]?.publishDate ? new Date(meta[b].publishDate).getTime() : Number.MAX_SAFE_INTEGER;
+          return dateA - dateB; // Sorts undefined/null dates to the end (as newest)
+        });
+        break;
+      case 'alpha': // A-Z
+      default:
+        list.sort();
+        break;
+    }
 
     return list;
   }, [slugs, filter]);