@lilaquadrat/design-core 0.1.0

package/src/stores/user.store.ts

@@ -0,0 +1,124 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import StudioSDK from '@lilaquadrat/sdk';
+import useMainStore from './main.store';
+import { auth } from '../plugins/auth';
+import logger from '../mixins/logger';
+import { type CustomerPerson } from '@lilaquadrat/interfaces';
+
+export const useUserStore = defineStore('user', () => {
+
+  const locked = ref<string>();
+  const customer = ref<{_id: string, id?: string}>();
+  const emailConfirmationCode = ref<string>();
+  const userData = ref<CustomerPerson>();
+  const isUser = ref<boolean>(false);
+  const isFullUser = ref<boolean>(false);
+
+  function setCustomer (customerData: {_id: string, id?: string}) {
+
+    customer.value = customerData;
+    localStorage.setItem('lila-customer', JSON.stringify(customerData));
+
+  }
+
+  async function initCustomer () {
+
+    const customerData = localStorage.getItem('lila-customer');
+
+    logger.userstore('init');
+
+    if(customerData) {
+
+      customer.value = JSON.parse(customerData);
+
+    }
+
+    if(auth.isAuth.value) {
+      
+      await updateLock();
+      isUser.value = true;
+
+      if(locked.value === 'user-connect') {
+        isFullUser.value = false;
+      } else {
+        isFullUser.value = true;
+      }
+
+    }
+
+    logger.userstore('done');
+
+  }
+
+  async function updateLock () {
+
+    if(auth.isAuth.value) {
+      
+      await getUser();
+
+      if(!userData.value) {
+
+        console.error('LOCK THE USE FOR MISSING CONNECTION');
+        locked.value = 'user-connect';
+
+        return;
+        
+      }
+      
+      /**
+      * check if a customerId is given and user is not connected
+      */
+      if (!userData.value?.emailConfirmed) {
+        
+        console.error('LOCK THE USE FOR EMAIL VERIFICATION');
+        locked.value = 'email-verified';
+        
+        return;
+        
+      }
+
+      locked.value = undefined;
+      isFullUser.value = true;
+
+    }
+    
+  }
+
+  async function getUser () {
+    
+    const mainStore = useMainStore();
+    const sdk = new StudioSDK(mainStore.apiConfig);
+
+    try {
+      
+      StudioSDK.flushCache('me');
+
+      const me = await sdk.members.me.get();
+
+      userData.value = me.data;
+
+    } catch (error) {
+
+      console.error(error);
+      
+    }
+
+  }
+
+  return {
+    locked,
+    setCustomer,
+    initCustomer,
+    updateLock,
+    customer,
+    userData,
+    isUser,
+    isFullUser,
+    getUser,
+    emailConfirmationCode
+  }
+
+})
+
+export default useUserStore;

package/src/translations/de.ts

@@ -0,0 +1,138 @@
+/**
+ * Framework translations shipped with @lilaquadrat/design-core.
+ *
+ * Only strings the package itself renders live here: validation, list state,
+ * file handling, the signup/order flow and the shared form labels.
+ *
+ * Module wording stays with the design and is merged on top through
+ * addMessages() - see plugins/translations.
+ */
+export default {
+  'home'                                                                                                  : 'Home',
+  'validation-error-type-number'                                                                          : 'muss eine Zahl sein',
+  'validation-error-type-string'                                                                          : 'muss Text sein',
+  'validation-error-minLength'                                                                            : 'muss mindestens {0} Zeichen lang sein',
+  'validation-error-maxLength'                                                                            : 'darf maximal {0} Zeichen lang sein',
+  'validation-error-additionalProperties'                                                                 : 'Das zusätzliche Attribut {0} ist nicht erlaubt',
+  'validation-error-maxItems'                                                                             : 'darf maximal {0} Elemente besitzen',
+  'validation-error-minItems'                                                                             : 'muss mindestens {0} Elemente besitzen',
+  'validation-error-contains'                                                                             : 'muss mindestens {0} valide(s) Element(e) besitzen',
+  'validation-error-required'                                                                             : 'muss gesetzt sein',
+  'validation-error-accepted'                                                                             : 'Vereinbarungen müssen akzeptiert werden',
+  'validation-error-invalidId'                                                                            : 'ist keine valide ID',
+  'validation-error-USER_ALREADY_CONNECTED'                                                               : 'Der Benutzer ist bereits mit einem Account verbunden',
+  'city'                                                                                                  : 'Stadt',
+  'zipcode'                                                                                               : 'Postleitzahl',
+  'street & number'                                                                                       : 'Straße & Hausnummer',
+  'street'                                                                                                : 'Straße',
+  'streetnumber'                                                                                          : 'Hausnummer',
+  'prename'                                                                                               : 'Vorname',
+  'name'                                                                                                  : 'Name',
+  'country'                                                                                               : 'Land',
+  'country-aut'                                                                                           : 'Österreich',
+  'country-che'                                                                                           : 'Schweiz',
+  'country-deu'                                                                                           : 'Deutschland',
+  'email'                                                                                                 : 'E-Mail',
+  'phone'                                                                                                 : 'Telefon',
+  'personal'                                                                                              : 'Persönliche Daten',
+  'address'                                                                                               : 'Adresse',
+  'addressAddition'                                                                                       : 'Adresszusatz',
+  'contact'                                                                                               : 'Kontakt',
+  'price_with_tax'                                                                                        : 'inkl. {0}% MwSt.',
+  'category'                                                                                              : 'Kategorie',
+  'message'                                                                                               : 'Nachricht',
+  'order with payment'                                                                                    : 'Zahlungspflichtig bestellen',
+  'back to the form'                                                                                      : 'Zurück zum Formular',
+  'not available'                                                                                         : 'nicht verfügbar',
+  'no charge'                                                                                             : 'kostenlos',
+  'address addition'                                                                                      : 'Adresszusatz',
+  'address search'                                                                                        : 'Adresssuche',
+  'no matching addresses'                                                                                 : 'Keine passende Adresse gefunden',
+  'provide at least your street and housenumber to find your address. city and zipcode increase accuracy.': 'Bitte geben Sie mindestens Ihre Straße und Hausnummer an, um Ihre Adresse zu finden. Stadt und Postleitzahl erhöhen die Genauigkeit.',
+  'type your street and number'                                                                           : 'Strasse und Hausnummer',
+  'validation-error-LIST_CANNOT_JOIN'                                                                     : 'Es ist leider ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.',
+  'validation-error-LIST_NOT_FOUND'                                                                       : 'Es ist leider ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.',
+  'validation-error-LIST_NO_SPOT_AVAILABLE'                                                               : 'Es ist keine weiteren Plätze verfügbar.',
+  'validation-error-LIST_UNIQUE_CUSTOMER_CONFIRMED'                                                       : 'Die maximale Anzahl wurde erreicht.',
+  'validation-error-EMAIL_INVALID'                                                                        : 'Bitte überprüfe deine E-Mail Adresse',
+  'LIST_CANNOT_JOIN_reservation'                                                                          : 'Es ist leider ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.',
+  'LIST_UNIQUE_CUSTOMER_CONFIRMED_reservation'                                                            : 'Sie sind bereits für eine Reservierung vorgemerkt.',
+  'LIST_NOT_FOUND_reservation'                                                                            : 'Es ist leider ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.',
+  'LIST_NO_SPOT_AVAILABLE_reservation'                                                                    : 'Leider sind keine Plätze mehr verfügbar.',
+  'LIST_CANNOT_JOIN_contact'                                                                              : 'Es ist leider ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.',
+  'LIST_UNIQUE_CUSTOMER_CONFIRMED_contact'                                                                : 'Sie haben bereits die maximale Anzahl an Nachrichten gesendet.',
+  'LIST_NOT_FOUND_contact'                                                                                : 'Es ist leider ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.',
+  'LIST_NO_SPOT_AVAILABLE_contact'                                                                        : 'Die maximale Anzahl an Nachrichten wurde erreicht.',
+  'LIST_CATEGORY_LIMITED_AVAILABILITY_SINGULAR'                                                           : 'Nur einmalig verfügbar',
+  'LIST_CATEGORY_LIMITED_AVAILABILITY_PLURAL'                                                             : 'Limitiert auf {0} Plätze.',
+  'LIST_CATEGORY_LIMITED_AVAILABILITY'                                                                    : 'Nur einmalig verfügbar | Limitiert auf {0} Plätze.',
+  'LIST_LIMITED_AVAILABILITY_SINGULAR'                                                                    : 'Für diese Veranstaltung ist maximal ein Platz verfügbar.',
+  'LIST_LIMITED_AVAILABILITY_PLURAL'                                                                      : 'Für diese Veranstaltung sind maximal {0} Plätze verfügbar.',
+  'LIST_LIMITED_AVAILABILITY'                                                                             : 'Für diese Veranstaltung ist maximal ein Platz verfügbar. | Für diese Veranstaltung sind maximal {0} Plätze verfügbar.',
+  'LIST_LIMITED_AVAILABILITY_STATE'                                                                       : 'Für diese Veranstaltung sind noch {0} von {1} Plätze verfügbar.',
+  'LIST_CATEGORY_LAST_CHANCE_PERCENT'                                                                     : 'Mehr als {0}% gebucht',
+  'LIST_CATEGORY_LAST_CHANCE_SINGULAR'                                                                    : 'Nur noch {0} Platz verfügbar',
+  'LIST_CATEGORY_LAST_CHANCE_PLURAL'                                                                      : 'Nur noch {0} Plätze verfügbar',
+  'LIST_CATEGORY_LAST_CHANCE'                                                                             : 'Nur noch {0} Platz verfügbar | Nur noch {0} Plätze verfügbar',
+  'LIST_CATEGORY_SOLD_OUT'                                                                                : 'AUSVERKAUFT',
+  'LIST_SOLD_OUT'                                                                                         : 'Es sind keine weiteren Plätze verfügbar',
+  'EMAIL_INVALID_contact'                                                                                 : 'Bitte überprüfe deine E-Mail Adresse',
+  'EMAIL_INVALID_reservation'                                                                             : 'Bitte überprüfe deine E-Mail Adresse',
+  'EMAIL_INVALID_content'                                                                                 : 'Bitte überprüfe deine E-Mail Adresse',
+  'euro'                                                                                                  : '€',
+  'required'                                                                                              : 'erforderlich',
+  'disabled'                                                                                              : 'deaktiviert',
+  'loading'                                                                                               : 'wird geladen',
+  'Something went wrong'                                                                                  : 'Hier ist etwas schief gelaufen',
+  'The content is missing'                                                                                : 'Der Inhalt wurde nicht gefunden',
+  'CONTENT_NOT_FOUND'                                                                                     : 'Inhalt wurde nicht gefunden',
+  'CONTENT_LOADING'                                                                                       : 'Wird geladen',
+  'customerId'                                                                                            : 'Kunden ID',
+  'connect-to-user'                                                                                       : 'Account verbinden',
+  'confirm-email'                                                                                         : 'E-Mail Adresse bestätigen',
+  'signup-step-register'                                                                                  : 'Registrierung',
+  'signup-step-account'                                                                                   : 'Konto erstellen',
+  'signup-step-connect'                                                                                   : 'Account verbinden',
+  'signup-step-verify'                                                                                    : 'E-Mail bestätigen',
+  'ORDER_SUCCESS_TITLE'                                                                                   : 'Vielen Dank für deinen Kauf',
+  'INVOICE_NOT_YET_READY_TITLE'                                                                           : 'Deine Rechnung ist noch nicht verfügbar.',
+  'INVOICE_NOT_YET_READY_DESCRIPTION'                                                                     : 'Du kannst diese Seite neu laden um den Status zu aktualisieren.',
+  'INVOICE_DOWNLOAD'                                                                                      : 'Rechnung herunterladen',
+  'ORDER_ERROR_TITLE'                                                                                     : 'Ein Fehler ist aufgetreten',
+  'ORDER_ERROR_DESCRIPTION'                                                                               : 'Deine Bestellung konnte leider nicht gefunden werden. Bitte versuche es später erneut.',
+  'confirmationCode'                                                                                      : 'Bestätigungscode',
+  'EMAIL_CONFIRMATION_FAILED'                                                                             : 'E-Mail Adresse konnte nicht bestaetigt werden.',
+  'validation-error-EMAIL_CONFIRMATION_FAILED'                                                            : 'E-Mail Adresse konnte nicht bestaetigt werden.',
+  'CONFIRM_BUTTON'                                                                                        : 'Aktion bestätigen',
+  'files-add'                                                                                             : 'Dateien hinzufügen',
+  'files-start-upload'                                                                                    : 'Upload starten',
+  'files-clear-finished'                                                                                  : 'Abgeschlossene entfernen',
+  'files-remove'                                                                                          : 'Entfernen',
+  'files-delete'                                                                                          : 'Löschen',
+  'files-download'                                                                                        : 'Herunterladen',
+  'files-uploaded-at'                                                                                     : 'Hochgeladen',
+  'files-loading'                                                                                         : 'Dateien werden geladen...',
+  'files-empty'                                                                                           : 'Keine Dateien vorhanden',
+  'files-list'                                                                                            : 'Dateien',
+  'files-state-pending'                                                                                   : 'Wartet',
+  'files-state-creating'                                                                                  : 'Erstelle...',
+  'files-state-processing'                                                                                : 'Verarbeitet',
+  'files-state-uploading'                                                                                 : 'Lädt hoch',
+  'files-state-done'                                                                                      : 'Fertig',
+  'files-state-error'                                                                                     : 'Fehler',
+  'files-asset'                                                                                           : 'Asset',
+  'files-max-size'                                                                                        : 'Max. Dateigröße',
+  'files-max-count'                                                                                       : 'Max. Anzahl',
+  'files-allowed-types'                                                                                   : 'Erlaubte Dateitypen',
+  'files-error-mime'                                                                                      : 'Dateityp nicht erlaubt',
+  'files-error-too-large'                                                                                 : 'Datei überschreitet maximale Größe',
+  'files-error-max-count'                                                                                 : 'Maximale Anzahl Dateien erreicht',
+  'files-error-no-asset'                                                                                  : 'Asset auswählen vor dem Hochladen',
+  'files-error-select-structure'                                                                          : 'Bitte zuerst eine Kategorie auswählen',
+  'files-select-structure'                                                                                : 'Kategorie auswählen',
+  'files-category-all'                                                                                    : 'Alle Dateien',
+  'files-download-start'                                                                                  : 'Download starten',
+  'files-error-no-url'                                                                                    : 'Download-URL konnte nicht erstellt werden',
+  'FILE_LIMIT_EXCEEDED'                                                                                   : 'Maximale Anzahl Dateien überschritten',
+  'UPLOAD_FAILED'                                                                                         : 'Upload fehlgeschlagen',
+};

package/src/views/content.view.vue

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { distributeGenericData, generateDataWithContent, hardCopy, prepareContent } from '@lilaquadrat/studio';
+import type { BasicData, Content, ContentWithPositions, GenericData } from '@lilaquadrat/interfaces';
+import useMainStore from '../stores/main.store';
+import { useRoute } from 'vue-router';
+import { onBeforeMount } from 'vue';
+import type { SDKResponse } from '@lilaquadrat/sdk';
+import useUserStore from '../stores/user.store';
+import { onServerPrefetch } from 'vue';
+import useContentStore from '../stores/content.store';
+import { HelpersPlugin } from '../plugins/filters';
+
+const route = useRoute();
+const userStore = useUserStore();
+const mainStore = useMainStore();
+const contentStore = useContentStore();
+const dataMerged = ref<ContentWithPositions>();
+const layout = ref<SDKResponse<BasicData<Content>> | undefined>();
+const loading = ref<number>(0);
+const error = ref<boolean>(false);
+
+watch(route, async () => await getContent());
+watch(() => userStore.locked, () => getContent());
+onBeforeMount(async () => await getContent());
+onServerPrefetch(() => getStoreContent(HelpersPlugin.getFilename(contentType.value, route.path)));
+
+const linkMode = computed(() => {
+
+  if(mainStore.config?.dynamic === false) return 'link';
+
+  return undefined
+
+});
+const contentType = computed(() => route.meta.contentType as 'public' | 'members');
+const isLocked = computed(() => contentType.value == 'members' && userStore.locked?.length);
+const hint = computed(() => {
+
+  if(loading.value === 404) {
+    return 'error-404'
+  }
+
+  if(isLocked.value) {
+
+    return `error-${userStore.locked}-${contentType.value}`;
+
+  }
+
+  return undefined;
+
+});
+
+function getStoreContent (filename: string) {
+
+  const storeContent = mainStore.data;
+  const storeLayout = mainStore.layout;
+
+  if(!storeContent) return false;
+
+  /**
+  *  if the current data matches the required filename or the target is mail, because emails dont have filenames
+  *  we can use the store data
+  */
+  if(storeContent && (storeContent.settings?.filename?.includes(filename) || storeContent.target === 'mail' || filename === '__pdf')) {
+    
+    dataMerged.value = mergeContent(storeContent, storeLayout);
+    loading.value = 200;
+    error.value = false;
+
+    updateContext();
+    return true;
+
+  } else {
+
+    dataMerged.value = undefined;
+    return false;
+
+  }
+
+}
+
+function updateContext () {
+
+  contentStore.setContext({
+    sitetitle  : mainStore.data?.settings?.title,
+    description: mainStore.data?.settings?.description,
+  })
+
+}
+
+async function getContent () {
+
+  let content: SDKResponse<BasicData<Content>> | undefined;
+
+  if(isLocked.value) {
+
+    error.value = true;
+    loading.value = 403;
+    return;
+
+  } 
+
+  const filename = HelpersPlugin.getFilename(contentType.value, route.path);
+
+  /**
+  * while hydration we need to check if the store has the content
+  * to avoid fetching it again from the server
+  */
+
+  if(getStoreContent(filename)) return;
+
+  // if(data.value?.data?.settings?.filename?.includes(filename)) return;
+
+  loading.value = 0;
+  error.value = false;
+    
+  try {
+    
+    content = await mainStore.getContent({filename}, contentType.value) as SDKResponse<BasicData<Content>>;
+  
+  } catch (e) {
+    
+    console.error(error);
+    loading.value = e.response.status;
+
+  }
+
+  if(content) {
+
+    mainStore.data = content.data;
+    loading.value = content.status;
+    updateContext();
+  
+    if(loading.value === 200) {
+
+      error.value = false;
+
+      if(mainStore.data?.settings?.useLayout) {
+
+        // a layout explicitly assigned to the page always wins (also in dynamic mode)
+        layout.value = await mainStore.getContent({internalId: mainStore.data.settings.useLayout.toString()}, contentType.value) as SDKResponse<BasicData<Content>>;
+        mainStore.layout = layout.value.data;
+
+      } else if(mainStore.config?.dynamic) {
+
+        layout.value = await mainStore.getContent({id: `${contentType.value}-layout`}, contentType.value) as SDKResponse<BasicData<Content>>;
+        mainStore.layout = layout.value.data;
+
+      } else {
+
+        mainStore.layout = undefined;
+        layout.value = undefined;
+
+      }
+
+    }
+    
+  }
+
+  if ([400, 401, 403].includes(loading.value)) {
+
+    error.value = true;
+
+  } else if ([204, 404].includes(loading.value) || !loading.value) {
+
+    error.value = true;
+    loading.value = 404;
+
+  }
+
+  if(mainStore.data) {
+
+    dataMerged.value = mergeContent(mainStore.data, mainStore.layout);
+
+  } else {
+
+    dataMerged.value = undefined;
+
+  }
+
+}
+
+function mergeContent (baseContent: Partial<BasicData<Content>>, layout?: Content) {
+
+  if(baseContent) {
+    
+    const safeData = hardCopy(baseContent);
+
+    if(safeData.modules) {
+
+      /**
+       * content without generic data is the normal case for a static page, and
+       * generateDataWithContent reads Object.keys of what it is given - so it
+       * throws on undefined instead of returning nothing
+       */
+      if(safeData.genericData) {
+
+        distributeGenericData(safeData.modules, generateDataWithContent(safeData.genericData as GenericData));
+
+      }
+
+    }
+
+    return prepareContent(safeData, layout);
+
+  }
+
+  return prepareContent({})
+
+} 
+
+</script>
+
+<template>
+  <article class="content-screen screen">
+    <lila-error-partial v-if="error" :status="loading" :hint="hint" :type="contentType" />
+    <lila-content-module v-if="dataMerged && !error" :link-mode="linkMode" :content="dataMerged" />
+  </article>
+</template>

package/src/views/download.view.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import useMainStore from '../stores/main.store';
+import useFilesStore from '../stores/files.store';
+
+const route = useRoute();
+const mainStore = useMainStore();
+const filesStore = useFilesStore();
+const loading = ref(true);
+const error = ref<string | undefined>();
+const app = computed(() => route.params.app as string);
+const filename = computed(() => route.params.filename as string);
+const customer = computed(() => route.query.customer as string | undefined);
+const list = computed(() => route.query.list as string | undefined);
+const scope = computed(() => app.value === 'customers' ? 'company' : 'project');
+const extension = computed(() => filename.value.split('.').pop()?.toLowerCase());
+const imageExtensions = new Set(['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'avif']);
+const videoExtensions = new Set(['mp4', 'webm', 'ogg', 'mov', 'avi', 'mkv']);
+const isImage = computed(() => imageExtensions.has(extension.value ?? ''));
+const isVideo = computed(() => videoExtensions.has(extension.value ?? ''));
+const downloadUrl = computed(() => {
+
+  const { company, project } = mainStore.config ?? {};
+  const { secure } = mainStore.config?.cdn ?? {};
+
+  if (!secure || !company) return undefined;
+
+  const parts = [secure, app.value, company];
+
+  if (app.value !== 'customers' && project) {
+    parts.push(project);
+    if (list.value) parts.push(list.value);
+  }
+
+  parts.push(filename.value);
+
+  const queryParams = new URLSearchParams();
+
+  if (customer.value) queryParams.set('customer', customer.value);
+
+  const token = filesStore.token?.token;
+
+  if (token) queryParams.set('token', token);
+
+  const queryString = queryParams.toString();
+
+  return parts.join('/') + (queryString ? `?${queryString}` : '');
+
+});
+
+onMounted(async () => {
+
+  if (!filesStore.isTokenValid(app.value, scope.value)) {
+
+    try {
+
+      await filesStore.fetchToken(app.value, scope.value);
+
+    } catch (e) {
+
+      error.value = (e as Error)?.message || 'TOKEN_FETCH_FAILED';
+
+    }
+
+  }
+
+  loading.value = false;
+
+});
+
+</script>
+<template>
+  <main class="download-view">
+    <article v-if="loading">
+      <p>{{ $t('files-loading') }}</p>
+    </article>
+    <article v-if="!loading && error" class="error">
+      <p>{{ $t(error) }}</p>
+    </article>
+    <template v-if="!loading && !error && downloadUrl">
+      <header class="download-header">
+        <h1>{{ filename }}</h1>
+        <lila-link-partial call-to-action :link="downloadUrl" button>
+          {{ $t('files-download-start') }}
+        </lila-link-partial>
+      </header>
+      <section class="preview-area">
+        <lila-picture-partial
+          v-if="isImage"
+          :src="downloadUrl"
+          :alt="filename"
+        />
+        <lila-video-partial
+          v-if="isVideo"
+          :src="downloadUrl"
+          preload="metadata"
+        />
+      </section>
+    </template>
+    <article v-if="!loading && !error && !downloadUrl" class="error">
+      <p>{{ $t('files-error-no-url') }}</p>
+    </article>
+  </main>
+</template>
+<style lang="less" scoped>
+.download-view {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  article {
+    text-align: center;
+    display: grid;
+    justify-items: center;
+    gap: 20px;
+
+    &.error p {
+      color: red;
+    }
+  }
+
+  .download-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 24px;
+    border-bottom: 1px solid @grey1;
+
+    h1 {
+      margin: 0;
+      font-size: @mobile_paragraph;
+    }
+  }
+
+  .preview-area {
+    flex: 1;
+    display: grid;
+    place-items: center;
+  }
+
+}
+</style>