CRM_Montzar/apps/web/src/components/brand/MentoLogo.vue

<script setup lang="ts">
import { brand } from '@mento/shared';

withDefaults(
  defineProps<{
    size?: number;
    showText?: boolean;
    variant?: 'full' | 'mark';
  }>(),
  {
    size: 40,
    showText: true,
    variant: 'full',
  },
);
</script>

<template>
  <div class="brand-logo" :class="variant">
    <img
      class="mark"
      :src="brand.logo"
      :alt="brand.name"
      :style="{ width: `${size}px`, height: `${size}px` }"
    />
    <div v-if="showText && variant === 'full'" class="text">
      <strong>{{ brand.name }}</strong>
      <small>by {{ brand.company }}</small>
    </div>
  </div>
</template>

<style scoped>
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.mark {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  background: transparent;
}

.text {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.text strong {
  font-size: 1.08rem;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.1;
  font-weight: 600;
}

.text small {
  color: #94a3b8;
  font-size: 0.72rem;
}
</style>