Files
pole-book/client/src/components/PoleElementsList.astro
2025-06-22 07:46:43 +02:00

53 lines
1.6 KiB
Plaintext

---
// Import necessary components and utilities
import { getStrapiMedia, getStrapiBaseUrl } from "../lib/strapi";
import { t, getLanguageFromPath, type SupportedLanguage } from "../lib/i18n";
import type { HTMLAttributes } from "astro/types";
// Define the props interface
export interface Props extends HTMLAttributes<'div'> {
elements: any[];
}
// Destructure props and get BASE_URL from global config
const { elements, ...otherProps } = Astro.props;
const BASE_URL = getStrapiBaseUrl();
// Get current language
const currentLang = getLanguageFromPath(Astro.url.pathname);
---
<div {...otherProps} data-elements-container>
{
elements.length === 0 ? (
<div class="text-center py-8">
<p class="text-gray-500 text-lg">{t('elements.noElements', currentLang)}</p>
</div>
) : (
<>
{elements.map((poleElement) => (
<a href={`/elements/${poleElement.id}`} class="block mb-4">
<article class="flex items-center bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-200">
<img
src={getStrapiMedia(
poleElement.mainImage.url,
BASE_URL,
)}
alt={poleElement.mainImage.alternativeText}
class="w-24 h-24 object-cover flex-shrink-0"
/>
<div class="p-4">
<h2 class="text-xl font-bold">
{poleElement.name}
</h2>
</div>
</article>
</a>
))}
<div id="no-results-message" class="text-center py-8 hidden">
<p class="text-gray-500 text-lg">{t('elements.noResults', currentLang)}</p>
</div>
</>
)
}
</div>