add sorting options and updates to styling

Author: davemooreuws

src/components/guides/GuideItem.tsx

@@ -21,6 +21,16 @@ export const GuideItem: React.FC<Props> = ({ guide, featured }) => {
     >
       <div className="flex flex-col gap-y-4">
         <div>
+          <time
+            dateTime={guide.published_at}
+            className="absolute right-0 top-0 m-3 text-2xs text-muted-foreground"
+          >
+            {new Date(guide.published_at).toLocaleDateString('en-US', {
+              year: 'numeric',
+              month: 'short',
+              day: 'numeric',
+            })}
+          </time>
           <p
             className={cn(
               'font-display text-xl font-semibold',

src/components/guides/GuideList.tsx

@@ -1,34 +1,64 @@
 'use client'
 
-import React from 'react'
+import React, { useMemo } from 'react'
 import { GuideItem } from './GuideItem'
 import { cn } from '@/lib/utils'
 import useParams from '@/hooks/useParams'
 import type { Guide } from '@/content'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select'
 
 interface Props {
   className?: string
   allGuides: Guide[]
 }
 
 const GuideList: React.FC<Props> = ({ className, allGuides }) => {
-  const { searchParams } = useParams()
+  const { searchParams, setParams } = useParams()
+  const sortBy = searchParams?.get('sort') || 'published_date'
   const selectedTags = searchParams?.get('tags')?.split(',') || []
   const selectedLangs = searchParams?.get('langs')?.split(',') || []
 
-  const filteredGuides = allGuides
-    .filter((guide) => {
-      let include = true
+  const filteredGuides = useMemo(() => {
+    return allGuides
+      .filter((guide) => {
+        let include = true
 
-      if (selectedLangs.length) {
-        include = selectedLangs.some((lang) => guide.languages?.includes(lang))
-      }
+        if (selectedLangs.length) {
+          include = selectedLangs.some((lang) =>
+            guide.languages?.includes(lang),
+          )
+        }
 
-      if (!selectedTags.length) return include
+        if (!selectedTags.length) return include
 
-      return include && selectedTags.some((tag) => guide.tags?.includes(tag))
-    })
-    .sort((a, b) => a.title.localeCompare(b.title))
+        return include && selectedTags.some((tag) => guide.tags?.includes(tag))
+      })
+      .sort((a, b) => {
+        if (sortBy === 'published_date') {
+          const dateDiff =
+            new Date(b.published_at).getTime() -
+            new Date(a.published_at).getTime()
+
+          return dateDiff !== 0 ? dateDiff : a.title.localeCompare(b.title)
+        } else if (sortBy === 'last_updated') {
+          const dateDiff =
+            new Date(b.updated_at || b.published_at).getTime() -
+            new Date(a.updated_at || a.published_at).getTime()
+
+          return dateDiff !== 0 ? dateDiff : a.title.localeCompare(b.title)
+        }
+
+        return sortBy === 'alpha-reverse'
+          ? b.title.localeCompare(a.title)
+          : a.title.localeCompare(b.title)
+      })
+  }, [allGuides, selectedTags, selectedLangs, sortBy])
 
   return filteredGuides.length === 0 ? (
     <div className={className}>
@@ -37,13 +67,37 @@ const GuideList: React.FC<Props> = ({ className, allGuides }) => {
       </p>
     </div>
   ) : (
-    <ul className={cn('space-y-4', className)}>
-      {filteredGuides.map((guide) => (
-        <li key={guide.slug}>
-          <GuideItem guide={guide} />
-        </li>
-      ))}
-    </ul>
+    <div className={cn('flex flex-col gap-4', className)}>
+      <Select
+        value={sortBy}
+        onValueChange={(val) => {
+          // This is necessary to fix a ui update delay causing 200ms lag
+          setTimeout(() => setParams('sort', val), 0)
+        }}
+      >
+        <SelectTrigger
+          aria-label="Sort options"
+          className="ml-auto max-w-52 bg-white/5 text-xs font-medium ring-1 ring-inset ring-zinc-300/10 hover:bg-white/7.5 dark:bg-white/2.5 dark:text-zinc-400 dark:hover:bg-white/5 md:flex"
+        >
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent position="item-aligned">
+          <SelectItem value="published_date">Sort by Date Published</SelectItem>
+          <SelectItem value="last_updated">Sort by Last Updated</SelectItem>
+          <SelectItem value="alpha">Sort Alphabetically (A-Z)</SelectItem>
+          <SelectItem value="alpha-reverse">
+            Sort Alphabetically (Z-A)
+          </SelectItem>
+        </SelectContent>
+      </Select>
+      <ul className={'space-y-4'}>
+        {filteredGuides.map((guide) => (
+          <li key={guide.slug}>
+            <GuideItem guide={guide} />
+          </li>
+        ))}
+      </ul>
+    </div>
   )
 }
 

src/components/guides/GuidePage.tsx

@@ -26,7 +26,7 @@ const GuidePage: React.FC<Props> = ({ allTags }) => {
       <Suspense>
         <GuideList
           allGuides={allGuides}
-          className="relative mx-2 my-4 w-full sm:px-8 lg:my-10"
+          className="relative mx-2 my-4 w-full sm:px-8 lg:mb-8"
         />
       </Suspense>
     </div>

src/components/guides/GuidesFeatured.tsx

@@ -13,11 +13,7 @@ const GuidesFeatured: React.FC = ({ take = 3 }: { take?: number }) => {
   const featuredGuides = allGuides
     .filter((guide): guide is RequiredFeaturedGuide => !!guide.featured)
     .sort((a, b) => {
-      if (a.published_at && b.published_at) {
-        return a.published_at > b.published_at ? -1 : 1
-      }
-
-      return 0
+      return a.published_at > b.published_at ? -1 : 1
     })
     .slice(0, take)
 
@@ -30,7 +26,7 @@ const GuidesFeatured: React.FC = ({ take = 3 }: { take?: number }) => {
         {featuredGuides.map((guide) => (
           <article
             key={guide.slug}
-            className="group relative isolate flex flex-col justify-end overflow-hidden rounded-lg bg-zinc-900 px-8 pb-8 pt-48"
+            className="group relative isolate flex flex-col justify-end overflow-hidden rounded-lg bg-zinc-900 px-8 pb-8 pt-60"
           >
             <Image
               alt={guide.featured.image_alt}
@@ -40,16 +36,24 @@ const GuidesFeatured: React.FC = ({ take = 3 }: { take?: number }) => {
               priority
               className="absolute inset-0 -z-10 h-full w-full object-cover"
             />
-            <div className="absolute inset-0 -z-10 bg-gradient-to-t from-primary-300/50 via-secondary-400/30 to-primary-500/40 dark:from-primary-700/50 dark:via-secondary-800/40 dark:to-primary-900/50" />
+            <div className="absolute inset-0 -z-10 bg-gradient-to-t from-primary-400/60 via-secondary-400/30 to-primary-500/40 dark:from-primary-800/60 dark:via-secondary-800/20 dark:to-primary-900/50" />
             <div className="absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset ring-primary-500/10 dark:ring-primary-900/10" />
-
-            <h3 className="mt-3 text-lg/6 font-semibold tracking-wide text-white">
+            <time
+              dateTime={guide.published_at}
+              className="absolute left-0 top-0 m-4 text-2xs text-zinc-300 dark:text-muted-foreground"
+            >
+              {new Date(guide.published_at).toLocaleDateString('en-US', {
+                month: 'short',
+                day: 'numeric',
+              })}
+            </time>
+            <h3 className="mt-4 text-lg/6 font-semibold tracking-wide text-white">
               <Link href={`/${guide.slug}`}>
                 <span className="absolute inset-0" />
                 {guide.title}
               </Link>
             </h3>
-            <p className="mt-1 text-base leading-5 text-white dark:text-muted-foreground">
+            <p className="mt-1 text-sm leading-5 text-white dark:text-muted-foreground">
               {guide.description}
             </p>
             <ArrowUpRightIcon