dialtone/apps/dialtone-documentation/docs/.vuepress/views/UiKitsOverview.vue at 312767970cd2c6ab7a7b0afd4a2e24b64f5c9785 · dialpad/dialtone · 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
<template>
  <div class="dialtone-wall dialtone-wall--ui-kits">
    <template v-for="kit in kits" :key="kit.text">
      <a
        v-if="kit.status !== 'planned'"
        :href="kit.link"
        target="_blank"
        rel="noopener noreferrer"
        class="dialtone-wall__item"
      >
        <dt-stack direction="column" justify="between" class="dialtone-wall__details d-h100p">
          <dt-stack direction="column" gap="100">
            <div class="dialtone-wall__title">
              <span class="dialtone-wall__title-text">{{ kit.text }}</span>
              <span
                v-if="kit.status"
                class="d-badge d-tt-capitalize"
                :class="badgeKindClass(kit.status)"
              >
                {{ kit.status }}
              </span>
            </div>
            <div class="dialtone-wall__description">
              {{ kit.description }}
            </div>
          </dt-stack>
          <dt-stack direction="row" gap="50" class="d-ai-center">
            <dt-icon name="storybook-color" size="200" />
            <dt-text kind="label" size="200" strength="medium" tone="secondary">Storybook</dt-text>
          </dt-stack>
        </dt-stack>
      </a>
      <div v-else class="dialtone-wall__item">
        <dt-stack direction="column" class="dialtone-wall__details">
          <dt-stack direction="column" gap="100">
            <div class="dialtone-wall__title">
              <span class="dialtone-wall__title-text">{{ kit.text }}</span>
              <span class="d-badge d-tt-capitalize">
                {{ kit.status }}
              </span>
            </div>
            <div class="dialtone-wall__description">
              {{ kit.description }}
            </div>
          </dt-stack>
        </dt-stack>
      </div>
    </template>
  </div>
</template>

<script setup>
import { useThemeLocaleData } from '@vuepress/plugin-theme-data/client';
import { computed } from 'vue';

const themeData = useThemeLocaleData();

const kits = computed(() => {
  return (
    themeData.value.sidebar?.topLevelGroups?.['ui-kits']?.sections?.[
      '/ui-kits/'
    ]?.[0]?.children || []
  );
});

const badgeKindClass = (status) => {
  switch (status) {
    case 'new':
      return 'd-badge--bulletin';
    case 'ready':
      return 'd-badge--success';
    case 'beta':
      return 'd-badge--info';
    default:
      return '';
  }
};
</script>