Make CatalogCard not use Svelte

src/components/catalog/CatalogCard.astro

@@ -0,0 +1,58 @@
+---
+interface Props {
+    page: number | string | undefined;
+    lang: string;
+}
+interface Asset {
+    title: string;
+    description: string;
+    author: string;
+    image: string;
+    tags: [];
+    version: string;
+    background_image: string | null;
+    background_video: string | null;
+    payload: string;
+    type: "theme" | "plugin-sw" | "plugin-page";
+}
+const { page, lang } = Astro.props;
+const getAssets = async () => {
+    const res = await fetch(new URL(`/api/catalog-assets?page=${page}`, Astro.url));
+    const data = await res.json();
+    return data.assets;
+};
+const assets = await getAssets();
+---
+<div class="text-3xl font-roboto font-bold text-text-color p-10">
+    {Object.keys(assets).length > 0 && (
+        <div class="flex flex-row gap-6 flex-wrap justify-center">
+            {Object.entries(assets).map((asset) => {
+                const pName = asset[0];
+                const a = asset[1] as unknown as Asset;
+                return (
+                    <a href={`/${lang}/catalog/package/${pName}`}>
+                            <div class="bg-navbar-color w-64 rounded-3xl shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105 text-text-color">
+                                <img src={`/packages/${pName}/${a.image}`} alt={a.title} class="w-full h-40 object-cover" />
+                                <div class="p-6 text-sm">
+                                    <p class="font-semibold text-2xl mb-2"> {a.title} </p>
+                                    <p class="mb-4"> {a.description} </p>
+                                    <div class="flex flex-wrap gap-2 mb-4 w-full">
+                                        {a.tags.map((tag) => (
+                                            <p class="bg-navbar-text-color text-navbar-color font-bold px-3 py-1 rounded-md text-center"> { tag } </p>
+                                        ))}
+                                    </div>
+                                    <p> 
+                                        <strong>Version: </strong> { a.version } 
+                                    </p>
+                                    <p> 
+                                        <strong>Type: </strong> { a.type === "plugin-page" || a.type === "plugin-sw" ? "plugin" : a.type } 
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    )
+                }
+            )}
+        </div>
+    )}
+</div>

src/pages/[lang]/catalog/[...page].astro

@@ -1,5 +1,5 @@
 ---
-import CatalogCard from "@components/catalog/CatalogCard.svelte";
+import CatalogCard from "@components/catalog/CatalogCard.astro";
 import Layout from "@layouts/Layout.astro";
 import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
 import Pagnation from "./pagnation.astro";
@@ -22,7 +22,7 @@ const lastPage = assetsJson.pages;
           <h1 class="text-3xl md:text-5xl font-bold"> Nebula Catalog </h1>
           <p class="text-l md:text-xl max-md:text-center max-md:p-2"> The Nebula Catalog is a place for you to find user-created themes and plugins. </p>
       </div>
-      <CatalogCard client:only="svelte" page={page} lang={lang} />
+      <CatalogCard page={page} lang={lang} />
     <div class="flex flex-row pb-8 gap-4 font-roboto">
       {/* The first page. If the user is on this page, or the one after it, don't show it. */}
       {parseInt(page!) > 2 && (