From 66b5d79a6880b6ae5f67b5ff5f2ba40886bea05b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 12 Jul 2024 22:50:07 +0300
Subject: [PATCH] unit-conversion/energy: Add Joules (closes #56)

---
 .../unit-conversion/energy/+page.svelte       | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/routes/unit-conversion/energy/+page.svelte b/src/routes/unit-conversion/energy/+page.svelte
index acd9d38..02a391d 100644
--- a/src/routes/unit-conversion/energy/+page.svelte
+++ b/src/routes/unit-conversion/energy/+page.svelte
@@ -1,6 +1,7 @@
 <script>
 	import OneColumnView from "$lib/components/one-column-view.svelte";
 	import Tool from "$lib/components/tool.svelte";
+	import TwoColumnView from "$lib/components/two-column-view.svelte";
 	import SingleUnit from "../single-unit.svelte";
 
     let from = "watt-hour";
@@ -8,9 +9,18 @@
 </script>
 
 <Tool>
-    <OneColumnView title="Energy Conversion">
-        <SingleUnit bind:baseValue={baseValue} bind:from={from} to="watt-hour" name="Watt-hour" />
-        <SingleUnit bind:baseValue={baseValue} bind:from={from} to="kilowatt-hour" name="Killowatt-hour" />
-        <SingleUnit bind:baseValue={baseValue} bind:from={from} to="megawatt-hour" name="Megawatt-hour" />
-    </OneColumnView>
+    <TwoColumnView leftTitle="Watt-hours" rightTitle="Joules">
+        <div slot="left">
+            <SingleUnit bind:baseValue={baseValue} bind:from={from} to="watt-hour" name="Watt-hour" />
+            <SingleUnit bind:baseValue={baseValue} bind:from={from} to="kilowatt-hour" name="Killowatt-hour" />
+            <SingleUnit bind:baseValue={baseValue} bind:from={from} to="megawatt-hour" name="Megawatt-hour" />
+        </div>
+
+        <div slot="right">
+            <SingleUnit bind:baseValue={baseValue} bind:from={from} to="joules" name="Joules" />
+            <SingleUnit bind:baseValue={baseValue} bind:from={from} to="kilojoules" name="Kilojoules" />
+            <SingleUnit bind:baseValue={baseValue} bind:from={from} to="megajoules" name="Megajoules" />
+            <SingleUnit bind:baseValue={baseValue} bind:from={from} to="gigajoules" name="Gigajoules" />
+        </div>
+    </TwoColumnView>
 </Tool>
\ No newline at end of file