34 lines
1.1 KiB
Vue
34 lines
1.1 KiB
Vue
<script setup>
|
|
/**
|
|
* RqCard.vue — Carte conteneur RecruitQuizz
|
|
*
|
|
* @prop padding 'none' | 'sm' | 'md' | 'lg'
|
|
* @prop hover Boolean — active l'effet de survol (lift)
|
|
* @prop accent 'primary' | 'gold' | 'green' | 'red' — bordure colorée en bas
|
|
*/
|
|
defineProps({
|
|
padding: { type: String, default: 'md' },
|
|
hover: { type: Boolean, default: false },
|
|
accent: { type: String, default: null },
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="[
|
|
'bg-surface rounded-2xl border border-ink/[0.07] shadow-sm',
|
|
hover && 'transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md',
|
|
accent === 'primary' && 'border-b-2 border-b-primary',
|
|
accent === 'gold' && 'border-b-2 border-b-highlight',
|
|
accent === 'green' && 'border-b-2 border-b-success',
|
|
accent === 'red' && 'border-b-2 border-b-accent',
|
|
padding === 'none' && 'overflow-hidden',
|
|
padding === 'sm' && 'p-4',
|
|
padding === 'md' && 'p-5',
|
|
padding === 'lg' && 'p-6',
|
|
]"
|
|
>
|
|
<slot />
|
|
</div>
|
|
</template>
|