sankalp
71b700388b
Enhances user experience with dark‑mode detection, responsive layout, and streamlined role selection workflow
39 lines
3.0 KiB
HTML
39 lines
3.0 KiB
HTML
<div class="flex justify-center">
|
|
<nav class="inline-flex items-center gap-1 rounded-xl bg-gray-100 dark:bg-gray-800 p-1 mb-2">
|
|
<button type="button" @click="{{ active_tab_var }} = 'statuses'"
|
|
:class="{{ active_tab_var }} === 'statuses' ? 'bg-white dark:bg-gray-950 shadow-sm text-gray-900 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
|
|
class="px-4 py-2 text-sm font-medium rounded-lg whitespace-nowrap transition-colors flex items-center gap-2">
|
|
Statuses
|
|
<span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-gray-200 dark:bg-gray-750 text-gray-500 dark:text-gray-400">{{ statuses|length }}</span>
|
|
</button>
|
|
|
|
<button type="button" @click="{{ active_tab_var }} = 'members'"
|
|
:class="{{ active_tab_var }} === 'members' ? 'bg-white dark:bg-gray-950 shadow-sm text-gray-900 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
|
|
class="px-4 py-2 text-sm font-medium rounded-lg whitespace-nowrap transition-colors flex items-center gap-2">
|
|
Members
|
|
<span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-gray-200 dark:bg-gray-750 text-gray-500 dark:text-gray-400">{{ members|length }}</span>
|
|
</button>
|
|
|
|
<button type="button" @click="{{ active_tab_var }} = 'epics'"
|
|
:class="{{ active_tab_var }} === 'epics' ? 'bg-white dark:bg-gray-950 shadow-sm text-gray-900 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
|
|
class="px-4 py-2 text-sm font-medium rounded-lg whitespace-nowrap transition-colors flex items-center gap-2">
|
|
Epics
|
|
<span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-gray-200 dark:bg-gray-750 text-gray-500 dark:text-gray-400">{{ epics|length }}</span>
|
|
</button>
|
|
|
|
<button type="button" @click="{{ active_tab_var }} = 'tickets'"
|
|
:class="{{ active_tab_var }} === 'tickets' ? 'bg-white dark:bg-gray-950 shadow-sm text-gray-900 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
|
|
class="px-4 py-2 text-sm font-medium rounded-lg whitespace-nowrap transition-colors flex items-center gap-2">
|
|
Tickets
|
|
<span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-gray-200 dark:bg-gray-750 text-gray-500 dark:text-gray-400">{{ tickets|length }}</span>
|
|
</button>
|
|
|
|
<button type="button" @click="{{ active_tab_var }} = 'notes'"
|
|
:class="{{ active_tab_var }} === 'notes' ? 'bg-white dark:bg-gray-950 shadow-sm text-gray-900 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
|
|
class="px-4 py-2 text-sm font-medium rounded-lg whitespace-nowrap transition-colors flex items-center gap-2">
|
|
Notes
|
|
<span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-gray-200 dark:bg-gray-750 text-gray-500 dark:text-gray-400">{{ notes|length }}</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|