From d1d654ebac2d51e3841675faeb56480e440f622f Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Tue, 5 Mar 2024 18:08:09 +0100
Subject: Initial commit

---
 frontend/src/lib/containers/Cardlets.svelte | 11 +++++++++++
 frontend/src/lib/containers/Cards.svelte    |  8 ++++++++
 frontend/src/lib/containers/Carousel.svelte | 15 +++++++++++++++
 frontend/src/lib/containers/Column.svelte   |  3 +++
 frontend/src/lib/containers/Grid.svelte     | 23 +++++++++++++++++++++++
 5 files changed, 60 insertions(+)
 create mode 100644 frontend/src/lib/containers/Cardlets.svelte
 create mode 100644 frontend/src/lib/containers/Cards.svelte
 create mode 100644 frontend/src/lib/containers/Carousel.svelte
 create mode 100644 frontend/src/lib/containers/Column.svelte
 create mode 100644 frontend/src/lib/containers/Grid.svelte

(limited to 'frontend/src/lib/containers')

diff --git a/frontend/src/lib/containers/Cardlets.svelte b/frontend/src/lib/containers/Cardlets.svelte
new file mode 100644
index 0000000..129da61
--- /dev/null
+++ b/frontend/src/lib/containers/Cardlets.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { fadeDefault } from '$lib/Transitions';
+	import { fade } from 'svelte/transition';
+</script>
+
+<div
+	class="grid gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 min-[1600px]:grid-cols-8 min-[1920px]:grid-cols-10"
+	in:fade={fadeDefault}
+>
+	<slot />
+</div>
diff --git a/frontend/src/lib/containers/Cards.svelte b/frontend/src/lib/containers/Cards.svelte
new file mode 100644
index 0000000..a19e8be
--- /dev/null
+++ b/frontend/src/lib/containers/Cards.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { fadeDefault } from '$lib/Transitions';
+	import { fade } from 'svelte/transition';
+</script>
+
+<div class="grid gap-4 xl:grid-cols-2 min-[1920px]:grid-cols-3" in:fade|global={fadeDefault}>
+	<slot />
+</div>
diff --git a/frontend/src/lib/containers/Carousel.svelte b/frontend/src/lib/containers/Carousel.svelte
new file mode 100644
index 0000000..1268a78
--- /dev/null
+++ b/frontend/src/lib/containers/Carousel.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	export let title: string;
+	export let href: string;
+</script>
+
+<div class="flex flex-col gap-1">
+	<h2 class="flex text-2xl font-medium">
+		<a class="hover:text-white" {href}>
+			{title}
+		</a>
+	</h2>
+	<div class="flex flex-wrap gap-5">
+		<slot />
+	</div>
+</div>
diff --git a/frontend/src/lib/containers/Column.svelte b/frontend/src/lib/containers/Column.svelte
new file mode 100644
index 0000000..05daece
--- /dev/null
+++ b/frontend/src/lib/containers/Column.svelte
@@ -0,0 +1,3 @@
+<div class="flex flex-col gap-4">
+	<slot />
+</div>
diff --git a/frontend/src/lib/containers/Grid.svelte b/frontend/src/lib/containers/Grid.svelte
new file mode 100644
index 0000000..1224156
--- /dev/null
+++ b/frontend/src/lib/containers/Grid.svelte
@@ -0,0 +1,23 @@
+<script>
+	import { fadeDefault } from '$lib/Transitions';
+
+	import { fade } from 'svelte/transition';
+</script>
+
+<div
+	class="flex flex-col gap-1 lg:grid lg:h-full lg:max-h-full lg:overflow-auto"
+	in:fade|global={fadeDefault}
+>
+	<slot />
+</div>
+
+<style>
+	div {
+		grid-template-columns: auto 1fr;
+		grid-template-rows: auto 1fr;
+
+		grid-template-areas:
+			'header header'
+			'sidebar main';
+	}
+</style>
-- 
cgit v1.2.3-2-gb3c3