simrsx-fe/app/components/pub/my-ui/alert/warning-alert.vue

<script setup lang="ts">
import { cn } from '~/lib/utils';

const props = withDefaults(defineProps<{
  text?: string
  description?: string | string[]
  class?: string
}>(), {

})
</script>

<template>
    <div :class="cn('flex items-center gap-4 p-3 rounded-md text-orange-500 border border-orange-400 bg-orange-50',
        props.class
    )">
        <Icon name="i-lucide-triangle-alert" class="h-12 w-12 align-middle transition-colors" />
        <div class="">
            <p class="font-medium text-base">{{text}}</p>
            <ul class="list-disc list-inside">
                <li v-for="(desc, index) in (Array.isArray(description) ? description : [description])" :key="index">
                    {{ desc }}
                </li>
            </ul>
        </div>
    </div>
</template>