Added a bunch of stuff to make it work and trying out bun

2025-05-04 17:44:56 -05:00
parent f72dde1369
commit 94edaa2783
30 changed files with 559 additions and 4 deletions
@@ -0,0 +1,140 @@
+<script lang="ts">
+  import { RAW_COST, PROCESSED_COST } from '$lib/index';
+  let { data } = $props<{ data: { pork: Pork[] } }>();
+  interface Pork {
+    pork: {
+        name: string;
+        min_weight: number;
+        max_weight: number;
+        stock: number;
+        raw_cut: boolean;
+        id: number;
+        preweighed: boolean;
+    };
+  }
+
+  let selected = $state({
+    name: "Chop"
+  })
+  
+</script>
+<section>
+  <h1>Pork</h1>
+  
+ <!--  <div class="list">
+    {#each data.pork as pork}
+      {@const price_per_lb = pork.raw_cut ? RAW_COST : PROCESSED_COST}
+      <div>
+          <img src={`/pork/${pork.name.replace(' ', '_')}.jpg`} alt={`Image of a ${pork.name}`} />
+          <h2>{pork.name}</h2>
+          <span>
+              {#if pork.preweighed}
+                  <p>${price_per_lb * pork.min_weight}</p>
+              {:else}
+              <p>${price_per_lb * pork.min_weight} ~ ${ price_per_lb * pork.max_weight}</p>
+              {/if}
+              <p>~{pork.stock} in stock</p>
+          </span>
+      </div>
+    {/each}
+  </div> -->
+
+  <div id="tui">
+    <ol>
+      <li><span>Cut</span><span>Weight</span><span>Stock</span></li>
+      {#each data.pork as {name, raw_cut, preweighed, min_weight, max_weight, stock}}
+        {@const price_per_lb = raw_cut ? RAW_COST : PROCESSED_COST}
+        <li>
+          <span>{name}</span>
+          {#if preweighed}
+            <span>{min_weight} lb</span>
+          {:else}
+            <span>{min_weight} ~ ${max_weight} lbs</span>
+          {/if}
+          <span>{stock}</span>
+        </li>
+      {/each}
+    </ol>
+    <img src={`/pork/${selected.name.replace(' ', '_')}.jpg`} alt={`Image of a ${selected.name}`} />
+  </div>
+</section>
+
+<style lang="scss">
+  @use '/src/app.scss' as *;
+  section {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    h1 {
+        text-align: center;
+        font-size: 5rem;
+        font-weight: 600;
+        margin: 0 0 2rem 0;
+    }   
+    img {
+      width: 20rem;
+      height: fit-content;
+      border-radius: 0.375rem;
+      // min-width: 10rem;
+      // min-height: 10rem;
+    }
+
+    #tui{
+      display: flex;
+      width: 80%;
+      font-size: 1.5rem;
+      
+      ol{
+        width: 75%;
+        display: inherit;
+        flex-direction: column;
+        list-style: none;
+        li{
+          display: inherit;
+          gap: 1rem;
+          span{
+            flex-basis: 33%;
+          }
+        }
+      }
+    }
+
+    .list, .used-to-be-div {
+        display: flex;
+        background: $blue;
+        border: 4px solid $green;
+        border-radius: 1rem;
+        flex-direction: column;
+        text-align: center;
+        align-items: center;
+        justify-content: center;
+        gap: 1rem;
+        flex-basis: 30rem;
+        &.list {
+            background: none;
+            flex-direction: row;
+            border: none;
+            flex-wrap: wrap;
+        }
+        h2 {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin: 0;
+        }
+        span {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 1rem;
+            margin-bottom: 1rem;
+            p {
+                font-size: 1.25rem;
+                font-weight: 400;
+                margin: 0;
+            }
+        }
+    }
+  }
+</style>