site_logiciels/components/Layout/UI/SubTitle.vue

<template>
  <LayoutContainer>
    <div class="title-container">
      <v-icon
        :size="iconSize"
        :style="{ color: iconColor }"
        :class="iconClasses"
      />
      <h4 class="presentation-title" :style="{ color: titleColor }">
        {{ titleText }}
      </h4>
    </div>
  </LayoutContainer>
</template>

<script setup>
const router = useRouter();

const iconColor = ref("#2093BE4D");

const updateIconColor = computed(() => {
  const path = router.currentRoute.value.path;

  if (/^\/opentalent_school\/?$/.test(path)) {
    return "#2093BE4D";
  } else if (/^\/opentalent_artist\/?$/.test(path)) {
    return "#FAC20A";
  } else if (/^\/opentalent_manager\/?$/.test(path)) {
    return "#D8050B";
  } else {
    return "#9edbdd";
  }
});

watch(
  () => router.currentRoute.value,
  () => {
    iconColor.value = updateIconColor.value;
  },
  { immediate: true }
);

const props = defineProps({
  iconSize: {
    type: [String, Number],
    default: 5,
  },
  iconClasses: {
    type: String,
    default: "fa-solid fa-circle icon-title",
  },
  titleText: {
    type: String,
    default: "default title",
  },
  iconColor: {
    type: String,
  },
  titleColor: {
    type: String,
    default: "#071b1f",
  },
});
</script>

<style scoped>
.title-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1rem;
  color: #071b1f;
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.presentation-title {
  font-weight: 500;
  color: var(--Vert-90, #0E2D32); 

  font-size: 1rem;
  line-height: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
</style>