75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
import React from 'react';
|
||
|
||
interface LineItem {
|
||
label: string;
|
||
qty: number;
|
||
priceCents: number;
|
||
}
|
||
|
||
interface OrderSummaryProps {
|
||
lineItems: LineItem[];
|
||
subtotalCents: number;
|
||
taxCents: number;
|
||
totalCents: number;
|
||
}
|
||
|
||
const formatCurrency = (cents: number) => {
|
||
return new Intl.NumberFormat('de-DE', {
|
||
style: 'currency',
|
||
currency: 'EUR',
|
||
}).format(cents / 100);
|
||
};
|
||
|
||
export default function OrderSummary({
|
||
lineItems,
|
||
subtotalCents,
|
||
taxCents,
|
||
totalCents,
|
||
}: OrderSummaryProps) {
|
||
return (
|
||
<div className="w-full max-w-md mx-auto bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
|
||
<div className="p-4 border-b border-slate-100">
|
||
<h3 className="text-lg font-semibold text-slate-900">Bestellübersicht</h3>
|
||
</div>
|
||
|
||
<div className="p-4">
|
||
<table className="w-full text-sm text-left">
|
||
<thead>
|
||
<tr className="text-slate-500 border-b border-slate-100">
|
||
<th className="py-2 font-medium">Artikel</th>
|
||
<th className="py-2 text-right font-medium">Preis</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-slate-50">
|
||
{lineItems.map((item, idx) => (
|
||
<tr key={idx}>
|
||
<td className="py-3 text-slate-700">
|
||
<span className="font-medium mr-2">{item.qty}×</span>
|
||
{item.label}
|
||
</td>
|
||
<td className="py-3 text-right text-slate-700">
|
||
{formatCurrency(item.qty * item.priceCents)}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
|
||
<div className="mt-6 space-y-2 border-t border-slate-100 pt-4">
|
||
<div className="flex justify-between text-slate-600">
|
||
<span>Zwischensumme</span>
|
||
<span>{formatCurrency(subtotalCents)}</span>
|
||
</div>
|
||
<div className="flex justify-between text-slate-600">
|
||
<span>MwSt.</span>
|
||
<span>{formatCurrency(taxCents)}</span>
|
||
</div>
|
||
<div className="flex justify-between text-lg font-bold text-slate-900 pt-2">
|
||
<span>Gesamtbetrag</span>
|
||
<span>{formatCurrency(totalCents)}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
} |