<template>
  <div>
    <!-- Statische Fieberkurve -->
    <div>
      <hr>
      <br>
      <h2>Statische Fieberkurve</h2>
      <p>1.
        < Fieberkurve
        :isStatic="true"
        :defaultValues="[{ value: 5 }, { value: 2 }, { value: 7 }, { value: 3 }, { value: 5 }]" />
      </p>
      <p>2.
        < Fieberkurve :isStatic="true"
        :hideText="true"
        :defaultValues="[{ value: 1 }, { value: 4 }, { value: 7 }, { value: 1 }, { value: 2 }]" />
      </p>
      <hr>
      <br>
      <Fieberkurve
        :is-static="true"
        :default-values="[{ value: 5 }, { value: 2 }, { value: 7 }, { value: 3 }, { value: 5 }]"
      />
      <Fieberkurve
        :is-static="true"
        :hide-text="true"
        :default-values="[{ value: 1 }, { value: 4 }, { value: 7 }, { value: 1 }, { value: 2 }]"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"
import Fieberkurve from "@/components/Fieberkurve.vue"
</script>

<style scoped>
h1 {
  text-align: center;
  margin-bottom: 20px;
}

h2 {
  margin: 20px 0;
  text-align: left;
}

.button-container {
  text-align: center;
  margin: 20px 0;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

div {
  margin-bottom: 40px;
}
</style>









<!--
  <script setup>

  import Fieberkurve from "@/components/Fieberkurve.vue";
  </script>

  <template>

  <VCard
  title="Fieberkurven Vorschauseite"
  subtitle="Hier werden nur ein paar Varianten der Fieberkurve gezeigt!"
  >




  <h4>Interaktive Fieberkurve:</h4>
  &lt;!&ndash; Interaktive Fieberkurve &ndash;&gt;
  <Fieberkurve :isStatic="false" />
  <br>
  <br>
  <Fieberkurve :isStatic="false" />

  <br>
  <hr>
  <br>
  <h4>Statische Fieberkurve mit vordefinierten Werten:</h4>

  &lt;!&ndash; Statische Fieberkurve mit vordefinierten Werten &ndash;&gt;
  <Fieberkurve :isStatic="true" :defaultValues="[{ value: 5 }, { value: 2 }, { value: 7 }, { value: 4 }, { value: 1 }]" />
  <br>
  <br>
  <Fieberkurve :isStatic="true" :defaultValues="[{ value: 1 }, { value: 2 }, { value: 2 }, { value: 3 }, { value: 1 }]" />
  <br>
  <br>
  <Fieberkurve :isStatic="true" :defaultValues="[{ value: 5 }, { value: 2 }, { value: 3 }, { value: 4 }, { value: 7 }]" />
  <br>
  <br>
  </VCard>
  </template>


  <style scoped lang="scss">

  </style>
-->
