Add Answer component for rich panel
This commit is contained in:
parent
df07435874
commit
48b9140952
1 changed files with 50 additions and 0 deletions
50
source/src/components/search/Answer.astro
Normal file
50
source/src/components/search/Answer.astro
Normal 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>
|
Loading…
Reference in a new issue