Section Header

<template>  <section class="flex flex-col lg:flex-row w-full bg-white justify-between pb-5 border-b border-gray-200">    <div class="flex flex-col gap-y-1">      <div class="flex justify-between gap-x-2">        <p class="text-lg font-semibold text-gray-900">Team members</p>        <VDropdown right buttonWrapperClass="ml-1 lg:hidden">          <template #activator>              <VDropdownButton color="error" outlined>                <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />              </VDropdownButton>          </template>          <VDropdownItem text="Calendar" icon="mdi:calendar"/>          <VDropdownItem text="Files" icon="mdi:document" />          <VDropdownItem divider/>          <VDropdownItem text="Timer" icon="mdi:clock"/>        </VDropdown>      </div>      <p class="text-sm text-gray-600">        Manage your team members and their account permissions here.      </p>    </div>    <div class="flex flex-row gap-x-3 mt-4 lg:mt-0">      <VBtn text class="!hidden lg:!inline-flex">Tertiary</VBtn>      <VBtn color="secondary">Secondary</VBtn>      <VBtn class="!hidden lg:!inline-flex">Default</VBtn>      <VBtn color="primary">Primary</VBtn>      <VDropdown right buttonWrapperClass="ml-1 hidden lg:flex">        <template #activator>            <VDropdownButton color="error" outlined>              <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />            </VDropdownButton>        </template>        <VDropdownItem text="Calendar" icon="mdi:calendar"/>        <VDropdownItem text="Files" icon="mdi:document" />        <VDropdownItem divider/>        <VDropdownItem text="Timer" icon="mdi:clock"/>      </VDropdown>    </div>  </section></template>

<template>  <section class="flex flex-col lg:flex-row w-full bg-white justify-between pb-5 border-b border-gray-200">    <div class="flex flex-col gap-y-1">      <p class="text-lg font-semibold text-gray-900">Team members</p>      <p class="text-sm text-gray-600">        Manage your team members and their account permissions here.      </p>    </div>    <div class="flex flex-row gap-x-3 mt-4 lg:mt-0">      <VInput placeholder="Search" prepend-icon="ri:search-line" wrapper-class="w-full lg:w-fit" />    </div>  </section></template>

<template>  <section class="flex flex-col lg:flex-row w-full bg-white justify-between pb-5 border-b border-gray-200">    <div class="flex flex-col gap-y-1">      <div class="flex justify-between gap-x-2">        <p class="text-lg font-semibold text-gray-900">Team members</p>        <VDropdown right buttonWrapperClass="ml-1 lg:hidden">          <template #activator>              <VDropdownButton color="error" outlined>                <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />              </VDropdownButton>          </template>          <VDropdownItem text="Calendar" icon="mdi:calendar"/>          <VDropdownItem text="Files" icon="mdi:document" />          <VDropdownItem divider/>          <VDropdownItem text="Timer" icon="mdi:clock"/>        </VDropdown>      </div>      <p class="text-sm text-gray-600">        Manage your team members and their account permissions here.      </p>    </div>    <div class="flex flex-row gap-x-3 mt-4 lg:mt-0">      <VBtnGroup>        <VBtn>Text</VBtn>        <VBtn>Text</VBtn>        <VBtn>Text</VBtn>      </VBtnGroup>      <VDropdown right buttonWrapperClass="ml-1 hidden lg:flex">        <template #activator>            <VDropdownButton color="error" outlined>              <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />            </VDropdownButton>        </template>        <VDropdownItem text="Calendar" icon="mdi:calendar"/>        <VDropdownItem text="Files" icon="mdi:document" />        <VDropdownItem divider/>        <VDropdownItem text="Timer" icon="mdi:clock"/>      </VDropdown>    </div>  </section></template>

<script setup lang="ts">const list = [  {    text: 'My details',  }, {    text: 'Profile',  }, {    text: 'Password',  }, {    text: 'Team',  }, {    text: 'Plan',  }, {    text: 'Billing',  }, {    text: 'Email',  }, {    text: 'Notifications',    value: 2,  }, {    text: 'Integrations',  }, {    text: 'API',  }]</script><template>  <section class="flex flex-col w-full bg-white pb-5 border-b border-gray-200">    <div class="flex flex-col lg:flex-row w-full justify-between">      <div class="flex flex-col gap-y-1">        <div class="flex justify-between gap-x-2">          <p class="text-lg font-semibold text-gray-900">Team members</p>          <VDropdown right buttonWrapperClass="ml-1 lg:hidden">            <template #activator>                <VDropdownButton color="error" outlined>                  <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />                </VDropdownButton>            </template>              <VDropdownItem text="Calendar" icon="mdi:calendar"/>            <VDropdownItem text="Files" icon="mdi:document" />            <VDropdownItem divider/>            <VDropdownItem text="Timer" icon="mdi:clock"/>          </VDropdown>        </div>        <p class="text-sm text-gray-600">          Manage your team members and their account permissions here.        </p>      </div>      <div class="flex flex-row gap-x-3 mt-4 lg:mt-0">        <VBtn text class="!hidden lg:!inline-flex">Tertiary</VBtn>        <VBtn color="secondary">Secondary</VBtn>        <VBtn class="!hidden lg:!inline-flex">Default</VBtn>        <VBtn color="primary">Primary</VBtn>        <VDropdown right buttonWrapperClass="ml-1 hidden lg:flex">          <template #activator>              <VDropdownButton color="error" outlined>                <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />              </VDropdownButton>          </template>            <VDropdownItem text="Calendar" icon="mdi:calendar"/>          <VDropdownItem text="Files" icon="mdi:document" />          <VDropdownItem divider/>          <VDropdownItem text="Timer" icon="mdi:clock"/>        </VDropdown>      </div>    </div>    <VTabs      :items="list"      hideSlider      wrapperClass="!hidden lg:!flex !bg-gray-50 !p-1 mt-5"      defaultClass="!p-0"      :style="{        '--v-tabs-item-active-bg-color': 'white',        '--v-tabs-item-hover-bg-color': 'white',      }"    >      <template v-slot:item="{index, item, value, active}">        <div class="flex px-3 py-2 hover:rounded-md hover:shadow-sm" :class="active && 'rounded-md shadow-sm'">          <p class="text-sm font-semibold hover:text-gray-700" :class="active ? 'text-gray-700' : 'text-gray-500'">            {{ item.text }}          </p>          <div v-if="item.value" class="flex justify-center items-center w-6 h-6 rounded-full bg-gray-100 ml-2">            <p class="text-xs font-medium text-gray-700">              {{ item.value }}            </p>          </div>        </div>      </template>    </VTabs>    <VDropdown left buttonWrapperClass="lg:hidden mt-5">      <template #activator>          <VDropdownButton as="button" class="w-full flex justify-between items-center border border-gray-300 px-4 h-11 rounded-md">            <p class="text-sm font-medium text-gray-900">My Details</p>            <VIcon name="mdi:chevron-down" class="text-gray-500" />          </VDropdownButton>      </template>      <VDropdownItem v-for="item in list" :key="item.text" :text="item.text"/>    </VDropdown>  </section></template>

<script setup lang="ts">const list = [  {    text: 'My details',  }, {    text: 'Profile',  }, {    text: 'Password',  }, {    text: 'Team',  }, {    text: 'Plan',  }, {    text: 'Billing',  }, {    text: 'Email',  }, {    text: 'Notifications',    value: 2,  }, {    text: 'Integrations',  }, {    text: 'API',  }]</script><template>  <section class="flex flex-col w-full bg-white pb-5 border-b border-gray-200">    <div class="flex flex-col lg:flex-row w-full justify-between">      <div class="flex flex-col gap-y-1">        <p class="text-lg font-semibold text-gray-900">Team members</p>        <p class="text-sm text-gray-600">          Manage your team members and their account permissions here.        </p>      </div>      <div class="flex mt-4 lg:mt-0">        <VInput          placeholder="Search"          prependIcon="ri:search-line"          prependIconSize="20"          wrapperClass="!w-full"        />      </div>    </div>    <VTabs      :items="list"      hideSlider      wrapperClass="!hidden lg:!flex !bg-gray-50 !p-1 mt-5"      defaultClass="!p-0"      :style="{        '--v-tabs-item-active-bg-color': 'white',        '--v-tabs-item-hover-bg-color': 'white',      }"    >      <template v-slot:item="{index, item, value, active}">        <div class="flex px-3 py-2 hover:rounded-md hover:shadow-sm" :class="active && 'rounded-md shadow-sm'">          <p class="text-sm font-semibold hover:text-gray-700" :class="active ? 'text-gray-700' : 'text-gray-500'">            {{ item.text }}          </p>          <div v-if="item.value" class="flex justify-center items-center w-6 h-6 rounded-full bg-gray-100 ml-2">            <p class="text-xs font-medium text-gray-700">              {{ item.value }}            </p>          </div>        </div>      </template>    </VTabs>    <VDropdown left buttonWrapperClass="lg:hidden mt-5">      <template #activator>          <VDropdownButton as="button" class="w-full flex justify-between items-center border border-gray-300 px-4 h-11 rounded-md">            <p class="text-sm font-medium text-gray-900">My Details</p>            <VIcon name="mdi:chevron-down" class="text-gray-500" />          </VDropdownButton>      </template>      <VDropdownItem v-for="item in list" :key="item.text" :text="item.text"/>    </VDropdown>  </section></template>

<script setup lang="ts">const list = [  {    text: 'My details',  }, {    text: 'Profile',  }, {    text: 'Password',  }, {    text: 'Team',  }, {    text: 'Plan',  }, {    text: 'Billing',  }, {    text: 'Email',  }, {    text: 'Notifications',    value: 2,  }, {    text: 'Integrations',  }, {    text: 'API',  }]</script><template>  <section class="flex flex-col w-full bg-white pb-5 border-b border-gray-200">    <div class="flex flex-col lg:flex-row w-full justify-between">      <div class="flex flex-col gap-y-1">        <div class="flex justify-between gap-x-2">          <p class="text-lg font-semibold text-gray-900">Team members</p>          <VDropdown right buttonWrapperClass="ml-1 lg:hidden">            <template #activator>                <VDropdownButton color="error" outlined>                  <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />                </VDropdownButton>            </template>              <VDropdownItem text="Calendar" icon="mdi:calendar"/>            <VDropdownItem text="Files" icon="mdi:document" />            <VDropdownItem divider/>            <VDropdownItem text="Timer" icon="mdi:clock"/>          </VDropdown>        </div>        <p class="text-sm text-gray-600">          Manage your team members and their account permissions here.        </p>      </div>      <div class="flex flex-row gap-x-3 mt-4 lg:mt-0">        <VBtnGroup>          <VBtn>Text</VBtn>          <VBtn>Text</VBtn>          <VBtn>Text</VBtn>        </VBtnGroup>        <VDropdown right buttonWrapperClass="ml-1 hidden lg:flex">          <template #activator>              <VDropdownButton color="error" outlined>                <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />              </VDropdownButton>          </template>            <VDropdownItem text="Calendar" icon="mdi:calendar"/>          <VDropdownItem text="Files" icon="mdi:document" />          <VDropdownItem divider/>          <VDropdownItem text="Timer" icon="mdi:clock"/>        </VDropdown>      </div>    </div>    <VTabs      :items="list"      hideSlider      wrapperClass="!hidden lg:!flex !bg-gray-50 !p-1 mt-5"      defaultClass="!p-0"      :style="{        '--v-tabs-item-active-bg-color': 'white',        '--v-tabs-item-hover-bg-color': 'white',      }"    >      <template v-slot:item="{index, item, value, active}">        <div class="flex px-3 py-2 hover:rounded-md hover:shadow-sm" :class="active && 'rounded-md shadow-sm'">          <p class="text-sm font-semibold hover:text-gray-700" :class="active ? 'text-gray-700' : 'text-gray-500'">            {{ item.text }}          </p>          <div v-if="item.value" class="flex justify-center items-center w-6 h-6 rounded-full bg-gray-100 ml-2">            <p class="text-xs font-medium text-gray-700">              {{ item.value }}            </p>          </div>        </div>      </template>    </VTabs>    <VDropdown left buttonWrapperClass="lg:hidden mt-5">      <template #activator>          <VDropdownButton as="button" class="w-full flex justify-between items-center border border-gray-300 px-4 h-11 rounded-md">            <p class="text-sm font-medium text-gray-900">My Details</p>            <VIcon name="mdi:chevron-down" class="text-gray-500" />          </VDropdownButton>      </template>      <VDropdownItem v-for="item in list" :key="item.text" :text="item.text"/>    </VDropdown>  </section></template>