94 lines
1.8 KiB
Vue
94 lines
1.8 KiB
Vue
<template>
|
|
<div>
|
|
<div class="page-header">
|
|
<h1>Tech Tools</h1>
|
|
</div>
|
|
|
|
<div class="filters">
|
|
<input
|
|
v-model="search"
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Search tools..."
|
|
/>
|
|
</div>
|
|
|
|
<div v-for="group in groups" :key="group.category" class="tool-group">
|
|
<h2 class="group-title">{{ group.label }}</h2>
|
|
<div class="tools-grid">
|
|
<router-link
|
|
v-for="tool in group.tools"
|
|
:key="tool.id"
|
|
:to="tool.route"
|
|
class="tool-card card"
|
|
>
|
|
<h3>{{ tool.name }}</h3>
|
|
<p>{{ tool.description }}</p>
|
|
<span class="badge">{{ group.label }}</span>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="!groups.length" class="empty-state">
|
|
No tools match your search.
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { groupTools } from '../tools'
|
|
|
|
const search = ref('')
|
|
const groups = computed(() => groupTools(search.value))
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tool-group {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.group-title {
|
|
font-size: 1.1rem;
|
|
color: var(--text-light);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.tools-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.tool-card {
|
|
padding: 1.25rem;
|
|
cursor: pointer;
|
|
display: block;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
|
|
.tool-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.tool-card h3 {
|
|
margin: 0 0 0.4rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.tool-card p {
|
|
margin: 0 0 0.75rem;
|
|
color: var(--text-light);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
color: var(--text-light);
|
|
}
|
|
</style>
|