Mamalizz
46 lines
1.0 KiB
Vue
46 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
// types
|
|
|
|
type Props = {
|
|
title: string;
|
|
borderLess?: boolean;
|
|
};
|
|
|
|
// props
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
borderLess: false,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col w-full gap-5">
|
|
<div
|
|
class="flex flex-col items-start"
|
|
:class="{
|
|
'border-b border-slate-200 pb-5': borderLess,
|
|
}"
|
|
>
|
|
<div
|
|
class="w-full flex items-center justify-between h-[2rem] lg:h-[3rem] lg:px-5"
|
|
>
|
|
<span class="text-sm lg:text-lg">{{ title }}</span>
|
|
<slot name="button" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="w-full flex flex-col border rounded-xl"
|
|
:class="{
|
|
'border-none': borderLess,
|
|
'border-slate-200': !borderLess,
|
|
}"
|
|
>
|
|
<div class="w-full p-5">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|