diff options
Diffstat (limited to 'src/components/ToolCard.vue')
| -rw-r--r-- | src/components/ToolCard.vue | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/src/components/ToolCard.vue b/src/components/ToolCard.vue new file mode 100644 index 0000000..75c6085 --- /dev/null +++ b/src/components/ToolCard.vue @@ -0,0 +1,45 @@ +<template> + <router-link :to="tool.path"> + <n-card class="tool-card"> + <n-icon class="icon" size="35"> + <component :is="tool.icon" /> + </n-icon> + <n-h3 class="title">{{ tool.name }}</n-h3> + <div class="description"> + <n-ellipsis :line-clamp="2" :tooltip="false">{{ tool.description }}</n-ellipsis> + </div> + </n-card> + </router-link> +</template> + +<script setup lang="ts"> +import type { ITool } from '@/tools/Tool'; +import { toRefs, defineProps } from 'vue'; +import { ArrowRight } from '@vicons/tabler' + +const props = defineProps<{ tool: ITool & { category: string } }>() +const { tool } = toRefs(props) + +</script> + +<style lang="less" scoped> +a { + text-decoration: none; +} + +.tool-card { + &:hover { + border-color: var(--n-color-target); + } + .icon { + opacity: 0.7; + } + .title { + margin: 5px 0; + } + .description { + opacity: 0.7; + margin: 5px 0; + } +} +</style>
\ No newline at end of file |