matthieu
5b9c4ca09d
Rework CSS theme (app.css), navbar layout, dashboard page, machine detail, catalog pages, and various form/display components for better consistency and mobile responsiveness. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
82 lines
1.7 KiB
Vue
82 lines
1.7 KiB
Vue
<template>
|
|
<section :class="sectionClasses">
|
|
<div :class="contentClasses">
|
|
<div :class="['space-y-3', maxWidthClass]">
|
|
<component :is="headingTag" v-if="title" class="text-4xl font-bold tracking-tight">
|
|
{{ title }}
|
|
</component>
|
|
<p v-if="subtitle" class="text-sm opacity-80 leading-relaxed">
|
|
{{ subtitle }}
|
|
</p>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
subtitle: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
gradientFrom: {
|
|
type: String,
|
|
default: 'from-primary'
|
|
},
|
|
gradientTo: {
|
|
type: String,
|
|
default: 'to-secondary'
|
|
},
|
|
minHeight: {
|
|
type: String,
|
|
default: 'min-h-[25vh]'
|
|
},
|
|
maxWidth: {
|
|
type: String,
|
|
default: 'max-w-xl'
|
|
},
|
|
rounded: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
alignment: {
|
|
type: String,
|
|
default: 'center',
|
|
validator: value => ['center', 'start', 'end'].includes(value)
|
|
},
|
|
headingTag: {
|
|
type: String,
|
|
default: 'h1'
|
|
}
|
|
})
|
|
|
|
const sectionClasses = computed(() => {
|
|
const classes = ['hero', 'bg-gradient-to-br', props.gradientFrom, props.gradientTo, props.minHeight]
|
|
if (props.rounded) {
|
|
classes.push('rounded-xl', 'overflow-hidden')
|
|
}
|
|
return classes
|
|
})
|
|
|
|
const contentClasses = computed(() => {
|
|
const base = ['hero-content', 'text-neutral-content']
|
|
if (props.alignment === 'center') {
|
|
base.push('text-center')
|
|
} else if (props.alignment === 'start') {
|
|
base.push('justify-start', 'text-left')
|
|
} else if (props.alignment === 'end') {
|
|
base.push('justify-end', 'text-right')
|
|
}
|
|
return base
|
|
})
|
|
|
|
const maxWidthClass = computed(() => props.maxWidth)
|
|
</script>
|