Tabs

<script setup lang="ts">import { ref } from 'vue'import { UiTabs, UiListItem, UiAvatar, UiList, UiSwitch } from 'grani' const pane = ref('overview') const twoFactor = ref(false) const SESSIONS = [  { title: 'MacBook Pro, Lisbon', when: 'This device' },  { title: 'iPhone 15, Lisbon', when: '2 hours ago' },  { title: 'Firefox on Windows, Porto', when: '3 days ago' },]</script> <template>  <UiTabs    v-model="pane"    class="w-full max-w-md"    ariaLabel="Account"    :tabs="[      { value: 'overview', label: 'Overview' },      {        value: 'security',        label: 'Security',        badge: '!',        badgeTone: 'danger',        badgeLabel: 'needs attention',      },      { value: 'sessions', label: 'Sessions', badge: 3, badgeLabel: '3 active' },    ]"  >    <template #header>      <UiListItem title="Anna Petrova" description="Second factor is off">        <template #media><UiAvatar name="Anna Petrova" size="md" /></template>      </UiListItem>    </template>    <template #overview>      <UiList>        <UiListItem title="Email" description="anna@northwind.example" />        <UiListItem title="Language" description="English" />      </UiList>    </template>    <template #security>      <UiList>        <UiListItem          as="label"          title="Second factor"          description="A code from an app at every sign-in."        >          <template #actions><UiSwitch v-model="twoFactor" /></template>        </UiListItem>      </UiList>    </template>    <template #sessions>      <UiList>        <UiListItem v-for="d in SESSIONS" :key="d.title" :title="d.title" :description="d.when" />      </UiList>    </template>  </UiTabs></template>