ladder orders!

src/components/NewOrder.vue

@@ -1,15 +1,51 @@
 <template>
-  <v-btn prepend-icon="mdi-plus" text="New Order"/>
+  <div class="d-inline-flex">
+    <btn icon="mdi-plus" color="green" @click="show=true">New Order</btn>
+    <v-dialog v-model="show" width="auto">
+      <v-card>
+        <v-card-item class="d-flex">
+
+          <v-card variant="elevated"
+                  prepend-icon="mdi-clock-outline" title="DCA"
+                  subtitle="Spread order across time"
+                  text="The DCA order gives you a Dollar Cost Average (DCA) or a Time Weighted Average
+                   Price (TWAP) by splitting the order amount into multiple parts executed at regular time intervals.">
+            <v-card-actions><btn icon="mdi-clock-outline" text="DCA" @click="$router.push('/twap')"/></v-card-actions>
+          </v-card>
+
+          <v-card variant="elevated"
+                  prepend-icon="mdi-menu" title="Ladder"
+                  subtitle="Multiple price levels"
+                  text="The Ladder order helps catch wicks and other reversals by splitting the order amount across
+                   multiple price levels. The amounts may be weighted towards one end of the ladder, to either have
+                   a larger filled amount on a shallow reversal, or a larger amount at a better price that might not
+                   be reached.">
+            <v-card-actions><btn icon="mdi-menu" text="Ladder" @click="$router.push('/ladder')"/></v-card-actions>
+          </v-card>
+
+        </v-card-item>
+        <v-card-item class="mb-3"><v-btn variant="outlined" prepend-icon="mdi-cancel" color="red" @click="show=false">Cancel</v-btn></v-card-item>
+      </v-card>
+    </v-dialog>
+  </div>
 </template>
 
 <script setup>
 import {useStore} from "@/store/store";
+import {ref} from "vue";
+import Btn from "@/components/Btn.vue";
 
 const s = useStore()
+const show = ref(false)
 
 </script>
 
 <style scoped lang="scss">
 @use "src/styles/vars" as *;
 
+.v-card .v-card {
+  width: 20em;
+  margin: 2em;
+}
+
 </style>