web/src/components/OrganisationTableDesktop.astro

188 lines
5.3 KiB
Text
Raw Normal View History

2024-05-02 11:26:23 +02:00
---
import * as config from "../config.yaml";
import core from "../core.json";
---
<div class="border-2 border-white flex flex-col">
<div
2024-05-10 14:12:08 +02:00
class="w-full bg-white px-[16px] justify-between flex py-[px] gap-4 items-start uppercase"
2024-05-02 11:26:23 +02:00
>
<div class="max-w-[120px] w-full">
<p class="text-black">CATEGORY</p>
</div>
<div class="max-w-[264px] w-full">
<p class="text-black">Objective</p>
</div>
<div class="max-w-[490px] w-full">
<p class="text-black">Details</p>
</div>
<div class="max-w-[120px] w-full">
<p class="text-black">More info</p>
</div>
</div>
2024-05-10 14:12:08 +02:00
<div
class="px-[16px] py-[24px] flex justify-between items-start gap-4 border-b border-white"
>
2024-05-02 11:26:23 +02:00
<div class="max-w-[120px] w-full">
<p class="text-white font-bold uppercase">Events</p>
</div>
<div class="max-w-[264px] w-full flex flex-col gap-2 items-start">
{
config.organisation.table.events.map((item) => (
2024-05-10 14:12:08 +02:00
<p class="text-white " style={`height:${item.height}px`}>
2024-05-02 11:26:23 +02:00
{item.objective}
</p>
))
}
</div>
<div class="max-w-[490px] w-full flex flex-col gap-2 items-start">
{
config.organisation.table.events.map((item) => (
2024-05-10 14:12:08 +02:00
<p class="" style={`height:${item.height}px`}>
2024-05-02 11:26:23 +02:00
{item.details}
</p>
))
}
</div>
2024-05-10 14:12:08 +02:00
<div class="max-w-[120px] w-full self-end flex flex-col gap-2 items-center">
2024-05-02 11:26:23 +02:00
{
config.organisation.table.events.map((item) => (
<a
class="button inverted"
2024-05-10 14:12:08 +02:00
style={`height:${item.height}px`}
2024-05-02 11:26:23 +02:00
href={item.url}
>
<button>MORE</button>
</a>
))
}
</div>
</div>
2024-05-10 14:12:08 +02:00
<div
class="px-[16px] py-[24px] flex justify-between items-start gap-4 border-b border-white"
>
2024-05-02 11:26:23 +02:00
<div class="max-w-[120px] w-full">
<p class="text-white font-bold uppercase">RESEARCH</p>
</div>
<div class="max-w-[264px] w-full flex flex-col gap-2 items-start">
{
config.organisation.table.research.map((item) => (
2024-05-10 14:12:08 +02:00
<p class="text-white " style={`height:${item.height}px`}>
2024-05-02 11:26:23 +02:00
{item.objective}
</p>
))
}
</div>
<div class="max-w-[490px] w-full flex flex-col gap-2 items-start">
{
config.organisation.table.research.map((item) => (
2024-05-10 14:12:08 +02:00
<p class="" style={`height:${item.height}px`}>
2024-05-02 11:26:23 +02:00
{item.details}
</p>
))
}
</div>
<div class="max-w-[120px] w-full flex flex-col gap-2 items-center">
{
2024-05-10 14:12:08 +02:00
config.organisation.table.research.map((item) =>
item.url ? (
<a
class=" button inverted"
style={`height:${item.height}px`}
href={item.url}
>
<button>MORE</button>
</a>
) : (
<p style={`height:${item.height}px`} class="text-white">
&nbsp
</p>
)
)
2024-05-02 11:26:23 +02:00
}
</div>
</div>
2024-05-10 14:12:08 +02:00
<div
class="px-[16px] py-[24px] flex items-start justify-between gap-4 border-b border-white"
>
2024-05-02 11:26:23 +02:00
<div class="max-w-[120px] w-full">
<p class="text-white font-bold uppercase">TOOLS</p>
</div>
<div class="max-w-[264px] w-full flex flex-col gap-2 items-start">
{
config.organisation.table.tools.map((item) => (
2024-05-10 14:12:08 +02:00
<p class="text-white " style={`height:${item.height}px`}>
2024-05-02 11:26:23 +02:00
{item.objective}
</p>
))
}
</div>
<div class="max-w-[490px] w-full flex flex-col gap-2 items-start">
{
config.organisation.table.tools.map((item) => (
2024-05-10 14:12:08 +02:00
<p class="" style={`height:${item.height}px`}>
2024-05-02 11:26:23 +02:00
{item.details}
</p>
))
}
</div>
<div class="max-w-[120px] w-full flex flex-col gap-2 items-center">
{
config.organisation.table.tools.map((item) => (
<a
class="button inverted"
2024-05-10 14:12:08 +02:00
style={`height:${item.height}px`}
2024-05-02 11:26:23 +02:00
href={item.url}
>
<button>MORE</button>
</a>
))
}
</div>
</div>
2024-05-10 14:12:08 +02:00
<div
class="px-[16px] py-[24px] flex items-start justify-between gap-4 border-b border-white"
>
2024-05-02 11:26:23 +02:00
<div class="max-w-[120px] w-full">
<p class="text-white font-bold uppercase">education</p>
</div>
<div class="max-w-[264px] w-full flex flex-col gap-2 items-start">
{
config.organisation.table.education.map((item) => (
2024-05-10 14:12:08 +02:00
<p class="text-white " style={`height:${item.height}px`}>
2024-05-02 11:26:23 +02:00
{item.objective}
</p>
))
}
</div>
<div class="max-w-[490px] w-full flex flex-col gap-2 items-start">
{
config.organisation.table.education.map((item) => (
2024-05-10 14:12:08 +02:00
<p class="" style={`height:${item.height}px`}>
2024-05-02 11:26:23 +02:00
{item.details}
</p>
))
}
</div>
<div class="max-w-[120px] w-full flex flex-col gap-2 items-center">
{
config.organisation.table.education.map((item) =>
item.url ? (
<a
class="button inverted"
2024-05-10 14:12:08 +02:00
style={`height:${item.height}px`}
2024-05-02 11:26:23 +02:00
href={item.url}
>
<button>MORE</button>
</a>
) : (
2024-05-10 14:12:08 +02:00
<p style={`height:${item.height}px`} class="text-white">
2024-05-02 11:26:23 +02:00
&nbsp
</p>
)
)
}
</div>
</div>
</div>