mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-12-12 16:03:00 +00:00
98 lines
2.6 KiB
Vue
98 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { useToolStore } from '@/tools/tools.store';
|
|
import { Heart } from '@vicons/tabler';
|
|
import { useHead } from '@vueuse/head';
|
|
import ColoredCard from '../components/ColoredCard.vue';
|
|
import ToolCard from '../components/ToolCard.vue';
|
|
import Hero from './home/components/hero.vue';
|
|
|
|
const toolStore = useToolStore();
|
|
|
|
useHead({ title: 'IT Tools - Handy online tools for developers' });
|
|
</script>
|
|
|
|
<template>
|
|
<div class="home-page">
|
|
<!-- <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
|
|
<n-gi>
|
|
<colored-card title="You like it-tools?" :icon="Heart">
|
|
Give us a star on
|
|
<a
|
|
href="https://github.com/CorentinTh/it-tools"
|
|
rel="noopener"
|
|
target="_blank"
|
|
aria-label="IT-Tools' github repository"
|
|
>github</a
|
|
>
|
|
or follow us on
|
|
<a
|
|
href="https://twitter.com/ittoolsdottech"
|
|
rel="noopener"
|
|
target="_blank"
|
|
aria-label="IT-Tools' twitter account"
|
|
>twitter</a
|
|
>! Thank you
|
|
<n-icon :component="Heart" />
|
|
</colored-card>
|
|
</n-gi>
|
|
</n-grid> -->
|
|
|
|
<hero />
|
|
<div class="grid-wrapper">
|
|
<transition name="height">
|
|
<div v-if="toolStore.favoriteTools.length > 0">
|
|
<n-h3>Your favorite tools</n-h3>
|
|
<n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
|
|
<n-gi v-for="tool in toolStore.favoriteTools" :key="tool.name">
|
|
<tool-card :tool="tool" />
|
|
</n-gi>
|
|
</n-grid>
|
|
</div>
|
|
</transition>
|
|
|
|
<div v-if="toolStore.newTools.length > 0">
|
|
<n-h3>Newest tools</n-h3>
|
|
<n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
|
|
<n-gi v-for="tool in toolStore.newTools" :key="tool.name">
|
|
<tool-card :tool="tool" />
|
|
</n-gi>
|
|
</n-grid>
|
|
</div>
|
|
|
|
<n-h3>All the tools</n-h3>
|
|
<n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
|
|
<n-gi v-for="tool in toolStore.tools" :key="tool.name">
|
|
<transition>
|
|
<tool-card :tool="tool" />
|
|
</transition>
|
|
</n-gi>
|
|
</n-grid>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.grid-wrapper {
|
|
padding: 26px;
|
|
}
|
|
|
|
::v-deep(.n-grid) {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.height-enter-active,
|
|
.height-leave-active {
|
|
transition: all 0.5s ease-in-out;
|
|
overflow: hidden;
|
|
max-height: 500px;
|
|
}
|
|
|
|
.height-enter-from,
|
|
.height-leave-to {
|
|
max-height: 42px;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
</style>
|