Design rudimentary UI for printing text

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>