website/src/components/about-us/Exercises.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<script lang="ts">
  import type { Exercise } from '@data/real/exercises';

  import ChevronDown from '@assets/icons/ChevronDown.svelte';
  import ChevronUp from '@assets/icons/ChevronUp.svelte';
  import { createCollapsible, melt } from '@melt-ui/svelte';
  import clsx from 'clsx';
  import { slide } from 'svelte/transition';

  export let exercises: Exercise[];

  const {
    elements: { content, root, trigger },
    states: { open },
  } = createCollapsible();
</script>

<div class="hidden lg:mt-40 lg:block" use:melt={$root}>
  <div class="grid grid-cols-6 gap-x-12">
    {#each exercises.slice(0, 3) as exercise (exercise.title)}
      <div class="col-span-2">
        <div class="px-20 lg:px-0">
          <img
            srcSet={exercise.image.srcSet.attribute}
            {...exercise.image.attributes}
            alt={exercise.title}
            sizes="(min-width: 1360px) 455px, calc(35.67vw - 23px)"
            class="bg-light-green aspect-square h-auto w-full rounded-full object-cover object-center"
          />
        </div>
        <h3 class="mt-5 text-center font-sans text-xl lg:mt-8">{exercise.title}</h3>
        <p class="mt-3 font-sans text-sm lg:mt-8">{exercise.description}</p>
      </div>
    {/each}
  </div>
  {#if $open}
    <div use:melt={$content} class="mt-12 grid grid-cols-6 gap-x-12" transition:slide>
      {#each exercises.slice(3) as exercise (exercise.title)}
        <div class="col-span-2">
          <div class="px-20 lg:px-0">
            <img
              src={exercise.image.src}
              alt={exercise.title}
              {...exercise.image.attributes}
              sizes="(min-width: 1360px) 455px, calc(35.67vw - 23px)"
              class="bg-light-green aspect-square h-auto w-full rounded-full object-cover object-center"
            />
          </div>
          <h3 class="mt-5 text-center font-sans text-xl lg:mt-8">{exercise.title}</h3>
          <p class="mt-3 font-sans text-sm lg:mt-8">{exercise.description}</p>
        </div>
      {/each}
    </div>
  {/if}
</div>

<div class="lg:hidden" use:melt={$root}>
  <div class="mt-16 flex flex-col gap-12">
    {#each exercises.slice(0, 2) as exercise (exercise.title)}
      <div class="flex-1">
        <div class="px-20">
          <img
            src={exercise.image.src}
            alt={exercise.title}
            {...exercise.image.attributes}
            sizes="(min-width: 1360px) 455px, calc(35.67vw - 23px)"
            class="bg-light-green aspect-square h-auto w-full rounded-full object-cover object-center"
          />
        </div>
        <h3 class="mt-5 text-center font-sans text-xl">{exercise.title}</h3>
        <p class="mt-3 font-sans text-sm">{exercise.description}</p>
      </div>
    {/each}
  </div>
  {#if $open}
    <div use:melt={$content} class="mt-12 flex flex-col gap-12" transition:slide>
      {#each exercises.slice(2) as exercise (exercise.title)}
        <div class="flex-1">
          <div class="px-20">
            <img
              src={exercise.image.src}
              alt={exercise.title}
              {...exercise.image.attributes}
              sizes="(min-width: 1360px) 455px, calc(35.67vw - 23px)"
              class="bg-light-green aspect-square h-auto w-full rounded-full object-cover object-center"
            />
          </div>
          <h3 class="mt-5 text-center font-sans text-xl">{exercise.title}</h3>
          <p class="mt-3 font-sans text-sm">{exercise.description}</p>
        </div>
      {/each}
    </div>
  {/if}
</div>

<button use:melt={$trigger} class="mt-4 flex w-full flex-col items-center justify-center lg:mt-8">
  <span class="text-sm">{$open ? 'Weniger' : 'Mehr lesen'}</span>
  <div class="mt-2">
    {#if $open}
      <ChevronUp />
    {:else}
      <ChevronDown />
    {/if}
    <div></div>
  </div>
</button>

<div class="mx-2 mt-2 w-full border-t border-gray-300"></div>
<div
  class={clsx(
    'mt-16 hidden auto-rows-[0] grid-cols-[1fr] gap-y-12 overflow-hidden transition-all lg:mt-40 lg:grid-cols-6 lg:gap-12',
  )}
>
  {#each exercises as exercise, index (exercise.title)}
    <div
      class={clsx(
        'exercise lg:col-span-2',
        index !== 0 && 'mt-12 lg:mt-0',
        index === 3 && 'lg:col-start-2',
      )}
    >
      <div class="px-20 lg:px-0">
        <img
          src={exercise.image.src}
          alt={exercise.title}
          {...exercise.image.attributes}
          sizes="(min-width: 1360px) 455px, calc(35.67vw - 23px)"
          class="bg-light-green aspect-square h-auto w-full rounded-full object-cover object-center"
        />
      </div>
      <h3 class="mt-5 text-center font-sans text-xl lg:mt-8">{exercise.title}</h3>
      <p class="mt-3 font-sans text-sm lg:mt-8">{exercise.description}</p>
    </div>
  {/each}
</div>