72 lines
2.1 KiB
Vue
72 lines
2.1 KiB
Vue
<template>
|
|
<div
|
|
:class="[
|
|
variant === 'desktop'
|
|
? (isBoursecu ? 'dabout-content--boursecu' : 'dabout-content--default')
|
|
: (isBoursecuProject()
|
|
? 'border-solid border-2 border-primary text-primary rounded-[12px] p-4 text-xs leading-5 mobile-content-box'
|
|
: 'bg-primary text-white rounded-[12px] p-4 text-xs leading-5 mobile-content-box'),
|
|
'dabout-content',
|
|
]"
|
|
>
|
|
<div :class="variant !== 'desktop' ? 'mobile-content-box__scroll' : undefined">
|
|
<template v-for="(section, sectionIndex) in aboutSections" :key="sectionIndex">
|
|
<div
|
|
v-if="sectionIndex > 0"
|
|
:class="variant === 'desktop' ? 'dabout-content__divider' : 'w-full h-1px my-3 bg-tertiary'"
|
|
></div>
|
|
<div
|
|
v-if="section.title"
|
|
:class="variant === 'desktop' ? 'dabout-content__title' : 'font-bold text-sm mb-2'"
|
|
>
|
|
{{ section.title }}
|
|
</div>
|
|
<div
|
|
v-for="(paragraph, paragraphIndex) in section.paragraphs ?? []"
|
|
:key="`paragraph-${sectionIndex}-${paragraphIndex}`"
|
|
:class="[
|
|
variant === 'desktop' ? 'dabout-content__paragraph' : '',
|
|
paragraphIndex > 0 ? 'mt-3' : '',
|
|
]"
|
|
>
|
|
{{ paragraph }}
|
|
</div>
|
|
<ul
|
|
v-if="(section.items ?? []).length"
|
|
:class="variant === 'desktop' ? 'dabout-content__list' : ''"
|
|
>
|
|
<li
|
|
v-for="(item, itemIndex) in section.items ?? []"
|
|
:key="`item-${sectionIndex}-${itemIndex}`"
|
|
:class="variant === 'desktop' ? 'dabout-content__list-item' : 'mt-2'"
|
|
>
|
|
<template v-if="variant !== 'desktop'">• {{ item }}</template>
|
|
<template v-else>{{ item }}</template>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
<div
|
|
v-if="variant !== 'desktop'"
|
|
class="w-full h-1px my-3 bg-tertiary"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { useAboutPageContext } from '../composables/useAboutPage'
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
variant?: 'mobile' | 'desktop'
|
|
}>(),
|
|
{ variant: 'mobile' },
|
|
)
|
|
|
|
const {
|
|
aboutSections,
|
|
isBoursecu,
|
|
isBoursecuProject,
|
|
} = useAboutPageContext()
|
|
</script>
|