codecheck

1
<script setup lang="ts">
2
type Lang = {
3
  id: number;
4
  name: string;
5
  status?: boolean;
6
};
7

8
interface Props {
9
  languages: Lang[];
10
}
11
const props = defineProps<Props>();
12

13
const selectedLanguage = ref(props.languages[0]);
14

15
// provide("selectedLanguage", selectedLanguage.value);
16
const emit = defineEmits(["selectedLanguage"]);
17

18
const selectLang = (item: any) => {
19
  selectedLanguage.value = item;
20
  emit("selectedLanguage", selectedLanguage.value);
21
};
22
</script>
23

24
<template>
25
  <div class="languages">
26
    <div class="languages__list">
27
      <button
28
        @click="selectLang(item)"
29
        class="languages__item"
30
        :class="{ languages_active: selectedLanguage === item }"
31
        v-for="item in props.languages"
32
        :key="item.id"
33
      >
34
        <span v-if="item.status">
35
          <svg
36
            xmlns="http://www.w3.org/2000/svg"
37
            x="0px"
38
            y="0px"
39
            width="1rem"
40
            height="1rem"
41
            viewBox="0 0 16 16"
42
          >
43
            <polygon
44
              fill="#00b569"
45
              points="5.857,14.844 0.172,9.032 3.031,6.235 5.888,9.156 12.984,2.06 15.812,4.888"
46
            ></polygon>
47
          </svg>
48
        </span>
49
        <img
50
          class="languages__img"
51
          :src="`/langs/${item.name?.toLowerCase()}.svg`"
52
          :alt="item.name"
53
        />
54
        <span class="languages__name"> {{ item.name }}</span>
55
      </button>
56
    </div>
57
  </div>
58
</template>
59

60
<style scoped lang="scss">
61
.languages {
62
  &__list {
63
    list-style: none;
64
    display: flex;
65
    gap: 0.2rem;
66
  }
67
  &__img {
68
    width: 1rem;
69
    height: 1rem;
70
  }
71
  &__item {
72
    display: flex;
73
    align-items: center;
74
    gap: 0.3rem;
75
    font-size: 0.8rem;
76
    border-radius: var(--border-radius);
77
    border: 1px solid var(--color-border-primary);
78
    padding: 0.5rem;
79
    background: var(--color-bg-primary);
80
    color: var(--color-text-primary);
81
    &:hover {
82
      border: 1px solid var(--color-bg-secondary);
83
    }
84
    &.languages_active {
85
      background: var(--color-bg-secondary);
86
      color: var(--color-text-secondary);
87
    }
88
  }
89
}
90
</style>
91