Marketplace: change directory structure

src/components/settings/CreditsCard.astro

@@ -0,0 +1,19 @@
+--- 
+import { Image } from "astro:assets";
+import { type ImageMetadata } from "astro";
+const images = import.meta.glob<{ default: ImageMetadata }>(
+    '/src/assets/contribs/*.{jpeg,jpg,png,gif,webp}'
+);
+
+interface Props {
+    image: string;
+    name: string;
+    link: string;
+}
+
+const { image, name, link } = Astro.props;
+---
+<a class="rounded-md bg-navbar-color h-50 w-50 p-2 flex flex-col items-center" href={link} target="_blank" rel="noopener noreferrer">
+    <Image loading='lazy' class='w-32 h-32 object-cover rounded-md' src={images[image]()} alt={name} />
+    <p class="h-12 w-full text-text-color flex items-center justify-center text-xl font-semibold">{name}</p>
+</a>

src/layouts/SettingsLayout.astro

@@ -22,6 +22,9 @@ import { Icon } from "astro-icon/components";
       <SidebarButton title="Misc" route={`/${lang}/settings/misc`}>
         <Icon name="ph:gear" class="h-6 w-6 text-text-color transistion duration-500 group-hover:text-text-hover-color md:h-6 md:w=6" />
       </SidebarButton>
+      <SidebarButton title="Credits" route={`/${lang}/settings/credits`}>
+        <Icon name="ph:user" class="h-6 w-6 text-text-color transistion duration-500 group-hover:text-text-hover-color md:h-6 md:w=6" />
+      </SidebarButton>
     </div>
     <div class="p-8 md:w-10/12 overflow-y-auto">
       <p class="text-5xl font-semibold mb-5">{t("settings.settings")}</p>

src/pages/[lang]/settings/credits.astro

@@ -0,0 +1,34 @@
+---
+import InstalledThemes from "@components/catalog/InstalledThemes.svelte";
+import Layout from "@layouts/Layout.astro";
+import SettingsLayout from "@layouts/SettingsLayout.astro";
+import SettingsSection from "@layouts/SettingsSection.astro";
+import { Icon } from "astro-icon/components";
+import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+export function getStaticPaths() {
+    const STATIC_PATHS = [{ params: { lang: "en_US" } }, { params: { lang: "jp" } }];
+    return STATIC_PATHS;
+}
+export const prerender = true;
+import CreditsCard from "@components/settings/CreditsCard.astro";
+---
+
+<Layout title="Settings">
+  <SettingsLayout title="Credits">
+    <SettingsSection title="Site Developers & Maintainers" subtitle="Thank you to all of the devs and maintainers!">
+      <div class="flex flex-row flex-wrap gap-4 items-center roboto">
+        <div class="justify-center flex flex-row gap-6 flex-wrap md:justify-normal">
+            <CreditsCard image="/src/assets/contribs/rift.jpeg" name="Rifting" link="https://github.com/rifting" />
+            <CreditsCard image="/src/assets/contribs/motortruck1221.png" name="MotorTruck1221" link="https://motortruck1221.com" />
+        </div>
+      </div>
+    </SettingsSection>
+    <SettingsSection title="Tools & Project" subtitle="Nebula wouldn't be possible without these tools">
+        <div class="flex flex-row flex-wrap gap-6 items-center roboto"></div>
+    </SettingsSection>
+    <SettingsSection title="Translators" subtitle="Translations are made possible by these lovely individuals">
+    </SettingsSection>
+  </SettingsLayout>
+</Layout>