mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2026-09-25 11:30:42 +02:00
69 lines
1.2 KiB
Vue
69 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import type { ProjectIcon } from '@/types/projects.types';
|
|
|
|
type Props = {
|
|
icon: ProjectIcon;
|
|
size?: 'small' | 'medium' | 'large';
|
|
round?: boolean;
|
|
};
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
size: 'medium',
|
|
round: false,
|
|
});
|
|
</script>
|
|
<template>
|
|
<div :class="[$style.container, $style[props.size], { [$style.round]: props.round }]">
|
|
<N8nIcon
|
|
v-if="props.icon.type === 'icon'"
|
|
:icon="props.icon.value"
|
|
color="text-light"
|
|
></N8nIcon>
|
|
<N8nText v-else-if="icon.type === 'emoji'" color="text-light" :class="$style.emoji">
|
|
{{ icon.value }}
|
|
</N8nText>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" module>
|
|
.container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: var(--border-width-base) var(--border-style-base) var(--color-foreground-light);
|
|
border-radius: var(--border-radius-base);
|
|
|
|
&.round {
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.small {
|
|
width: var(--spacing-l);
|
|
height: var(--spacing-l);
|
|
|
|
.emoji {
|
|
font-size: var(--font-size-2xs);
|
|
}
|
|
}
|
|
|
|
.medium {
|
|
width: var(--spacing-xl);
|
|
height: var(--spacing-xl);
|
|
|
|
.emoji {
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
}
|
|
|
|
.large {
|
|
// Making this in line with user avatar size
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
.emoji {
|
|
font-size: var(--font-size-s);
|
|
}
|
|
}
|
|
</style>
|