Add Answer component for rich panel

This commit is contained in:
Korbs 2024-10-23 16:47:29 -04:00
parent df07435874
commit 48b9140952

View file

@ -0,0 +1,50 @@
---
// Properties
const { Image, Link, Title, Description, Table, Sublinks } = Astro.props;
// Configuration
import {DEFAULT_IMAGE_PROXY} from "@utils/GetConfig"
// Toggle Functions
if (Image === null) {
var UseImage = false
} else {
var UseImage = true
}
---
<div class="answer-panel">
<h2>{Title}</h2>
<a href={Link}>{Link}</a>
<p>{UseImage ? <img src={DEFAULT_IMAGE_PROXY + '/' + Image} style="opacity: 0; transition: 1s opacity;" onload="this.style.opacity = '1'" /> : null} {Description}</p>
<slot name="table" />
<slot name="sublinks" />
</div>
<style lang="scss">
.answer-panel {
display: flex;
flex-direction: column;
gap: 6px;
background: white;
border-radius: 6px;
padding: 12px;
* {
margin: 0px;
}
img {
border-radius: 6px;
border: 2px rgb(170, 170, 170) solid;
float: right;
width: 44%;
margin: 0px 0px 16px 16px;
}
a {
font-size: 12px;
}
p {
font-size: 16px;
}
}
</style>