Design rudimentary UI for printing text

showbits-thermal-printer-ui/src/App.vue

@@ -1,18 +1,10 @@
+<script setup lang="ts">
+import CSegment from "./components/CSegment.vue";
+</script>
+
 <template>
-  <div class="glow">
   <div class="strip">
-      <h2>Thing</h2>
+    <CSegment />
-      Hello World
-      <br />
-      World Hello
-      <br />
-      <input type="file" />
-      <input />
-      <br />
-      <button>Foo</button>
-      <button>Foo</button>
-      <button>Foo</button>
-    </div>
   </div>
 </template>
 
@@ -23,12 +15,6 @@
   padding: 32px;
 
   background-color: white;
-  mask: conic-gradient(from 100deg at top, #000 160deg, #0000 160deg)
-    center/64px;
-}
-
-.glow {
-  filter: drop-shadow(0 0 50px rgb(255, 238, 214));
 }
 </style>
 
@@ -53,6 +39,7 @@
   padding: 0;
 }
 
+h1,
 h2 {
   font-size: 32px;
 }

showbits-thermal-printer-ui/src/components/CSegment.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import CSegmentText from "./CSegmentText.vue";
+
+const mode = ref<"text">();
+</script>
+
+<template>
+  <CSegmentText v-if="mode === 'text'" />
+  <section v-else class="choose">
+    <p>What do you want to print?</p>
+    <div class="list">
+      <button @click="mode = 'text'">Calendar</button>
+      <button @click="mode = 'text'">Cellular Automaton</button>
+      <button @click="mode = 'text'">Chat Message</button>
+      <button @click="mode = 'text'">Easter Egg</button>
+      <button @click="mode = 'text'">Text</button>
+      <button @click="mode = 'text'">Tic Tac Toe</button>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+p {
+  margin-bottom: 1ch;
+}
+
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1ch;
+}
+</style>

showbits-thermal-printer-ui/src/components/CSegmentText.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts"></script>
+
+<template>
+  <section>
+    <h2>Text</h2>
+    <textarea rows="10"></textarea>
+    <fieldset>
+      <label><input type="checkbox" /> Force-Wrap</label>
+      <label><input type="checkbox" checked /> Feed</label>
+    </fieldset>
+    <button>Print</button>
+  </section>
+</template>
+
+<style scoped>
+section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+fieldset {
+  display: flex;
+  flex-direction: column;
+  border: none;
+}
+</style>