79 lines
2.1 KiB
Vue
79 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
|
|
type FeatureSection = {
|
|
label: string
|
|
title: string
|
|
description: string
|
|
bullets: string[]
|
|
image: string
|
|
imageAlt: string
|
|
}
|
|
|
|
const props = defineProps<{
|
|
heading: string
|
|
summary: string
|
|
sections: FeatureSection[]
|
|
}>()
|
|
|
|
const activeIndex = ref(0)
|
|
|
|
watch(
|
|
() => props.sections.length,
|
|
() => {
|
|
activeIndex.value = 0
|
|
}
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<section class="feature-highlight-section fun-fact-section">
|
|
<div class="container">
|
|
<div class="feature-highlight-heading">
|
|
<h1>{{ heading }}</h1>
|
|
<p>{{ summary }}</p>
|
|
</div>
|
|
|
|
<ul class="feature-highlight-tabs" role="tablist">
|
|
<li v-for="(section, index) in sections" :key="section.label" role="presentation">
|
|
<button
|
|
type="button"
|
|
:class="['feature-highlight-tab', { active: activeIndex === index }]"
|
|
role="tab"
|
|
:aria-selected="activeIndex === index"
|
|
:aria-controls="`feature-panel-${index + 1}`"
|
|
@click="activeIndex = index"
|
|
>
|
|
{{ section.label }}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="feature-highlight-panels">
|
|
<div
|
|
v-for="(section, index) in sections"
|
|
:id="`feature-panel-${index + 1}`"
|
|
:key="section.label"
|
|
:class="['feature-highlight-panel', { active: activeIndex === index }]"
|
|
role="tabpanel"
|
|
>
|
|
<div class="feature-highlight-detail">
|
|
<div class="feature-highlight-copy">
|
|
<h2>{{ section.title }}</h2>
|
|
<p>{{ section.description }}</p>
|
|
<ul class="feature-highlight-points">
|
|
<li v-for="bullet in section.bullets" :key="bullet">{{ bullet }}</li>
|
|
</ul>
|
|
</div>
|
|
<div class="feature-highlight-visual">
|
|
<div class="feature-highlight-visual-card">
|
|
<img :src="section.image" :alt="section.imageAlt">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|