initial

apps/client/components/formatted-date.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="formatted-date">
+    <p class="formatted-date__date">
+      {{ date }} <span class="formatted-date__time">{{ time }}</span>
+    </p>
+    <p class="formatted-date__zone">
+      (UTC+3)
+    </p>
+  </div>
+</template>
+
+<script setup>
+import dayjs from 'dayjs'
+
+const props = defineProps({
+  value: { type: String, required: true },
+})
+
+const dayObj = computed(() => dayjs(props.value))
+const date = computed(() => dayObj.value.format('DD.MM.YY'))
+const time = computed(() => dayObj.value.format('HH:mm'))
+</script>
+
+<style lang="scss">
+.formatted-date {
+  &__date {
+    @include txt-r-sb;
+
+    color: $clr-black;
+    white-space: nowrap;
+  }
+
+  &__time {
+    color: $clr-grey-400;
+  }
+
+  &__zone {
+    @include txt-s-m;
+
+    color: $clr-grey-500;
+    margin-top: 4px;
+  }
+}
+</style>