<script setup lang="ts">
import Form from "./components/Form.vue"
import Lottie from "./components/Lottie.vue";

import { ref } from "vue";

const vorname = ref("");
const nachname = ref("");
const funktionZeileEins = ref("");
const funktionZeileZwei = ref("");

</script>

<template>
  <div class="appGrid">
    <div class="form">
    <Form v-model:vorname="vorname" 
    v-model:nachname="nachname" 
    v-model:funktionZeileEins="funktionZeileEins"
    v-model:funktionZeileZwei="funktionZeileZwei"></Form>
  </div>
  <div class="form" >
    <Lottie :vorname="vorname" 
    :nachname="nachname" 
    :funktionZeileEins="funktionZeileEins" 
    :funktionZeileZwei="funktionZeileZwei"></Lottie>
  </div>
  </div>
  
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.appGrid {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 50px;
}

.form {
  /* width: 50%;
  max-width: 500px; */
}
</style>