website/src/components/events/YearlyEvents.svelte at ed4772ad1e505123b11e330c7ad561d6eb240132 · YoungVision-eV/website · GitHub

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<script lang="ts">
  import type { YearlyEvent } from '@data';

  import ProjectBackground3 from '@assets/events/projects-bg-lg-3.jpg';

  export let events: YearlyEvent[];

  let filter_for_all = true;

  function toggleForAll() {
    filter_for_all = !filter_for_all;
  }

  $: filteredEvents = events.filter((e) => e.for_all === filter_for_all);
</script>

<section class="relative mx-auto mb-20 max-w-[80rem] px-4 pt-14 lg:px-20 lg:pt-24">
  <img src={ProjectBackground3.src} alt="" class="absolute -left-0 -z-10 mt-32" />
  <h2 class="font-serif text-2xl font-bold">Unsere jährlichen Veranstaltungen</h2>
  <p class="mt-5 max-w-prose">
    Unsere jährlichen Veranstaltungen sind ein fester Bestandteil unseres YoungVision-Kalenders. Sie
    bieten eine entspannte Gelegenheit, zusammenzukommen, zu wachsen, Kontakte zu knüpfen und das
    Leben in vollen Zügen zu genießen. Hier erfährst du mehr über diese besonderen Anlässe, die
    unsere Gemeinschaft jedes Jahr aufs Neue bereichern und inspirieren.
  </p>
  <div class="mt-3 flex flex-row">
    <div class="flex items-center">
      <input
        class="h-7 w-7"
        type="checkbox"
        id="for-all"
        on:click={toggleForAll}
        checked={filter_for_all}
      />
      <label class="ml-4" for="for-all">Für Alle</label>
    </div>
    <div class="ml-10 flex items-center lg:ml-28">
      <input
        class="h-7 w-7"
        type="checkbox"
        id="only-members"
        on:click={toggleForAll}
        checked={!filter_for_all}
      />
      <label class="ml-4" for="only-members">Nur Mitglieder</label>
    </div>
  </div>
  <ul class="flex flex-col lg:mt-12 lg:grid lg:grid-cols-2 lg:gap-10">
    {#each filteredEvents as event (event.title)}
      <li
        class="mt-12 rounded-2xl shadow-lg lg:mt-0 {event.for_all
          ? 'bg-yellow-700'
          : 'bg-light-green'}"
      >
        <img
          alt=""
          src={event.image.src}
          srcset={event.image.srcSet.attribute}
          {...event.image.attributes}
          sizes="(min-width: 1360px) 540px, (min-width: 1040px) 40vw, calc(100vw - 32px)"
          class="max-h-64 w-full rounded-t-2xl object-cover"
        />
        <div class="flex p-6">
          <div class="mt-4 flex flex-col items-center">
            <div class="font-serif text-5xl font-bold">{event.day}</div>
            <div>{event.month}</div>
          </div>
          <div class="ml-10">
            <h3 class="inline-block font-bold lg:text-xl">{event.title}</h3>
            {#if event.future}
              <span class="italic">ab {event.future}</span>
            {/if}
            <p class="mt-3">{event.short_description}</p>
            <p class="mt-3 inline-block rounded-full bg-white px-5">
              {event.for_all ? 'Für Alle' : 'Nur Mitglieder'}
            </p>
          </div>
        </div>
      </li>
    {/each}
  </ul>
</section>