Settings ​

<script setup lang="ts">
import { SettingsNav, SettingsNavItem } from '@youcan/ui-vue3';
import { ref } from 'vue';

const SETTINGS = [
  { label: 'General', icon: 'i-youcan-gear' },
  { label: 'Account', icon: 'i-youcan-user' },
  { label: 'Privacy', icon: 'i-youcan-lock' },
  { label: 'Appearance', icon: 'i-youcan-palette' },
  { label: 'Subscriptions', icon: 'i-youcan-receipt' },
];
const activeTab = ref(SETTINGS[0].label);

const handleClick = (tab: string) => {
  activeTab.value = tab;
};
</script>

<template>
  <SettingsNav>
    <template #header>
      <p>Settings</p>
    </template>
    <template #items>
      <SettingsNavItem
        v-for="item in SETTINGS"
        :key="item.label"
        :label="item.label"
        :icon="item.icon"
        :active="activeTab === item.label"
        @click="() => handleClick(item.label)"
      />
    </template>
  </SettingsNav>
</template>

<script setup lang="ts">
import { SettingsNavItem } from '@youcan/ui-vue3';
</script>

<template>
  <div>
    <SettingsNavItem
      label="General"
      icon="i-youcan-gear"
      :active="true"
    />
    <SettingsNavItem
      label="Account"
      icon="i-youcan-user"
      :active="false"
    />
  </div>
</template>