src/components/ToolCard.vue


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

<template>
  <router-link :to="tool.path">
    <c-card class="tool-card">
      <div flex items-center justify-between>
        <n-icon class="icon" size="40" :component="tool.icon" />
        <div flex items-center gap-8px>
          <n-tag
            v-if="tool.isNew"
            size="small"
            class="badge-new"
            round
            type="success"
            :bordered="false"
            :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
          >
            New
          </n-tag>

          <favorite-button :tool="tool" />
        </div>
      </div>
      <n-h3 class="title">
        <n-ellipsis>{{ tool.name }}</n-ellipsis>
      </n-h3>

      <div class="description">
        <n-ellipsis :line-clamp="2" :tooltip="false" style="min-height: 44.78px">
          {{ tool.description }}
          <br />&nbsp;
        </n-ellipsis>
      </div>
    </c-card>
  </router-link>
</template>

<script setup lang="ts">
import type { Tool } from '@/tools/tools.types';
import { useThemeVars } from 'naive-ui';
import { toRefs } from 'vue';
import { useAppTheme } from '@/ui/theme/themes';
import FavoriteButton from './FavoriteButton.vue';

const props = defineProps<{ tool: Tool & { category: string } }>();
const { tool } = toRefs(props);
const theme = useThemeVars();

const appTheme = useAppTheme();
</script>

<style lang="less" scoped>
a {
  text-decoration: none;
}

.tool-card {
  transition: border-color ease 0.5s;
  border-width: 2px !important;
  color: transparent;

  &:hover {
    border-color: v-bind('appTheme.primary.colorHover');
  }

  .icon {
    opacity: 0.6;
    color: v-bind('theme.textColorBase');
  }

  .title {
    margin: 5px 0;
  }

  .description {
    opacity: 0.6;
    color: v-bind('theme.textColorBase');
    margin: 5px 0;
  }
}
</style>