librodrome/app/components/home/HomeToolbox.vue

<template>
  <div class="toolbox-wrap">
    <div class="toolbox" :class="{ 'toolbox--single': axes.length === 1 }">
      <section
        v-for="axis in axes"
        :id="anchors ? axis.to.slice(1) : undefined"
        :key="axis.key"
        class="toolbox-axis"
        :style="{ '--hue': `var(${axis.hue})` }"
        :aria-labelledby="`tb-${uid}-${axis.key}`"
      >
        <UiOiseauPose v-for="o in oiseaux?.[axis.key] ?? []" :key="`${o.nom}-${o.pose}`" v-bind="o" class="toolbox-oiseau" />
        <header class="toolbox-head">
          <p class="toolbox-lever">{{ axis.lever }}</p>
          <h3 :id="`tb-${uid}-${axis.key}`" class="toolbox-title">
            <NuxtLink :to="axis.to">{{ axis.title }}</NuxtLink>
          </h3>
          <p v-if="showPromise && axis.promise" class="toolbox-promise">{{ axis.promise }}</p>
        </header>

        <ul class="toolbox-tools">
          <li v-for="tool in axis.items" :key="tool.label">
            <HomeToolItem :tool="tool" @action="onAction" />
          </li>
        </ul>

        <!-- Numérique : the stacks LaPlanK serves -->
        <NuxtLink
          v-if="axis.key === 'numerique' && lpk && bouquet"
          :to="lpk.to"
          class="toolbox-lpk"
        >
          <span class="toolbox-lpk-head">
            <strong>{{ lpk.name }}</strong> <span>{{ lpk.text }}</span>
          </span>
          <span class="toolbox-lpk-stacks">
            <span v-for="s in bouquet.inService" :key="s.name" class="toolbox-lpk-stack">{{ s.name }}</span>
          </span>
          <span class="toolbox-lpk-more">
            {{ bouquet.title }} · {{ bouquet.stacks.length }}
            <span class="i-lucide-arrow-right h-3.5 w-3.5" aria-hidden="true" />
          </span>
        </NuxtLink>

        <!-- Économique : grateWizard -->
        <button
          v-if="axis.key === 'economie' && gratewizard"
          type="button"
          class="toolbox-gw"
          @click="launch()"
        >
          <span class="i-lucide-sparkles h-4 w-4" aria-hidden="true" />
          <span class="toolbox-gw-text">
            <strong>{{ gratewizard.title }}</strong>
            <span>{{ gratewizard.subtitle }}</span>
          </span>
          <span class="i-lucide-arrow-up-right h-4 w-4" aria-hidden="true" />
        </button>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { AxisKey, HomeAxis } from '~/composables/useHomeData'
import type { OiseauPlace } from '~/utils/oiseauPose'

withDefaults(defineProps<{
  axes: HomeAxis[]
  lpk?: { name: string, text: string, to: string }
  bouquet?: { title: string, inService: { name?: string }[], stacks: unknown[] } | null
  gratewizard?: { title: string, subtitle: string }
  showPromise?: boolean
  anchors?: boolean
  /** Birds standing by an axis column (home page) */
  oiseaux?: Partial<Record<AxisKey, OiseauPlace[]>>
}>(), {
  showPromise: true,
  anchors: false,
})

const emit = defineEmits<{
  'open-player': []
  'open-pdf': []
}>()

const uid = useId()
const { launch } = useGrateWizard()

function onAction(id: string) {
  if (id === 'open-player') emit('open-player')
  else if (id === 'open-pdf') emit('open-pdf')
}
</script>

<style scoped>
.toolbox-wrap {
  container-type: inline-size;
}

.toolbox {
  display: grid;
  gap: 1.25rem;
}

@container (min-width: 60rem) {
  .toolbox:not(.toolbox--single) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

/* The birds under a column only make sense with the three columns side by side */
@container (max-width: 59.99rem) {
  .toolbox-oiseau { display: none; }
}

.toolbox-axis {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  border-radius: 16px;
  background: hsl(var(--color-surface));
  box-shadow: inset 0 3px 0 hsl(var(--hue));
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.toolbox-lever {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: hsl(var(--hue));
}

.toolbox-title {
  margin: 0.15rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: hsl(var(--color-text));
}

.toolbox-title a:hover {
  color: hsl(var(--hue));
}

.toolbox-promise {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: hsl(var(--color-text) / 0.7);
}

.toolbox-tools {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* LaPlanK */
.toolbox-lpk {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem;
  border-radius: 12px;
  background: hsl(var(--hue) / 0.1);
  color: hsl(var(--color-text));
  transition: transform 0.12s ease;
}

.toolbox-lpk:hover {
  transform: translateY(-3px);
}

.toolbox-lpk-head {
  font-size: 0.82rem;
  line-height: 1.4;
  color: hsl(var(--color-text) / 0.7);
}

.toolbox-lpk-head strong {
  font-family: var(--font-display);
  font-size: 1rem;
  color: hsl(var(--hue));
}

.toolbox-lpk-stacks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.toolbox-lpk-stack {
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
  font-size: 0.75rem;
  background: hsl(var(--color-bg) / 0.75);
}

.toolbox-lpk-more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: hsl(var(--hue));
}

/* grateWizard */
.toolbox-gw {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 0.9rem;
  border-radius: 12px;
  text-align: left;
  color: hsl(var(--hue));
  background: hsl(var(--hue) / 0.1);
  transition: transform 0.12s ease;
}

.toolbox-gw:hover {
  transform: translateY(-3px);
}

.toolbox-gw-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  color: hsl(var(--color-text) / 0.7);
}

.toolbox-gw-text strong {
  font-family: var(--font-display);
  font-size: 1rem;
  color: hsl(var(--color-text));
}

@media (prefers-reduced-motion: reduce) {
  .toolbox-lpk, .toolbox-gw { transition: none; }
}
</style>