36 lines
1.1 KiB
Vue
36 lines
1.1 KiB
Vue
<template>
|
|
<section class="px-4">
|
|
<header class="flex justify-between items-end mb-4">
|
|
<div>
|
|
<div v-if="title" class="font-bold uppercase">{{ title }}</div>
|
|
<div v-if="description" class="text-sm text-base-content/50">{{ description }}</div>
|
|
</div>
|
|
|
|
<div v-if="moreLink">
|
|
<RouterLink :to="moreLink" class="btn btn-soft btn-xs" @click="haptic.selectionChanged">
|
|
{{ moreText || 'Смотреть всё' }}
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
|
|
</svg>
|
|
</RouterLink>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<slot></slot>
|
|
</main>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {useHapticFeedback} from "@/composables/useHapticFeedback.js";
|
|
|
|
const props = defineProps({
|
|
title: String,
|
|
description: String,
|
|
moreLink: [String, Object],
|
|
moreText: String,
|
|
});
|
|
|
|
const haptic = useHapticFeedback();
|
|
</script>
|