List Files | Just Commands | Repo | Logs

← back | Copy

<template>
  <div class="clock-container">
    <div class="clock-display">{{ formattedTime }}</div>
    <div class="clock-label">{{ label }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from "vue";

const props = withDefaults(defineProps<{
  label?: string;
  time?: string;
}>(), {
  label: "Time",
  time: ""
});

const currentTime = ref(new Date());
let timerInterval: number | null = null;

const formattedTime = computed(() => {
  // If time prop is provided, use it instead of current time
  if (props.time) {
    return props.time;
  }

  const hours = currentTime.value.getHours();
  const minutes = currentTime.value.getMinutes();

  const pad = (num: number) => String(num).padStart(2, "0");

  return `${pad(hours)}:${pad(minutes)}`;
});

const updateTime = () => {
  currentTime.value = new Date();
};

onMounted(() => {
  // Only start interval if no time prop is provided (for live clocks)
  if (!props.time) {
    timerInterval = window.setInterval(updateTime, 1000);
  }
});

onUnmounted(() => {
  if (timerInterval !== null) {
    window.clearInterval(timerInterval);
  }
});
</script>

<style scoped>
.clock-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 20px;
}

.clock-label {
  font-size: 22px;
  font-weight: 600;
  color: var(--ion-color-medium);
  font-variant: small-caps;
  text-align: center;
}

.clock-display {
  font-size: 43px;
  font-weight: 700;
  color: var(--ion-color-primary);
  font-variant: normal;
  font-family: "Courier New", Courier, monospace;
  letter-spacing: 4px;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .clock-container {
    gap: 12px;
  }

  .clock-label {
    font-size: 14px;
  }

  .clock-display {
    font-size: 34px;
  }
}
</style>