| 1 | <template> |
| 2 | <div class="flex flex-col-reverse gap-6 lg:flex-row"> |
| 3 | <div class="border-primary shrink-0 overflow-hidden rounded-lg border-2 bg-white p-4 pt-12 lg:w-120 lg:p-8"> |
| 4 | <Preview class="mx-auto" :title="previewData?.title" :logo="previewData?.logo" /> |
| 5 | </div> |
| 6 | |
| 7 | <n-card class="grow"> |
| 8 | <SettingsForm @update="previewData = $event" /> |
| 9 | </n-card> |
| 10 | </div> |
| 11 | </template> |
| 12 | |
| 13 | <script setup lang="ts"> |
| 14 | import type { SettingsModel } from "./Form.vue" |
| 15 | import { NCard } from "naive-ui" |
| 16 | import { ref } from "vue" |
| 17 | import SettingsForm from "./Form.vue" |
| 18 | import Preview from "./Preview.vue" |
| 19 | |
| 20 | const previewData = ref<SettingsModel | null>(null) |
| 21 | </script> |