65 lines
2.0 KiB
Plaintext
65 lines
2.0 KiB
Plaintext
---
|
|
// Locale-basierte Produktseite
|
|
import Layout from "../../../layouts/Layout.astro";
|
|
import Product from "../../../components/Product.astro";
|
|
import { getProducts } from "../../../lib/graphql/queries.js";
|
|
import { i18n } from "../../../lib/i18n/i18n.js";
|
|
import type { Product as ProductType } from "../../../lib/types/product.js";
|
|
|
|
const locale = Astro.params["locale"] || "de";
|
|
i18n.setLocale(locale);
|
|
|
|
let products: ProductType[] = [];
|
|
try {
|
|
products = await getProducts(4);
|
|
} catch (error) {
|
|
// Verbindungsfehler weniger störend behandeln
|
|
const isConnectionError =
|
|
error instanceof Error &&
|
|
(error.name === "ConnectionError" ||
|
|
error.message.includes("GraphQL-Server nicht erreichbar") ||
|
|
error.message.includes("ECONNREFUSED"));
|
|
|
|
if (isConnectionError) {
|
|
// In Development: Warnung ausgeben
|
|
if (import.meta.env.DEV) {
|
|
console.warn(
|
|
"GraphQL-Server nicht erreichbar. Verwende leere Produktliste."
|
|
);
|
|
console.warn("Starte den Server mit: npm run mock:server");
|
|
}
|
|
} else {
|
|
console.error("Fehler beim Laden der Produkte:", error);
|
|
}
|
|
products = [];
|
|
}
|
|
|
|
const title = locale === "en" ? "Products" : "Produkte";
|
|
---
|
|
|
|
<Layout title={title} locale={locale}>
|
|
<main class="max-w-7xl mx-auto px-8 py-8">
|
|
<h1 class="text-4xl font-bold mb-8 text-gray-900">
|
|
{locale === "en" ? "Products" : "Produkte"}
|
|
</h1>
|
|
|
|
{
|
|
products.length === 0 ? (
|
|
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
|
|
<p class="text-yellow-800">
|
|
{locale === "en"
|
|
? "No products available. Make sure the GraphQL server is running."
|
|
: "Keine Produkte verfügbar. Stelle sicher, dass der GraphQL-Server läuft."}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
|
|
{products.map((product) => (
|
|
<Product product={product} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
</main>
|
|
</Layout>
|