83 lines
2.3 KiB
Plaintext
83 lines
2.3 KiB
Plaintext
---
|
|
import type { SquidexEditable, Multilingual } from './SharedProperties.js';
|
|
import type { Brand } from "../data/models/multis/Brand";
|
|
import { getAssetById, getLocaleField } from "../data/api-client";
|
|
import path from "node:path";
|
|
import { renderMarkdown } from "../lib/rendering";
|
|
|
|
interface Props extends Multilingual, SquidexEditable {
|
|
brand: Brand,
|
|
}
|
|
|
|
const { brand, editToken, locale } = Astro.props;
|
|
|
|
let brandLogoImage = path.posix.join('/img', (await getAssetById(brand.logoImage[locale]))
|
|
.links['content']
|
|
.href
|
|
.split('/')
|
|
.reverse()
|
|
.filter((_value, index, array) => index < (array.length - index - 2))
|
|
.reverse()
|
|
.join('/'));
|
|
---
|
|
|
|
<div class="brand" data-squidex-token={editToken}>
|
|
<div class="flex">
|
|
{ brandLogoImage &&
|
|
<img src={brandLogoImage} alt={brand.brandName[locale]} title={brand.brandName[locale]} />
|
|
}
|
|
<div class="flex-right">
|
|
{getLocaleField(locale, brand.shortDescription) && <div class="short-desc"><Fragment set:html={renderMarkdown(getLocaleField(locale, brand.shortDescription)!)} /></div> }
|
|
</div>
|
|
</div>
|
|
{getLocaleField(locale, brand.longDescription) && <div class="after-flex"><Fragment set:html={renderMarkdown(getLocaleField(locale, brand.longDescription)!)} /></div> }
|
|
</div>
|
|
|
|
<style>
|
|
.brand {
|
|
margin-bottom: 2rem;
|
|
border: 1px solid rgba(var(--accent-light), 25%);
|
|
background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
|
|
padding: 0.5rem;
|
|
border-radius: 8px;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
text-align: left;
|
|
}
|
|
.brand img {
|
|
min-width: 8rem;
|
|
max-width: 10rem;
|
|
}
|
|
.brand .flex {
|
|
display: flex;
|
|
gap: 0.8rem;
|
|
align-items: center;
|
|
}
|
|
.brand .after-flex p {
|
|
text-indent: 5em each-line;
|
|
color: pink;
|
|
}
|
|
.brand .short-desc {
|
|
font-family: "Caveat", cursive;
|
|
font-size: 2.2rem;
|
|
}
|
|
.brand .float-left {
|
|
justify-content: flex-start;
|
|
}
|
|
.brand .flex-right {
|
|
justify-content: flex-start;
|
|
position: relative;
|
|
}
|
|
.brand 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;
|
|
}
|
|
.brand strong {
|
|
color: rgb(var(--accent-light));
|
|
/* font-weight: 800; */
|
|
}
|
|
</style> |