staging changes before experimentation

2025-10-18 09:19:18 -07:00
1 parent 2082bb7ba4
commit 71fee1eb11
@@ -0,0 +1,113 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12">
+        <v-card class="mb-4">
+          <v-card-title>Demo Components</v-card-title>
+          <v-card-text>
+            <v-row>
+              <!-- Basic Card -->
+              <v-col cols="12" md="4">
+                <v-card>
+                  <v-card-title>Basic Card</v-card-title>
+                  <v-card-text>
+                    This is a basic card component with title and content.
+                  </v-card-text>
+                </v-card>
+              </v-col>
+
+              <!-- Card with Actions -->
+              <v-col cols="12" md="4">
+                <v-card>
+                  <v-card-title>Interactive Card</v-card-title>
+                  <v-card-text>
+                    This card has buttons and actions.
+                  </v-card-text>
+                  <v-card-actions>
+                    <v-btn color="primary">Action</v-btn>
+                    <v-btn color="secondary">Cancel</v-btn>
+                  </v-card-actions>
+                </v-card>
+              </v-col>
+
+              <!-- Card with Icon -->
+              <v-col cols="12" md="4">
+                <v-card>
+                  <v-card-title>
+                    <v-icon start>mdi-star</v-icon>
+                    Card with Icon
+                  </v-card-title>
+                  <v-card-text>
+                    This card shows how to use icons.
+                  </v-card-text>
+                </v-card>
+              </v-col>
+            </v-row>
+
+            <!-- Form Elements -->
+            <v-row class="mt-4">
+              <v-col cols="12" md="6">
+                <v-card>
+                  <v-card-title>Form Elements</v-card-title>
+                  <v-card-text>
+                    <v-text-field
+                      label="Text Input"
+                      placeholder="Enter some text"
+                      variant="outlined"
+                    ></v-text-field>
+                    <v-select
+                      label="Select Option"
+                      :items="['Option 1', 'Option 2', 'Option 3']"
+                      variant="outlined"
+                    ></v-select>
+                    <v-checkbox
+                      label="Checkbox Example"
+                    ></v-checkbox>
+                  </v-card-text>
+                </v-card>
+              </v-col>
+
+              <!-- Data Display -->
+              <v-col cols="12" md="6">
+                <v-card>
+                  <v-card-title>Data Display</v-card-title>
+                  <v-card-text>
+                    <v-list>
+                      <v-list-item
+                        v-for="(item, i) in demoItems"
+                        :key="i"
+                        :title="item.title"
+                        :subtitle="item.subtitle"
+                        :prepend-icon="item.icon"
+                      ></v-list-item>
+                    </v-list>
+                  </v-card-text>
+                </v-card>
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+const demoItems = [
+  {
+    title: 'List Item 1',
+    subtitle: 'With an icon and subtitle',
+    icon: 'mdi-account'
+  },
+  {
+    title: 'List Item 2',
+    subtitle: 'Another example item',
+    icon: 'mdi-bell'
+  },
+  {
+    title: 'List Item 3',
+    subtitle: 'One more for good measure',
+    icon: 'mdi-cog'
+  }
+]
+</script>