Messages

{
  "@vitnode/blog": {
    "welcome": "Welcome back, {name}!",
    "articles_count": "{count, plural, =0 {No articles} one {1 article} other {# articles}}",
    "terms_notice": "By clicking continue, you agree to our <link>Terms of Service</link>."
  }
}

import { useTranslations } from "use-intl"
import { HrefLink } from "@vitnode/core/tanstack/link"

export const BlogHeader = ({ count, name }: { count: number; name: string }) => {
  const t = useTranslations("@vitnode/blog")

  return (
    <header className="flex flex-col gap-2">
      <h1>{t("welcome", { name })}</h1>
      <p>{t("articles_count", { count })}</p>

      {/* Rich text with custom tags */}
      <small className="text-muted-foreground">
        {t.rich("terms_notice", {
          link: (chunks) => <HrefLink className="underline" href="/terms">{chunks}</HrefLink>,
        })}
      </small>
    </header>
  )
}

{
  "price": "Total: {amount, number, ::currency/USD}",
  "date": "Published on {date, date, medium}"
}

{
  "unread": "{count, plural, =0 {No unread messages} one {1 unread message} other {# unread messages}}"
}

{
  "status": "{status, select, draft {Draft} published {Published} other {Archived}}"
}