site-library/src/pages/[locale]/howtos/index.astro
2025-03-31 20:31:05 +02:00

61 lines
2.3 KiB
Plaintext

---
import { group_by_cat } from "@/model/howto/howto.jswto.js";
import { getCollection } from "astro:content";
import BaseLayout from "@/layouts/BaseLayout.astro";
import Wrapper from "@/components/containers/Wrapper.astro";
import ListItem from "@/components/howtos/ListItem.astro";
import Translate from "@/components/polymech/i18n.astro";
import { LANGUAGES_PROD as LANGUAGES } from "config/config.js";
const view = "howtos";
const items = (await getCollection(view)).map(
(storeItem) => storeItem.data.item,
);
const groups = group_by_cat(items as any);
const locale = Astro.currentLocale;
const test = {};
export async function getStaticPaths() {
return LANGUAGES.map((lang) => ({
params: { locale: lang },
}));
}
---
<BaseLayout frontmatter={test}>
<Wrapper variant="standard" class="py-4 markdown-content2">
<section>
<div class="py-2 space-y-2">
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4"></div>
</div>
</section>
{
Object.keys(groups).map((group) => (
<section>
<h1
id={group.toLowerCase().replace(/\s+/g, '-')}
aria-hidden="true"
class="bg-orange-400 shadow rounded-lg -space-x-8 text-xl p-6 text-white mt-4 mb-4 cursor-pointer hover:bg-orange-500 transition-colors"
onclick={`window.location.hash = '${group.toLowerCase().replace(/\s+/g, '-')}'`}
>
<Translate>{group}</Translate>
</h1>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{groups[group].map((item) => (
<ListItem
url={`/${locale}/howtos/${item.slug}`}
title={item.title}
price={item.price}
type={item.type}
alt={item.title}
model={{item:item}}
/>
))}
</div>
</section>
))
}
</Wrapper>
</BaseLayout>