101 lines
1.8 KiB
Plaintext
101 lines
1.8 KiB
Plaintext
---
|
|
import MardownContent from '../components/MardownContent.astro';
|
|
import { getStrapiMedia, getStrapiBaseUrl } from '../lib/strapi';
|
|
|
|
interface Props {
|
|
entry: {
|
|
data: {
|
|
name: string;
|
|
description: string;
|
|
mainImage: {
|
|
url: string;
|
|
alternativeText: string;
|
|
};
|
|
};
|
|
};
|
|
}
|
|
|
|
const { entry } = Astro.props;
|
|
const BASE_URL = getStrapiBaseUrl();
|
|
---
|
|
<div class="element-view">
|
|
<div class="element-content">
|
|
<div class="element-text">
|
|
<h1>{entry.data.name}</h1>
|
|
<MardownContent content={entry.data.description} />
|
|
</div>
|
|
|
|
{entry.data.mainImage && (
|
|
<div class="element-image">
|
|
<img
|
|
src={getStrapiMedia(entry.data.mainImage.url, BASE_URL)}
|
|
alt={entry.data.mainImage.alternativeText}
|
|
class="main-image"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.element-view {
|
|
max-width: 56rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.element-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.element-text {
|
|
order: 2;
|
|
}
|
|
|
|
.element-image {
|
|
order: 1;
|
|
}
|
|
|
|
.element-view h1 {
|
|
font-size: 2.25rem;
|
|
font-weight: 700;
|
|
color: #111827;
|
|
margin-bottom: 1.5rem;
|
|
margin-top: 2rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.main-image {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
/* Desktop styles */
|
|
@media (min-width: 768px) {
|
|
.element-content {
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
gap: 3rem;
|
|
}
|
|
|
|
.element-text {
|
|
order: 1;
|
|
flex: 1;
|
|
}
|
|
|
|
.element-image {
|
|
order: 2;
|
|
flex-shrink: 0;
|
|
width: 300px;
|
|
}
|
|
|
|
.main-image {
|
|
width: 300px;
|
|
height: auto;
|
|
}
|
|
}
|
|
</style> |