openwiden-frontend/src/blocks/HowItWorks/HowItWorks.vue at 689b8db151faa2f5a4ad47f236a57e4bc1b0fec3 · OpenWiden/openwiden-frontend · 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
<template>
  <section :class="styles.section">
    <div :class="styles.wrapper">
      <div :class="styles.illustration">
        <div :class="styles.bg" />

        <img
          v-if="activeSlide"
          :src="`/svgs/${activeSlide.img}`"
          :class="[styles.image]"
          width="263"
          height="197"
          alt="How it works illustration"
          aria-hidden="true"
        />

        <div :class="[styles.ring, styles.top]" />
        <div :class="[styles.ring, styles.bottom]" />

        <div :class="[styles.square, styles.top]" />
        <div :class="[styles.square, styles.middle]" />
        <div :class="[styles.square, styles.bottom]" />

        <div :class="[styles.circle, styles.left]" />
        <div :class="[styles.circle, styles.left2]" />

        <div :class="[styles.circle, styles.right]" />
        <div :class="[styles.circle, styles.right2]" />
      </div>

      <div :class="styles.slider">
        <the-text :class="styles.title" tag="h2">
          How it works
        </the-text>

        <ul :class="styles.list">
          <li v-for="slide in slides" :key="slide.label" :class="[styles.item]">
            <button
              :class="[
                styles.button,
                activeSlide && slide.id === activeSlide.id ? styles.active : '',
              ]"
              @click="() => changeActiveSlide(slide)"
            >
              <the-text :class="styles.label" tag="span">
                {{ slide.label }}
              </the-text>

              <the-text :class="styles.text">
                {{ slide.text }}
              </the-text>
            </button>
          </li>
        </ul>
      </div>
    </div>
  </section>
</template>

<script>
import styles from './HowItWorks.css?module';
import TheText from '@/src/components/TheText/TheText';

export default {
  components: { TheText },
  data() {
    return {
      slides: [
        {
          id: 1,
          label: 'Authorization',
          img: 'auth.svg',
          text: 'You are able to authorize with github or gitlab accounts',
        },
        {
          id: 2,
          label: 'Find repository',
          img: 'list.svg',
          text:
            'Find repositories you would like to help. You can filter by language, stars or issues count',
        },
        {
          id: 3,
          label: 'Add repository',
          img: 'add.svg',
          text:
            'If you want to find an open source help for your project you are able to add your repository to our service from any connected version control system.',
        },
      ],
      activeSlide: null,
    };
  },
  computed: {
    styles() {
      return styles;
    },
  },
  mounted() {
    this.$data.activeSlide = { ...this.$data.slides[0], isActive: true };
  },
  methods: {
    changeActiveSlide(slide) {
      this.$data.activeSlide = { ...slide, isActive: true };
    },
  },
};
</script>