databases?; we dont need no stinkin databases.

src/routes/pork/+page.server.ts

@@ -1,8 +1,132 @@
-import { get_all_pork } from '$lib/db';
-
 export async function load() {
   return {
-    pork: get_all_pork()
+    pork,
+    PRICE_PER_LB
   }
 }
 
+const PRICE_PER_LB = 6
+
+const pork = [
+  {
+    name: "pork links",
+    cured: false,
+    tubed: true,
+    lb_package: true,
+    flavors: [
+      "blueberry",
+      "original"
+    ]
+  },
+  {
+    name: "bacon",
+    cured: true,
+    tubed: false,
+    lb_package: true,
+    flavors: [
+      "blackberry",
+      "original",
+      "raspberry chipotle",
+      "three pepper"
+    ]
+
+  },
+  {
+    name: "bratwurst",
+    cured: false,
+    tubed: true,
+    lb_package: true,
+    flavors: [
+      "italian",
+      "keilbasa",
+      "andouille",
+      "cranberry",
+      "mushroom & swiss",
+      "philly cheese steak",
+      "swedish potato",
+      "~~jalapeno~~"
+    ]
+  },
+  {
+    name: "rings",
+    cured: false,
+    tubed: true,
+    lb_package: true,
+    flavors: [
+      "italian",
+      "keilbasa",
+    ]
+  },
+  {
+    name: "patties",
+    cured: false,
+    tubed: false,
+    lb_package: true,
+    flavors: [
+      "bratwurst",
+      "original",
+    ]
+
+  },
+  {
+    name: "ham",
+    cured: true,
+    tubed: false,
+    lb_package: false,
+    avg_weight: { min: 7, max: 15 }
+  },
+  {
+    name: "raw ham",
+    cured: false,
+    tubed: false,
+    avg_weight: { min: 7, max: 15 }
+  },
+  {
+    name: "loin roast",
+    cured: false,
+    tubed: false,
+    avg_weight: { min: 3, max: 4 }
+  },
+  {
+    name: "chop",
+    cured: false,
+    tubed: false,
+    avg_weight: { min: 0.75, max: 1.5 }
+  },
+  {
+    name: "steak",
+    cured: false,
+    tubed: false,
+    avg_weight: { min: 1.5, max: 3 }
+  },
+  {
+    name: "belly",
+    cured: false,
+    tubed: false,
+    avg_weight: { min: 7, max: 10 }
+  },
+  {
+    name: "spare ribs",
+    cured: false,
+    tubed: false,
+    avg_weight: { min: 2, max: 4 }
+  },
+  {
+    name: "butt",
+    cured: false,
+    tubed: false,
+    avg_weight: { min: 3, max: 5 }
+  },
+  {
+    name: "smoked hocks",
+    cured: true,
+    tubed: false,
+    avg_weight: { min: 1, max: 2 }
+  },
+  {
+    name: "roast",
+    cured: false,
+    tubed: false,
+    avg_weight: { min: 4, max: 7 }
+  }
+]

src/routes/pork/+page.svelte

@@ -1,26 +1,27 @@
 <script lang="ts">
   import type { MouseEventHandler } from "svelte/elements";
-  let { data } = $props<{ data: { pork: Pork[] } }>();
+  let { data } = $props<{ data: { pork: Pork[]; PRICE_PER_LB: number } }>();
   interface Pork {
     pork: {
       name: string;
-      min_weight: number;
+      cured: boolean;
-      max_weight: number;
+      tubed: boolean;
-      stock: number;
+      lb_package: boolean;
-      raw_cut: boolean;
+      flavors: String[];
-      id: number;
+      avg_weight: {
-      preweighed: boolean;
+        min: number;
+        max: number;
+      };
     };
   }
 
   let selected = $state("Chop");
-  const PRICE_PER_LB = 6;
 
   const change_photo: MouseEventHandler<HTMLLIElement> = ({
     currentTarget: { id },
   }) => {
-    console.log(id);
+    // console.log(id);
-    selected = id;
+    // selected = id;
   };
 </script>
 
@@ -35,28 +36,37 @@
 <section>
   <h1><b>F</b>arm Raised Pork</h1>
   <h5>this ain't your grocery store's pork</h5>
-  <h5>All priced at {PRICE_PER_LB}$/#</h5>
+  <h5>All priced at {data.PRICE_PER_LB}$/#</h5>
-  <div id="tui">
+  <div id="pork">
-    <ol>
+    {#each data.pork as { name, cured, tubed, lb_package, flavors, avg_weight }}
-      <li>
+      <div onmouseenter={change_photo} id={name}>
-        <span>Cut</span>
+        <h3>{name}</h3>
-        <span>Weight</span>
+        {#if lb_package}
-      </li>
+          <p>1 lb</p>
-      {#each data.pork as { name, preweighed, min_weight, max_weight }}
-        <li onmouseenter={change_photo} id={name}>
-          <span>{name}</span>
-          {#if preweighed}
-            <span>{min_weight} lb</span>
         {:else}
-            <span>{min_weight} ~ {max_weight} lbs</span>
+          <p>{avg_weight.min}~ {avg_weight.max} lbs</p>
         {/if}
+        {#if cured}
+          <span>Cured!</span>
+        {/if}
+        {#if tubed}
+          <span>Tubed!</span>
+        {/if}
+        {#if flavors != undefined}
+          <ul>
+            {#each flavors as flavor}
+              <li>
+                {flavor}
               </li>
             {/each}
-    </ol>
+          </ul>
-    <img
+        {/if}
-      src={`/pork/${selected.replace(" ", "_")}.jpg`}
+      </div>
-      alt={`Image of a ${selected}`}
+    {/each}
-    />
+    <!-- <img -->
+    <!--   src={`/pork/${selected.replace(" ", "_")}.jpg`} -->
+    <!--   alt={`Image of a ${selected}`} -->
+    <!-- /> -->
   </div>
 </section>
 
@@ -84,17 +94,28 @@
       color: var(--primary-8);
     }
 
-    img {
+    // img {
-      display: none;
+    //   display: none;
+    // }
   }
-
+  #pork {
-    #tui {
     display: flex;
-      width: 90%;
+    flex-direction: column;
     font-size: 1rem;
     gap: 1rem;
+    width: 100%;
+    div {
+      background: var(--primary-9);
+      border-radius: var(--br);
+      padding: 1rem;
+      display: flex;
+      flex-direction: column;
+    }
+    h3 {
+      text-transform: capitalize;
+    }
 
-      ol {
+    ul {
       width: 100%;
       display: inherit;
       flex-direction: column;
@@ -103,15 +124,7 @@
         display: inherit;
         gap: 1rem;
         padding-left: 1rem;
-          span {
+        &:nth-child(even) {
-            flex-basis: 50%;
-            text-align: center;
-            text-shadow: 3px 3px 3px var(--primary-7);
-            &:first-child {
-              text-align: left;
-            }
-          }
-          &:nth-child(2n) {
           background: var(--primary-8);
         }
         &:not(:first-child):hover {
@@ -120,17 +133,26 @@
       }
     }
   }
-  }
 
   @media screen and (min-width: 640px) {
-    img {
+    #pork {
-      display: unset !important;
+      flex-direction: row;
-      width: 50%;
+      flex-wrap: wrap;
-      height: fit-content;
+      align-items: center;
-      border-radius: 0.375rem;
+      justify-content: space-around;
-      text-align: center;
+      div {
-      align-self: center;
+        flex-basis: 20rem;
+        // align-items: center;
+        justify-content: center;
       }
     }
+    // img {
+    //   display: unset !important;
+    //   width: 50%;
+    //   height: fit-content;
+    //   border-radius: 0.375rem;
+    //   text-align: center;
+    //   align-self: center;
+    // }
+  }
 </style>
-