---
import Card from "@components/UI/Card.astro";
import { i18n } from "@i18n/utils";
const t = i18n.inferLangUseTranslations(Astro.url);
---

<div class="settings-container">
  <div class="credits-container">
    <Card title={t("ultraviolet")} href="https://titaniumnetwork.org"> Titanium Network </Card>
    <Card title={t("settings.credits.esTranslations")} href="https://github.com/builtbyvys/"> vys </Card>
    <Card title={t("settings.credits.frTranslations")} href="https://github.com/notboeing747"> notboeing747 </Card>
    <Card title={t("settings.credits.jpTranslations")} href="https://wearr.dev"> wearr </Card>
    <Card title={t("settings.credits.ptTranslations")}> kersosina_ </Card>
    <Card title={t("settings.credits.ruTranslations")} href="https://3kh0.net"> Echo </Card>
    <Card title={t("settings.credits.zhTranslations")} href="https://3kh0.net"> Echo </Card>
    <Card title={t("settings.credits.catppuccin")} href="https://github.com/catppuccin/catppuccin"> Catppuccin </Card>
    <Card title="Wisp Server" href="https://github.com/MercuryWorkshop/wisp-server-node"> Mercury Workshop </Card>
  </div>
</div>

<style>
  .credits-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    width: 100%;
    gap: 10px;
  }
  .credit-item {
    font-size: 20px;
    margin: 10px 0 10px;
  }
  .credit-name {
    min-width: 150px;
  }
</style>
