74 lines
1.2 KiB
Vue
74 lines
1.2 KiB
Vue
<template>
|
|
<div
|
|
class="currency-name"
|
|
:class="`currency-name--${size}`"
|
|
>
|
|
<UiCoin
|
|
class="currency-name__coin"
|
|
:code="code"
|
|
/>
|
|
|
|
<span
|
|
v-if="size !== 'small'"
|
|
class="currency-name__name"
|
|
>
|
|
{{ name || code }}
|
|
</span>
|
|
<span class="currency-name__code">{{ code }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
export interface Props {
|
|
code: string
|
|
name?: string
|
|
size?: 'small' | 'medium'
|
|
}
|
|
|
|
defineOptions({
|
|
name: 'CurrencyName',
|
|
})
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
size: 'medium',
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.currency-name {
|
|
&--medium {
|
|
display: grid;
|
|
grid-template-columns: 32px auto;
|
|
gap: var(--currency-name-gap, 4px 8px);
|
|
align-items: center;
|
|
}
|
|
|
|
&--small {
|
|
--coin-size: 20px;
|
|
|
|
display: inline-flex;
|
|
vertical-align: middle;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: var(--currency-name-gap, 4px);
|
|
}
|
|
|
|
&__coin {
|
|
grid-column: 1;
|
|
grid-row: span 2;
|
|
}
|
|
|
|
&__name {
|
|
@include txt-r-sb('currency-name');
|
|
|
|
color: $clr-black;
|
|
}
|
|
|
|
&__code {
|
|
@include txt-s-m('currency-name-code');
|
|
|
|
color: $clr-grey-500;
|
|
}
|
|
}
|
|
</style>
|