113 lines
2.9 KiB
Plaintext
113 lines
2.9 KiB
Plaintext
---
|
|
import type { Seller } from "../data/models/multis/Seller";
|
|
import { getAssetById, getLocaleField } from "../data/api-client";
|
|
import path from "node:path";
|
|
import { renderMarkdown } from "../lib/rendering";
|
|
import type { Multilingual, SquidexEditable } from "./SharedProperties";
|
|
|
|
interface Props extends Multilingual, SquidexEditable {
|
|
seller: Seller,
|
|
}
|
|
|
|
const { seller, editToken, locale } = Astro.props;
|
|
|
|
let sellerLogoImageAsset = seller.logoImage[locale] ? await getAssetById(seller.logoImage[locale][0]) : undefined;
|
|
let sellerLogoImage = sellerLogoImageAsset ? path.posix.join('/img',
|
|
sellerLogoImageAsset.links['content']
|
|
.href
|
|
.split('/')
|
|
.reverse()
|
|
.filter((_value, index, array) => index < (array.length - index - 2))
|
|
.reverse()
|
|
.join('/')) : '';
|
|
---
|
|
|
|
<div class="seller" data-squidex-token={editToken}>
|
|
<div class="flex">
|
|
{ sellerLogoImage ?
|
|
( sellerLogoImage &&
|
|
sellerLogoImageAsset?.metadata['background-color']
|
|
?
|
|
<img
|
|
src={sellerLogoImage}
|
|
alt={seller.sellerName[locale]}
|
|
title={seller.sellerName[locale]}
|
|
style={`background-color: ${sellerLogoImageAsset.metadata['background-color']}`}
|
|
/>
|
|
:
|
|
<img
|
|
src={sellerLogoImage}
|
|
alt={seller.sellerName[locale]}
|
|
title={seller.sellerName[locale]}
|
|
/>
|
|
) : seller.sellerName[locale]
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="seller-dark" data-squidex-token={editToken}>
|
|
<div class="flex">
|
|
{seller.sellerBio && seller.sellerBio[locale] && <div class="after-flex"><Fragment set:html={renderMarkdown(seller.sellerBio[locale]||'')} /></div> }
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.seller, .seller-dark {
|
|
margin-bottom: 2rem;
|
|
border: 1px solid rgba(var(--accent-light), 25%);
|
|
padding: 0.5rem;
|
|
border-radius: 8px;
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
text-align: left;
|
|
}
|
|
.seller {
|
|
background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
|
|
}
|
|
.seller-dark {
|
|
padding: 1rem;
|
|
background-color: rgb(35, 38, 45);
|
|
}
|
|
.seller img {
|
|
min-width: 8rem;
|
|
max-width: 10rem;
|
|
border-radius: 7px;
|
|
}
|
|
.seller .flex {
|
|
display: flex;
|
|
gap: 0.8rem;
|
|
align-items: center;
|
|
}
|
|
.seller .after-flex p {
|
|
text-indent: 5em each-line;
|
|
color: pink;
|
|
}
|
|
.seller .short-desc {
|
|
font-family: "Caveat", cursive;
|
|
font-size: 2.2rem;
|
|
}
|
|
.seller .float-left {
|
|
justify-content: flex-start;
|
|
}
|
|
.seller .flex-right {
|
|
justify-content: flex-start;
|
|
position: relative;
|
|
}
|
|
.seller code {
|
|
font-size: 0.8em;
|
|
font-weight: bold;
|
|
background: rgba(var(--accent-light), 12%);
|
|
color: rgb(var(--accent-light));
|
|
border-radius: 4px;
|
|
padding: 0.3em 0.4em;
|
|
}
|
|
.seller strong {
|
|
color: rgb(var(--accent-light));
|
|
/* font-weight: 800; */
|
|
}
|
|
</style>
|
|
|
|
<style is:global>
|
|
.seller a, .seller a:link, .seller a:visited, .seller-dark a, .seller-dark a:link, .seller-dark a:visited {
|
|
text-decoration: underline;
|
|
}
|
|
</style> |