unit-conversion/data: Init for SI (closes #62)

eliandoran · Jul 10, 2024 · 1df03d7 · 1df03d7
1 parent 0940d65
commit 1df03d7
Showing 1 changed file with 20 additions and 8 deletions.
diff --git a/src/routes/unit-conversion/data/+page.svelte b/src/routes/unit-conversion/data/+page.svelte
@@ -2,18 +2,30 @@
 	import Tool from "$lib/components/tool.svelte";
 	import OneColumnView from "$lib/components/one-column-view.svelte";
 	import SingleUnit from "../single-unit.svelte";
+	import TwoColumnView from "$lib/components/two-column-view.svelte";
 
   let from = "gibibytes";
   let baseValue = 1;
 </script>
 
 <Tool>
-  <OneColumnView title="Data Conversion">
-    <SingleUnit bind:baseValue={baseValue} bind:from={from} to="bytes" name="Bytes" />
-    <SingleUnit bind:baseValue={baseValue} bind:from={from} to="kibibytes" name="Kibibytes" />
-    <SingleUnit bind:baseValue={baseValue} bind:from={from} to="mebibytes" name="Mebibytes" />
-    <SingleUnit bind:baseValue={baseValue} bind:from={from} to="gibibytes" name="Gibibytes" />
-    <SingleUnit bind:baseValue={baseValue} bind:from={from} to="tebibytes" name="Tebibytes" />
-    <SingleUnit bind:baseValue={baseValue} bind:from={from} to="pebibytes" name="Pebibytes" />
-  </OneColumnView>
+  <TwoColumnView leftTitle="Bi-bytes (common)" rightTitle="International System of Units">
+    <div slot="left">
+      <SingleUnit bind:baseValue={baseValue} bind:from={from} to="bytes" name="Bytes" />
+      <SingleUnit bind:baseValue={baseValue} bind:from={from} to="kibibytes" name="Kibibytes" />
+      <SingleUnit bind:baseValue={baseValue} bind:from={from} to="mebibytes" name="Mebibytes" />
+      <SingleUnit bind:baseValue={baseValue} bind:from={from} to="gibibytes" name="Gibibytes" />
+      <SingleUnit bind:baseValue={baseValue} bind:from={from} to="tebibytes" name="Tebibytes" />
+      <SingleUnit bind:baseValue={baseValue} bind:from={from} to="pebibytes" name="Pebibytes" />
+    </div>
+
+    <div slot="right">
+      <SingleUnit bind:baseValue={baseValue} bind:from={from} to="bytes" name="Bytes" />
+      <SingleUnit bind:baseValue={baseValue} bind:from={from} to="kilobytes" name="Kilobytes" />
+      <SingleUnit bind:baseValue={baseValue} bind:from={from} to="megabytes" name="Megabytes" />
+      <SingleUnit bind:baseValue={baseValue} bind:from={from} to="gigabytes" name="Gigabytes" />
+      <SingleUnit bind:baseValue={baseValue} bind:from={from} to="terabytes" name="Terabytes" />
+      <SingleUnit bind:baseValue={baseValue} bind:from={from} to="petabytes" name="Petabytes" />
+    </div>
+  </TwoColumnView>
 </Tool>