160 lines
3.0 KiB
Vue
160 lines
3.0 KiB
Vue
<template>
|
|
<div class="monaco-logo" :class="sizeClass">
|
|
<v-img
|
|
:src="logoSrc"
|
|
:width="logoWidth"
|
|
:height="logoHeight"
|
|
class="logo-img"
|
|
alt="MonacoUSA Logo"
|
|
:style="logoStyle"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
size?: 'small' | 'medium' | 'large'
|
|
variant?: 'default' | 'white' | 'dark'
|
|
clickable?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
size: 'medium',
|
|
variant: 'default',
|
|
clickable: false
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
click: []
|
|
}>();
|
|
|
|
// Computed properties for responsive sizing
|
|
const sizeClass = computed(() => `monaco-logo--${props.size}`);
|
|
|
|
const logoSrc = computed(() => {
|
|
// Use the high-res Monaco flag image
|
|
return '/MONACOUSA-Flags_376x376.png';
|
|
});
|
|
|
|
const logoWidth = computed(() => {
|
|
switch (props.size) {
|
|
case 'small': return 32;
|
|
case 'medium': return 48;
|
|
case 'large': return 80;
|
|
default: return 48;
|
|
}
|
|
});
|
|
|
|
const logoHeight = computed(() => {
|
|
switch (props.size) {
|
|
case 'small': return 32;
|
|
case 'medium': return 48;
|
|
case 'large': return 80;
|
|
default: return 48;
|
|
}
|
|
});
|
|
|
|
const logoStyle = computed(() => {
|
|
const baseStyle: Record<string, string> = {
|
|
borderRadius: '8px',
|
|
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
|
|
};
|
|
|
|
if (props.clickable) {
|
|
baseStyle.cursor = 'pointer';
|
|
baseStyle.transition = 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out';
|
|
}
|
|
|
|
if (props.variant === 'white') {
|
|
baseStyle.backgroundColor = 'white';
|
|
baseStyle.padding = '4px';
|
|
} else if (props.variant === 'dark') {
|
|
baseStyle.backgroundColor = 'rgba(0, 0, 0, 0.1)';
|
|
baseStyle.padding = '4px';
|
|
}
|
|
|
|
return baseStyle;
|
|
});
|
|
|
|
// Handle click events
|
|
const handleClick = () => {
|
|
if (props.clickable) {
|
|
emit('click');
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.monaco-logo {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.monaco-logo--small {
|
|
min-width: 32px;
|
|
min-height: 32px;
|
|
}
|
|
|
|
.monaco-logo--medium {
|
|
min-width: 48px;
|
|
min-height: 48px;
|
|
}
|
|
|
|
.monaco-logo--large {
|
|
min-width: 80px;
|
|
min-height: 80px;
|
|
}
|
|
|
|
.logo-img {
|
|
object-fit: cover;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.monaco-logo:hover .logo-img {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 4px 16px rgba(163, 21, 21, 0.2);
|
|
}
|
|
|
|
/* Ensure the logo maintains aspect ratio */
|
|
.v-img {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Animation for clickable logos */
|
|
.monaco-logo[style*="cursor: pointer"]:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.monaco-logo[style*="cursor: pointer"]:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Accessibility improvements */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.logo-img,
|
|
.monaco-logo {
|
|
transition: none !important;
|
|
transform: none !important;
|
|
}
|
|
}
|
|
|
|
/* High contrast mode support */
|
|
@media (prefers-contrast: high) {
|
|
.logo-img {
|
|
border: 2px solid currentColor;
|
|
}
|
|
}
|
|
|
|
/* Print styles */
|
|
@media print {
|
|
.monaco-logo {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.logo-img {
|
|
transform: none !important;
|
|
}
|
|
}
|
|
</style>
|