PvDateTime

<script setup lang="ts">
import PvDateTime from "@/components/base/PvDateTime/PvDateTime.vue";
</script>

<template>
  <div
    class="container pv-stack-16 pv-border-top"
    :style="{
      'grid-template-columns': 'repeat(4, 1fr',
      'grid-template-rows': 'repeat(3, 1fr',
      height: '150px',
    }"
  >
    <span>PvDateTime</span>
    <span>UTC Time</span>
    <span>EDT Time</span>
    <span>Condensed Date</span>
    <span>XSmall</span>
    <PvDateTime
      class="pv-stack-16"
      :date="new Date()"
      variants="time"
      size="xs"
    />
    <PvDateTime
      class="pv-stack-16"
      :date="new Date()"
      variants="time"
      timezone="America/New_York"
      size="xs"
    />
    <PvDateTime
      class="pv-stack-16"
      :date="new Date()"
      variants="condensed"
      size="xs"
    />
    <span>Small</span>
    <PvDateTime class="pv-stack-16" :date="new Date()" variants="time" />
    <PvDateTime
      class="pv-stack-16"
      :date="new Date()"
      variants="time"
      timezone="America/New_York"
    />
    <PvDateTime class="pv-stack-16" :date="new Date()" variants="condensed" />
  </div>
</template>

<style>
.container {
  display: grid;
  gap: 10px;
  align-items: center;
  justify-items: center;
}
</style>