Some checks failed
Auto Tag Develop / tag (push) Has been cancelled
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #53 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
36 lines
939 B
Vue
36 lines
939 B
Vue
<template>
|
|
<div class="flex justify-evenly gap-y-8 gap-x-41 mb-10 border-b border-primary-500/60">
|
|
<h1
|
|
v-for="tab in tabs"
|
|
:key="tab.key"
|
|
class="font-bold text-3xl uppercase px-12 cursor-pointer"
|
|
:class="[
|
|
modelValue === tab.key
|
|
? 'border-b-[6px] border-primary-500 text-primary-500'
|
|
: 'text-primary-500/50',
|
|
tab.error ? '!text-red-500 !border-red-500' : ''
|
|
]"
|
|
@click="emit('update:modelValue', tab.key)"
|
|
>
|
|
{{ tab.label }}
|
|
</h1>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" generic="T extends string">
|
|
export interface UiTab<K extends string = string> {
|
|
key: K
|
|
label: string
|
|
error?: boolean
|
|
}
|
|
|
|
defineProps<{
|
|
modelValue: T
|
|
tabs: UiTab<T>[]
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: T): void
|
|
}>()
|
|
</script>
|