sorting function for recipes

Author: therealpaulgg

src/routes/category/[slug]/+page.svelte

@@ -3,11 +3,24 @@
     export let data;
     let { recipes, slug } = data;
     $: ({ recipes, slug } = data);
-    import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
+    import { faArrowLeft, faChevronDown } from "@fortawesome/free-solid-svg-icons";
     import Icon from "svelte-awesome/components/Icon.svelte";
     import Recipe from "../../../components/Recipe.svelte";
     import Back from "../../../components/Back.svelte";
     import RatingScale from "../../../components/RatingScale.svelte";
+
+    let sortBy = 'title';
+
+    $: sortedRecipes = [...recipes].sort((a, b) => {
+        switch (sortBy) {
+            case 'title':
+                return a.metadata.title.localeCompare(b.metadata.title);
+            case 'rating':
+                return b.metadata.rating - a.metadata.rating;
+            default:
+                return 0;
+        }
+    });
 </script>
 
 <svelte:head>
@@ -18,9 +31,17 @@
 
 <RatingScale />
 
+<div class="mb-4">
+    <label for="sort-select" class="block text-md font-medium">Sort by:</label>
+    <select id="sort-select" bind:value={sortBy} class="px-3 py-2 border border-zinc-700 rounded-md bg-zinc-700 text-white focus:outline-zinc-500">
+        <option value="title">Title (A-Z)</option>
+        <option value="rating">Rating (High to Low)</option>
+    </select>
+</div>
+
 {#if recipes.length > 0}
     <div class="grid lg:grid-cols-2 gap-4 mt-4">
-        {#each recipes as recipe}
+        {#each sortedRecipes as recipe}
             <a
                 href={`${base}/category/${slug}/recipe/${recipe.slug}`}
                 class="hover:text-white no-underline"