AstralRinth/apps/frontend/src/pages/frog.vue

<script setup lang="ts">
import { useRelativeTime } from "@modrinth/ui";

const vintl = useVIntl();
const { formatMessage } = vintl;

const messages = defineMessages({
  frogTitle: {
    id: "frog.title",
    defaultMessage: "Frog",
  },
  frogDescription: {
    id: "frog",
    defaultMessage: "You've been frogged! 🐸",
  },
  frogAltText: {
    id: "frog.altText",
    defaultMessage: "A photorealistic painting of a frog labyrinth",
  },
  frogSinceOpened: {
    id: "frog.sinceOpened",
    defaultMessage: "This page was opened {ago}",
  },
  frogFroggedPeople: {
    id: "frog.froggedPeople",
    defaultMessage:
      "{count, plural, one {{count} more person} other {{count} more people}} were also frogged!",
  },
});

const formatCompactNumber = useCompactNumber();

const formatRelativeTime = useRelativeTime();

const pageOpen = useState("frogPageOpen", () => Date.now());
const peopleFrogged = useState("frogPeopleFrogged", () => Math.round(Math.random() * 100_000_000));
const peopleFroggedCount = computed(() => formatCompactNumber(peopleFrogged.value));

let interval: ReturnType<typeof setTimeout>;

const formattedOpenedCounter = ref(formatRelativeTime(Date.now()));

onMounted(() => {
  interval = setInterval(() => {
    formattedOpenedCounter.value = formatRelativeTime(pageOpen.value);
  }, 1000);
});

onUnmounted(() => clearInterval(interval));
</script>

<template>
  <div class="card">
    <h1>{{ formatMessage(messages.frogTitle) }}</h1>
    <p>{{ formatMessage(messages.frogDescription) }}</p>
    <img src="https://cdn.modrinth.com/frog.png" :alt="formatMessage(messages.frogAltText)" />
    <p>{{ formatMessage(messages.frogSinceOpened, { ago: formattedOpenedCounter }) }}</p>
    <p>{{ formatMessage(messages.frogFroggedPeople, { count: peopleFroggedCount }) }}</p>
  </div>
</template>

<style lang="scss" scoped>
.card {
  width: calc(100% - 2 * var(--spacing-card-md));
  max-width: 1280px;
  margin-inline: auto;
  text-align: center;
  box-sizing: border-box;
  margin-block: var(--spacing-card-md);
}

img {
  margin-block: 0 1.5rem;
  width: 60%;
  max-width: 40rem;
}
</style>