Status ​

<script setup lang="ts">
import { StaticStatus } from '@youcan/ui-vue3';
import type { StaticStatusDefinition } from '@youcan/ui-vue3/dist/types/components/Status/types';

const favoriteFruit: StaticStatusDefinition = {
  color: '#ffdecb',
  label: 'Peach 🍑',
  labelColor: '#35192b',
};
</script>

<template>
  <StaticStatus v-for="fruit in fruits" :key="fruit.color" :status="favoriteFruit" />
</template>

<script setup lang="ts">
import { EditableStatus } from '@youcan/ui-vue3';
import type { StatusDefinition } from '@youcan/ui-vue3/dist/types/components/Status/types';
import { ref } from 'vue';

const fruits: StatusDefinition[] = [
  {
    color: '#ffdecb',
    label: 'Peach 🍑',
    labelColor: '#35192b',
    value: 'peach',
  },
  {
    color: '#fffad2',
    label: 'Banana 🍌',
    labelColor: '#555022',
    value: 'banana',
  },
  {
    color: '#cbffd3',
    label: 'Kiwi 🥝',
    labelColor: '#2c4730',
    value: 'kiwi',
  },
];
const favoriteFruit = ref(fruits[0]);
</script>

<template>
  <EditableStatus v-model="favoriteFruit" :statuses="fruits" />
</template>