mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-11-15 21:56:12 +08:00
39 lines
1.5 KiB
Vue
39 lines
1.5 KiB
Vue
<template>
|
|
<div class="!w-[300px] rounded bg-sn-super-light-grey gap-4 p-6 flex flex-col h-full">
|
|
<div id="info-component-header">
|
|
<h3 class="modal-title text-sn-dark-grey">{{ infoParams.title }}</h3>
|
|
</div>
|
|
|
|
<div class="grid grid-flow-row h-fit" v-for="(element, _index) in infoParams.elements" :key="element.id">
|
|
<a v-if="element.linkTo" :href="element.linkTo" target="_blank" class="flex flex-row gap-3 w-fit text-sn-blue hover:no-underline hover:text-sn-blue-hover">
|
|
<button class="btn btn-secondary btn-sm icon-btn hover:!border-sn-light-grey">
|
|
<i :class="`sn-icon ${element.icon}`" class="h-fit size-9"></i>
|
|
</button>
|
|
<div class="flex flex-col gap-2 w-fit">
|
|
<div class="text-sn-blue font-bold hover:text-sn-blue-hover my-auto">{{ element.label }}</div>
|
|
</div>
|
|
</a>
|
|
<div v-else class="flex flex-row gap-3">
|
|
<button class="btn btn-secondary btn-sm icon-btn hover:!border-sn-light-grey hover:cursor-auto">
|
|
<i :class="`sn-icon ${element.icon}`" class="h-fit text-sn-dark-grey size-9"></i>
|
|
</button>
|
|
<div class="flex flex-col gap-2 w-52">
|
|
<div class="text-sn-dark-grey font-bold">{{ element.label }}</div>
|
|
<div class="text-sn-dark-grey">{{ element.subtext }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'InfoComponent',
|
|
props: {
|
|
infoParams: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
}
|
|
};
|
|
</script>
|