Filed with slider and switch

<script setup lang="ts">
import { ref } from "vue"
import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldTitle } from "@/components/ui/field"
import { Slider } from "@/components/ui/slider"
import { Switch } from "@/components/ui/switch"

const cpuLimit = ref([75])
</script>

<template>
  <div class="mx-auto w-full max-w-xs">
    <FieldGroup>
      <Field orientation="horizontal">
        <FieldContent>
          <FieldTitle>High Performance Mode</FieldTitle>
          <FieldDescription>
            Prioritize speed over battery life for intensive tasks.
          </FieldDescription>
        </FieldContent>
        <Switch id="high-performance" :default-value="true" />
      </Field>
      <Field>
        <div class="flex items-center justify-between">
          <FieldLabel for="cpu-allocation">CPU Allocation</FieldLabel>
          <span class="text-muted-foreground text-xs font-medium">{{ cpuLimit[0] }}%</span>
        </div>
        <Slider
          id="cpu-allocation"
          :model-value="cpuLimit"
          @update:model-value="(value) => (cpuLimit = value as number[])"
          :max="100"
          :step="5"
        />
        <FieldDescription>
          Limit the maximum CPU resources used by the application.
        </FieldDescription>
      </Field>
    </FieldGroup>
  </div>
</template>