From e6ece32d74be95b2e456305fdb2953f18e800ff4 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 23:21:31 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feature:=20Added=20Hint=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/hint/VHint.vue | 54 +++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 src/components/hint/VHint.vue

diff --git a/src/components/hint/VHint.vue b/src/components/hint/VHint.vue
new file mode 100644
index 0000000..3edaf9d
--- /dev/null
+++ b/src/components/hint/VHint.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import Message from 'primevue/message';
+import type IVHint from './IVHint.type';
+import { computed } from 'vue';
+import styles from '@visua/typography.module.css';
+
+const props = withDefaults(defineProps<IVHint>(), {
+  title: '',
+  icon: false,
+  type: '',
+  disabled: false,
+})
+
+const iconClass = computed(() => {
+  switch (props.type) {
+    case 'alert': return 'ri-spam-fill';
+    case 'warning' : return 'ri-alert-fill';
+    case 'success' : return 'var(--text-default-success)';
+    case 'info': return 'ri-information-fill';
+    default:
+      return undefined;
+}
+});
+
+const severity = computed(() => {
+  switch (props.type) {
+    case 'alert': return 'error';
+    case 'warning' : return 'warn';
+    case 'success' : return 'success';
+    case 'info' : return 'info';
+    case 'active': return 'contrast'
+    default:
+      return 'secondary';
+  }
+});
+</script>
+
+<template>
+  <Message
+    variant="simple"
+    :severity="severity"
+    :class="[styles['text-body-XS-mention-text-Regular'], {'disabled': props.disabled }]"
+    :icon="props.icon ? iconClass: undefined"
+    :closable="false"
+    size="small"
+    role="alert"
+  >
+    {{ props.title }}
+  </Message>
+</template>
+
+<style scoped>
+.p-message.disabled {color: var(--text-disabled-grey);}
+</style>