File size: 880 Bytes
0ad74ed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<script lang="ts">
export let guides = [] as any[];
const COLOR_SETS = [
["from-green-100", "to-green-50"],
["from-yellow-100", "to-yellow-50"],
["from-red-100", "to-red-50"],
["from-blue-100", "to-blue-50"],
["from-pink-100", "to-pink-50"],
["from-purple-100", "to-purple-50"]
];
</script>
{#if guides && guides.length > 0}
<div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4 pb-3 pt-2">
{#each guides as guide, i}
<a
class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {COLOR_SETS[
i
][0]} {COLOR_SETS[i][1]}"
target="_blank"
href="../..{guide.url}"
>
<div class="flex flex-col p-4 h-min">
<p class="group-hover:underline text-l">
{guide.pretty_name}
</p>
</div>
</a>
{/each}
</div>
{/if}
|