33 lines
1.2 KiB
Vue
33 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import type { SectionId, SectionLayout } from '@/content/types';
|
|
|
|
defineProps<{
|
|
id: SectionId;
|
|
layout: Exclude<SectionLayout, 'hero'>;
|
|
eyebrow?: string;
|
|
heading: string;
|
|
/** Roadside sign marker, rendered as a decorative CSS exit plate. */
|
|
exit?: string | undefined;
|
|
/** Next chapter label for the plate's "then" line (decorative, CSS-generated). */
|
|
nextLabel?: string | undefined;
|
|
/** Next chapter's exit number, for the end-of-chapter "next exit" sign. */
|
|
nextExit?: string | undefined;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<section :id="id" class="portfolio-section" :aria-labelledby="`${id}-heading`" :data-layout="layout" :data-exit="exit" :data-next="nextLabel" :data-next-exit="nextExit">
|
|
<div v-if="$slots.lead" class="project-stage__lead">
|
|
<p v-if="eyebrow" class="section-eyebrow">{{ eyebrow }}</p>
|
|
<h2 :id="`${id}-heading`" tabindex="-1">{{ heading }}</h2>
|
|
<slot name="lead" />
|
|
</div>
|
|
<template v-else>
|
|
<p v-if="eyebrow" class="section-eyebrow">{{ eyebrow }}</p>
|
|
<h2 :id="`${id}-heading`" tabindex="-1">{{ heading }}</h2>
|
|
</template>
|
|
<slot v-if="$slots.lead" />
|
|
<div v-else class="chapter-body"><slot /></div>
|
|
</section>
|
|
</template>
|