astro.config.mjs

@@ -14,15 +14,6 @@ export default defineConfig({
   }),
 
   vite: {
-    plugins: [tailwindcss()],
-    server: {
-      proxy: {
-        '/api': {
-          target: 'http://localhost:8080',
-          changeOrigin: true,
-          rewrite: (path) => path.replace(/^\/api/, '/api'),
-        },
-      }
-    }
+    plugins: [tailwindcss()]
   }
 });

src/components/Card/OverviewCard.astro

@@ -1,18 +0,0 @@
----
-import client from "@/data/pocketbase"
-const { recipe } = Astro.props;
-
-const headerImage = await client.collection("images").getOne(recipe.images[0])
-const image = await client.files.getURL(headerImage, headerImage.image)
----
-
-<div class="relative z-0 flex h-60">
-    <img
-        class="w-full h-full object-cover rounded-xl"
-        src={ image }
-    />
-
-    <div class="absolute bottom-0 left-0 w-full p-2 h-25 backdrop-filter backdrop-blur-lg rounded-b-xl">
-        <p class="text-[14pt] text-white opacity-90 font-bold" >{recipe.name}</p>
-    </div>
-</div>

src/data/pocketbase.ts

@@ -1,5 +1,4 @@
 import Pocketbase from "pocketbase"
 
-const client = new Pocketbase(import.meta.env.PUBLIC_URL)
-export default client;
+export const client = new Pocketbase(import.meta.env.PUBLIC_PB_URL)
 // export const client = new Pocketbase("http://localhost:8080")

src/pages/index.astro

@@ -1,22 +1,16 @@
 ---
 import PageLayout from "@/layouts/base"
-import client from "@/data/pocketbase"
-import OverviewCard from "@/components/Card/OverviewCard"
+import { client } from "@/data/pocketbase"
 
-const recipies = await client.collection("recipes").getFullList()
+const reccies = await client.collection("recipes").getFullList()
 ---
 
 <PageLayout>
 	<p class="text-3xl font-medium">Recipie</p>
 	
-	What would you like today?
-
-	<div class="grid md:gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-		{
-			recipies.map(r => (
-				<OverviewCard recipe={r} />
-			))
-		}
-	</div>
-
+	{
+		reccies.map(rec => (
+			<p>{rec.name}</p>
+		))
+	}
 </PageLayout>

src/styles/global.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 
 html {
-    @apply bg-white;
+    @apply bg-[#fefefe];
     @apply p-5;
 }