48 lines
2.0 KiB
Vue
48 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import ProgressBar from 'primevue/progressbar';
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
storageUsed: number;
|
|
storageLimit: number;
|
|
}>();
|
|
|
|
const storagePercentage = computed(() =>
|
|
Math.min(Math.round((props.storageUsed / props.storageLimit) * 100), 100)
|
|
);
|
|
|
|
const formatBytes = (bytes: number) => {
|
|
if (bytes === 0) return '0 B';
|
|
const k = 1024;
|
|
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-white border border-gray-200 rounded-2xl p-6">
|
|
<h3 class="text-lg font-bold text-gray-900 mb-4">Account Status</h3>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<div class="flex justify-between text-sm mb-2">
|
|
<span class="text-gray-600">Storage Used</span>
|
|
<span class="font-bold text-gray-900">{{ storagePercentage }}%</span>
|
|
</div>
|
|
<ProgressBar :value="storagePercentage" :showValue="false" style="height: 6px"></ProgressBar>
|
|
<p class="text-xs text-gray-500 mt-2">{{ formatBytes(storageUsed) }} of {{ formatBytes(storageLimit) }} used</p>
|
|
</div>
|
|
<div class="bg-green-50 rounded-lg p-4 border border-green-100 flex items-start gap-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-green-600 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
|
|
<polyline points="22 4 12 14.01 9 11.01"/>
|
|
</svg>
|
|
<div>
|
|
<h4 class="font-bold text-green-800 text-sm">Account Active</h4>
|
|
<p class="text-green-600 text-xs mt-0.5">Your subscription is in good standing.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|