Order summary with separators

<script setup lang="ts">
import { Separator } from "@/components/ui/separator"
</script>

<template>
  <div class="mx-auto flex w-full max-w-xs flex-col gap-2 text-sm">
    <p class="font-medium">Order Summary</p>
    <Separator />
    <dl class="flex items-center justify-between">
      <dt class="text-muted-foreground">Subtotal</dt>
      <dd>$49.00</dd>
    </dl>
    <dl class="flex items-center justify-between">
      <dt class="text-muted-foreground">Discount</dt>
      <dd class="text-success">-$5.00</dd>
    </dl>
    <dl class="flex items-center justify-between">
      <dt class="text-muted-foreground">Tax</dt>
      <dd>$3.52</dd>
    </dl>
    <Separator />
    <dl class="flex items-center justify-between font-medium">
      <dt>Total</dt>
      <dd>$47.52</dd>
    </dl>
  </div>
</template>