initial

apps/client/components/settings/limit-progress.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="block">
+    <span class="text-small">Spent</span>
+    <span class="text-small">Remaining limit </span>
+  </div>
+
+  <UiProgressBar class="progress" :progress="(amount / maxAmount) * 100" />
+
+  <div class="block">
+    <span class="text-amount">{{ amount }} <span class="text-currency">{{ currency }}</span></span>
+    <span class="text-amount">{{ maxAmount - amount }} <span class="text-currency">{{ currency }}</span> </span>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  currency: { type: String, required: true },
+  amount: { type: Number, required: true },
+  maxAmount: { type: Number, required: true },
+})
+</script>
+
+<style lang="scss" scoped>
+.block{
+  display: flex;
+  justify-content: space-between;
+}
+
+.progress{
+  margin-block: 8px;
+}
+
+.text-small {
+  @include txt-r;
+  color: $clr-grey-500;
+}
+
+.text-currency {
+  @include txt-i-sb;
+  color: $clr-grey-400;
+}
+.text-amount{
+  @include txt-i-sb;
+}
+</style>