mirror of
https://github.com/nocodb/nocodb.git
synced 2026-05-01 19:07:01 +00:00
64 lines
1.2 KiB
Vue
64 lines
1.2 KiB
Vue
<script lang="ts" setup>
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
integrationItem: IntegrationItemType
|
|
size?: 'xs' | 'sm' | 'md' | 'lg'
|
|
}>(),
|
|
{
|
|
size: 'md',
|
|
},
|
|
)
|
|
const { size, integrationItem } = toRefs(props)
|
|
|
|
const pxSize = computed(() => {
|
|
switch (size.value) {
|
|
case 'xs':
|
|
return '16px'
|
|
case 'sm':
|
|
return '24px'
|
|
case 'md':
|
|
return '32px'
|
|
case 'lg':
|
|
return '48px'
|
|
}
|
|
})
|
|
const pxWrapperPadding = computed(() => {
|
|
switch (size.value) {
|
|
case 'xs':
|
|
return '8px'
|
|
case 'sm':
|
|
return '8px'
|
|
default:
|
|
return '10px'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="logo-wrapper"
|
|
:style="{
|
|
padding: pxWrapperPadding,
|
|
}"
|
|
>
|
|
<GeneralIcon
|
|
v-if="typeof integrationItem === 'string'"
|
|
:icon="integrationItem"
|
|
class="text-nc-content-inverted-secondary"
|
|
:style="{ width: pxSize, height: pxSize }"
|
|
/>
|
|
<component
|
|
:is="integrationItem.icon"
|
|
v-else-if="integrationItem.icon"
|
|
class="text-nc-content-inverted-secondary"
|
|
:style="{ width: pxSize, height: pxSize }"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.logo-wrapper {
|
|
@apply bg-nc-bg-gray-medium rounded-lg flex items-center justify-center;
|
|
}
|
|
</style>
|