File size: 1,025 Bytes
b86d7f0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<script setup lang="ts">
interface Customer {
name: string;
freight: number;
}
const props = defineProps<{
topCustomers: Customer[];
title: string;
}>();
console.log("TopCustomerList props: ", props.topCustomers.length);
</script>
<template>
<div class="bg-white p-6 rounded-2xl shadow-md">
<h2 class="text-xl font-semibold mb-4">{{title}}</h2>
<div class="overflow-x-auto">
<table class="w-full text-left table-auto">
<thead class="text-gray-600 border-b">
<tr>
<th class="pb-2">Customer</th>
<th class="pb-2">Total Freight</th>
</tr>
</thead>
<tbody>
<tr v-for="customer in props.topCustomers" :key="customer.name" class="border-t hover:bg-gray-50">
<td class="py-2">{{ customer.name }}</td>
<td class="py-2 text-green-600 font-semibold">${{ customer.freight.toFixed(2) }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template> |