LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat(v4): Update the help center portal design (#10296)

Browse Source 
Co-authored-by: Pranav <pranavrajs@gmail.com>
This commit is contained in:
Sivin Varghese
2024-10-24 10:39:36 +05:30
committed by GitHub
parent 6d3ecfe3c1
commit a3855a8d1d
144 changed files with 6376 additions and 6604 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/javascript/dashboard/components-next/tabbar/TabBar.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { ref } from 'vue';
import { computed } from 'vue';
const props = defineProps({
initialActiveTab: {
type: Number,
@@ -10,17 +10,22 @@ const props = defineProps({
required: true,
validator: value => {
return value.every(
tab => typeof tab.label === 'string' && typeof tab.count === 'number'
tab =>
typeof tab.label === 'string' &&
(tab.count ? typeof tab.count === 'number' : true)
);
},
},
});
const emit = defineEmits(['tabChanged']);
const activeTab = ref(props.initialActiveTab);
const activeTab = computed(() => props.initialActiveTab);
const selectTab = index => {
activeTab.value = index;
emit('tabChanged', props.tabs[index]);
};
const showDivider = index => {
return (
// Show dividers after the active tab, but not after the last tab
@@ -32,14 +37,14 @@ const showDivider = index => {
</script>
<template>
<div class="flex h-8 rounded-lg bg-slate-25 dark:bg-slate-800/50 w-fit">
<div class="flex h-8 rounded-lg bg-n-solid-1 w-fit">
<template v-for="(tab, index) in tabs" :key="index">
<button
class="relative px-4 truncate py-1.5 text-sm border-0 rounded-lg transition-colors duration-300 ease-in-out"
class="relative px-4 truncate py-1.5 text-sm border-0 rounded-lg transition-colors duration-300 ease-in-out hover:text-n-brand"
:class="[
activeTab === index
? 'text-woot-500 bg-woot-500/10 dark:bg-woot-500/10'
: 'text-slate-500 dark:text-slate-400 hover:text-woot-500 dark:hover:text-woot-400',
? 'text-n-brand bg-n-solid-active font-medium'
: 'text-n-slate-10',
]"
@click="selectTab(index)"
>