Add care section

src/routes/plants/[plant]/+page.svelte

@@ -1,39 +1,24 @@
 <script lang="ts">
   import type { PageData } from "./$types";
   import Badge from "./Badge.svelte";
+  import PlantImage from "./PlantImage.svelte";
   import TempBar from "./TempBar.svelte";
 
   export let data: PageData;
-  const image = data.image;
 </script>
 
 <div class="card">
   <h1>{data.name} (<i>{data.bin_name}</i>)</h1>
-
+  <PlantImage image={data.image} />
-  <figure class="plant-image">
-    <img src={image.medium} alt={data.image.alt} title={data.bin_name} />
-
-    {#if data.image.source != ""}
-      <a
-        class="image-source"
-        href={data.image.source}
-        aria-label="Image Source"
-      >
-        Source
-      </a>
-    {/if}
-  </figure>
   <section>
     <a href="#site"><h2 id="site">Site</h2></a>
     <TempBar temp={data.temp} />
 
-    {#if data.site.light}
+    <Badge
-      <Badge
+      icon="sun"
-        icon="sun"
+      text={data.site.light}
-        text={data.site.light}
+      alt="Prefers {data.site.light} lighting conditions."
-        alt="Prefers {data.site.light} lighting conditions."
+    />
-      />
-    {/if}
 
     {#if data.site.humidity}
       <Badge
@@ -47,44 +32,31 @@
       {@html data.site.description}
     </p>
   </section>
-</div>
+  <section>
-
+    <a href="#care"><h2 id="care">Care</h2></a>
-<style lang="scss">
-  @use "../../../colors.scss";
-  .plant-image {
-    width: 100%;
-    aspect-ratio: 2 / 1;
-    display: flex;
-    margin: auto;
-    border-radius: 0.5em;
-    color: colors.$highlight-text;
-    box-shadow: 0.5em 0.5em colors.$highlight;
-    position: relative;
 
-    a {
+    <Badge
-      color: colors.$highlight-text;
+      icon="drizzle"
-    }
+      text="every {data.care.water_schedule}"
+      alt="Water every {data.care.water_schedule}."
+    />
 
-    .image-source {
+    {#if data.care.mist_schedule}
-      position: absolute;
+      <Badge
-      padding: 0.25em;
+        icon="mist"
-      border-radius: 0.25em;
+        text="every {data.care.mist_schedule}"
-      margin: 0.25em;
+        alt="Mist every {data.care.mist_schedule}."
-      bottom: 0;
+      />
-      right: 0;
+    {/if}
-      font-size: 0.8em;
-      background-color: transparentize(colors.$highlight, 0.75);
-      transition-duration: 0.5s;
-    }
 
-    img {
+    {#if data.care.clean_schedule}
-      border-radius: 0.5em;
+      <Badge
-      width: 100%;
+        icon="brush-2"
-      object-fit: cover;
+        text="every {data.care.clean_schedule}"
-    }
+        alt="Clean every {data.care.clean_schedule}."
+      />
+    {/if}
 
-    &:hover .image-source {
+    <p>{data.care.description}</p>
-      background-color: colors.$highlight;
+  </section>
-    }
+</div>
-  }
-</style>

src/routes/plants/[plant]/+page.ts

@@ -22,7 +22,9 @@ export type PlantData = {
 	care: {
 		description: string;
 		water_schedule: string;
+		mist_schedule?: string;
 		fertilize_schedule?: string;
+		clean_schedule?: string;
 	};
 	site: {
 		description: string;

src/routes/plants/[plant]/Badge.svelte

@@ -4,7 +4,7 @@
   export let text: string;
 </script>
 
-<div class="badge" aria-label={alt}>
+<div class="badge" title={alt}>
   <i class="ri-{icon}-fill icon" aria-hidden="true" /><span aria-hidden="true">
     {@html text}
   </span>

src/routes/plants/[plant]/PlantImage.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import type { PlantData } from "./proxy+page";
+
+  export let image: PlantData["image"];
+</script>
+
+<figure class="plant-image">
+  <img src={image.medium} alt={image.alt} />
+
+  {#if image.source != ""}
+    <a class="image-source" href={image.source} aria-label="Image Source">
+      Source
+    </a>
+  {/if}
+</figure>
+
+<style lang="scss">
+  @use "../../../colors.scss";
+  .plant-image {
+    width: 100%;
+    aspect-ratio: 2 / 1;
+    display: flex;
+    margin: auto;
+    border-radius: 0.5em;
+    color: colors.$highlight-text;
+    box-shadow: 0.5em 0.5em colors.$highlight;
+    position: relative;
+
+    a {
+      color: colors.$highlight-text;
+    }
+
+    .image-source {
+      position: absolute;
+      padding: 0.25em;
+      border-radius: 0.25em;
+      margin: 0.25em;
+      bottom: 0;
+      right: 0;
+      font-size: 0.8em;
+      background-color: transparentize(colors.$highlight, 0.75);
+      transition-duration: 0.5s;
+    }
+
+    img {
+      border-radius: 0.5em;
+      width: 100%;
+      object-fit: cover;
+    }
+
+    &:hover .image-source {
+      background-color: colors.$highlight;
+    }
+  }
+</style>