librodrome/app/components/home/HomeToolItem.vue

<template>
  <div class="tool" :class="{ 'tool--gestation': tool.gestation }">
    <div class="tool-main">
      <span class="tool-icon" aria-hidden="true">
        <span v-if="tool.icon === 'g1'" class="tool-g1">Ğ1</span>
        <span v-else :class="`i-lucide-${tool.icon}`" class="h-4 w-4" />
      </span>
      <div class="tool-text">
        <component :is="tool.to ? NuxtLink : 'span'" :to="tool.to" class="tool-name">
          {{ tool.label }}
        </component>
        <UiStatusBadge class="tool-status" :status="tool.status" :gestation="tool.gestation" :since="tool.since" />
        <p class="tool-desc">{{ tool.description }}</p>
        <p v-if="tool.presentation" class="tool-app">
          <strong>{{ tool.presentation.title }}</strong> — {{ tool.presentation.text }}
        </p>
      </div>
    </div>

    <div v-if="tool.actions?.length" class="tool-actions">
      <template v-for="action in tool.actions" :key="action.label">
        <a
          v-if="action.href"
          :href="action.href"
          target="_blank"
          rel="noopener noreferrer"
          class="tool-btn"
          :class="{ 'tool-btn--main': action.highlight }"
        >
          <span :class="`i-lucide-${action.icon}`" class="h-3.5 w-3.5" aria-hidden="true" />
          {{ action.label }}
        </a>
        <NuxtLink
          v-else-if="action.to"
          :to="action.to"
          class="tool-btn"
          :class="{ 'tool-btn--quiet': action.secondary }"
        >
          <span :class="`i-lucide-${action.icon}`" class="h-3.5 w-3.5" aria-hidden="true" />
          {{ action.label }}
        </NuxtLink>
        <button
          v-else
          type="button"
          class="tool-btn"
          :class="{ 'tool-btn--main': action.highlight }"
          @click="$emit('action', action.id)"
        >
          <span :class="`i-lucide-${action.icon}`" class="h-3.5 w-3.5" aria-hidden="true" />
          {{ action.label }}
        </button>
      </template>
      <span v-for="action in tool.actions.filter(a => a.note)" :key="`note-${action.label}`" class="tool-note">
        {{ action.note }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { HomeTool } from '~/composables/useHomeData'

defineProps<{
  tool: HomeTool
}>()

defineEmits<{
  action: [id: string]
}>()

const NuxtLink = resolveComponent('NuxtLink')
</script>

<style scoped>
.tool {
  padding: 0.85rem 0.9rem;
  border-radius: 12px;
  background: hsl(var(--color-bg) / 0.55);
}

.tool-main {
  display: flex;
  gap: 0.7rem;
}

.tool-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: hsl(var(--hue) / 0.12);
  color: hsl(var(--hue));
}

.tool-g1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8rem;
}

.tool-text {
  min-width: 0;
}

.tool-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: hsl(var(--color-text));
}

a.tool-name:hover {
  color: hsl(var(--hue));
}

.tool-status {
  margin-left: 0.4rem;
}

.tool-note {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: hsl(var(--axis-cit));
}

.tool-desc {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: hsl(var(--color-text) / 0.68);
}

.tool-app {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: hsl(var(--color-text) / 0.6);
}

.tool-app strong {
  font-family: var(--font-mono);
  font-weight: 500;
  color: hsl(var(--hue));
}

.tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.7rem;
  padding-left: 2.7rem;
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.25rem;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  color: hsl(var(--color-text) / 0.8);
  background: hsl(var(--color-text) / 0.06);
  transition: transform 0.1s ease, background 0.2s ease;
}

.tool-btn:hover {
  transform: translateY(-1px);
  background: hsl(var(--hue) / 0.14);
}

.tool-btn:active {
  transform: translateY(0);
}

.tool-btn--main {
  color: hsl(var(--color-bg));
  background: hsl(var(--hue));
}

.tool-btn--main:hover {
  background: hsl(var(--hue) / 0.88);
}

.tool-btn--quiet {
  font-weight: 400;
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .tool-btn { transition: none; }
}
</style>