37 lines
966 B
Vue
37 lines
966 B
Vue
<script lang='ts' setup>
|
|
import type { PropType } from "vue";
|
|
|
|
type Active = "buy" | "sell";
|
|
|
|
const active = defineModel<Active>("active", { type: String as PropType<Active>, default: "buy" });
|
|
const { t } = useI18n();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<div class="btn" :class="[active === 'buy' && 'buy']" @click="active = 'buy'">
|
|
{{ t('trade.buy') }}
|
|
</div>
|
|
<div class="btn" :class="[active === 'sell' && 'sell']" @click="active = 'sell'">
|
|
{{ t('trade.sell') }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang='css' scoped>
|
|
@reference "tailwindcss";
|
|
|
|
.container {
|
|
@apply flex rounded-full overflow-hidden p-0.5 bg-(--ion-color-faint);
|
|
}
|
|
.btn {
|
|
@apply flex-1 text-center py-0.5 cursor-pointer select-none text-sm font-medium rounded-full transition-all text-(--ion-text-color-step-550);
|
|
}
|
|
.btn.buy {
|
|
@apply bg-(--ion-color-success-tint) text-white;
|
|
}
|
|
.btn.sell {
|
|
@apply bg-(--ion-color-danger-tint) text-white;
|
|
}
|
|
</style>
|