File: /var/www/quadcode.com/src/components/blocks/blog/Poster.svelte
<script lang="ts">
import timeRead from '../../../assets/images/post/timeread.svg';
import calendar from '../../../assets/images/post/calendar.svg';
import views from '../../../assets/images/post/views.svg';
import type { IPost } from '$type/post';
import { loadEvent } from '../../../store';
import ShareButton from '../../button/ShareButton.svelte';
import { locale, defaultLocale, localeLink, t } from '$lib/translations';
export let className = '';
export let data: IPost;
let indicators: HTMLElement;
let poster: HTMLElement;
let posterWrote: HTMLElement;
const createDate = new Date(data.date);
const modifiedDate = new Date(data.modified);
const createMonthName = createDate.toLocaleString($locale, { month: 'long' });
const modifiedMonthName = modifiedDate.toLocaleString($locale, { month: 'long' });
const createText = $locale === defaultLocale ? createMonthName + ' ' + createDate.getDate() + ', ' + createDate.getFullYear() : createDate.toLocaleDateString($locale, {
year: 'numeric',
month: 'long',
day: 'numeric'
});
const modifiedText = modifiedMonthName + ' ' + modifiedDate.getDate() + ', ' + modifiedDate.getFullYear();
loadEvent.set(true);
</script>
<link rel="preload">
<div bind:this={poster} class="poster {className}">
<h1 class="poster__title">{data.title.rendered}</h1>
<div class="poster__titleIndicators">
<div class="poster__listItem">
<img alt="Time read icon" class="poster__listItemIcon" src={calendar} />
<div class="poster__listItemText">
<span>{$t('Updated')} {modifiedText}</span>
</div>
</div>
</div>
{#if data?.imageData?.large}
<div class="poster__content">
<img
src={data?.imageData.large}
loading="eager"
alt={data.title.rendered}
class="poster__contentBg"
width="100%"
height="100%"
/>
<div class="poster__nameplates">
{#if data?.tagsData}
{#each data.tagsData as tag}
<p class="poster__nameplate">{tag}</p>
{/each}
{/if}
</div>
</div>
{/if}
<div bind:this={posterWrote} class="poster__wrote">
<a href={`${localeLink()}/author/${data.authorData.slug}`} class="poster__author">
<img
alt={$t('blog.imageWrittenBy', { values: { name: data.authorData.name } })}
class="poster__wroteImage"
src={data.authorData.avatar.thumbnail}
/>
<div class="poster__wroteContent">
<p class="poster__wroteName">{data.authorData.name}</p>
<p class="poster__wroteText">{data.authorData.position}</p>
</div>
</a>
<div bind:this={indicators} class="poster__indicators">
<div class="poster__listItem">
<img alt="Time read icon" class="poster__listItemIcon" src={calendar} />
<div class="poster__listItemText">
<span>{createText}</span>
</div>
</div>
<div class="poster__listItem">
<img alt="Time read icon" class="poster__listItemIcon" src={timeRead} />
<div class="poster__listItemText">
<span>{data.estReadingTime} {$t('blog.readingTimeSuffix')}</span>
</div>
</div>
<div class="poster__listItem">
<img alt="Views icon" class="poster__listItemIcon" src={views} />
<div class="poster__listItemText">
<span>{data.views || 0} {$t('blog.viewsLabel')}</span>
</div>
</div>
<div class="poster__shreButton">
<ShareButton title={data.title.rendered} description={data.content.rendered}/>
</div>
</div>
</div>
{#if data.expertData?.name}
<a href={`${localeLink()}/author/${data.expertData?.slug}`} class="poster__expert">
<div class="poster__expertInfo">
<img
alt={$t('blog.imageWrittenBy', { values: { name: data.expertData?.name ?? '' } })}
class="poster__expertAvatar"
src={data.expertData?.avatar?.thumbnail}
/>
<div class="poster__expertTextContent">
<p class="poster__expertName">{data.expertData?.name}</p>
<p class="poster__expertJobTitle">{data.expertData?.position}</p>
</div>
</div>
<div class="poster__expertToken">
<svg width="176" height="36" viewBox="0 0 176 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="175" height="35" rx="17.5" stroke="#E62334"/>
<g clip-path="url(#clip0_3462_21147)">
<path d="M24.6561 10.8367C25.2072 9.72501 26.7928 9.72501 27.3439 10.8367L27.5471 11.2466C28.0557 12.2725 29.1962 12.8217 30.3154 12.5797L30.7626 12.483C31.9753 12.2208 32.964 13.4605 32.4384 14.5845L32.8914 14.7963L32.4384 14.5845L32.2446 14.9989C31.7597 16.0362 32.0413 17.2703 32.9284 17.9944L33.2828 18.2838C34.2439 19.0684 33.8911 20.6143 32.6847 20.9042L32.2398 21.0111C31.1265 21.2787 30.3372 22.2684 30.3241 23.4133L30.3189 23.8708C30.3047 25.1115 28.8761 25.7995 27.8972 25.037L27.5363 24.7559C26.6329 24.0522 25.3671 24.0522 24.4637 24.7559L24.1028 25.037C23.1239 25.7995 21.6953 25.1115 21.6811 23.8708L21.6759 23.4133C21.6628 22.2684 20.8735 21.2787 19.7602 21.0111L19.3153 20.9042C18.1089 20.6143 17.7561 19.0684 18.7172 18.2838L19.0717 17.9944C19.9587 17.2703 20.2403 16.0362 19.7554 14.9989L19.5616 14.5845C19.036 13.4605 20.0247 12.2208 21.2374 12.483L21.6846 12.5797C22.8038 12.8217 23.9443 12.2725 24.4529 11.2466L24.6561 10.8367Z" stroke="#E62334"/>
<path d="M23.5 18L25.5 20L29 16" stroke="#E62334" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path d="M50.3103 23H43.3183V12.328H50.3103V13.512H44.6463V16.952H50.1983V18.136H44.6463V21.816H50.3103V23ZM58.7797 23H57.3877L55.0677 19.832L52.7477 23H51.3717L54.3317 19.032L51.5317 15.272H52.9237L55.0677 18.216L57.2117 15.272H58.6037L55.8037 19.032L58.7797 23ZM63.9689 23.192C62.9129 23.192 61.9849 22.696 61.3609 21.832V25.944H60.1609V15.272H61.3609V16.424C61.9209 15.64 62.8809 15.08 63.9689 15.08C66.0009 15.08 67.4089 16.616 67.4089 19.128C67.4089 21.624 66.0009 23.192 63.9689 23.192ZM63.6649 22.12C65.2169 22.12 66.1449 20.84 66.1449 19.128C66.1449 17.416 65.2169 16.152 63.6649 16.152C62.7209 16.152 61.7769 16.712 61.3609 17.384V20.872C61.7769 21.544 62.7209 22.12 63.6649 22.12ZM72.8052 23.192C70.5172 23.192 68.8692 21.544 68.8692 19.128C68.8692 16.888 70.4692 15.08 72.6772 15.08C75.0132 15.08 76.3892 16.904 76.3892 19.224V19.528H70.1332C70.2292 20.984 71.2532 22.2 72.9172 22.2C73.7972 22.2 74.6932 21.848 75.3012 21.224L75.8772 22.008C75.1092 22.776 74.0692 23.192 72.8052 23.192ZM75.2052 18.648C75.1892 17.496 74.4212 16.072 72.6612 16.072C71.0132 16.072 70.1972 17.464 70.1332 18.648H75.2052ZM79.5328 23H78.3328V15.272H79.5328V16.52C80.1568 15.704 81.0528 15.112 82.1088 15.112V16.344C81.9648 16.312 81.8208 16.296 81.6288 16.296C80.8928 16.296 79.8848 16.904 79.5328 17.528V23ZM85.5661 23.192C84.4301 23.192 83.8541 22.536 83.8541 21.384V16.328H82.5741V15.272H83.8541V13.16H85.0541V15.272H86.6221V16.328H85.0541V21.128C85.0541 21.704 85.3101 22.12 85.8381 22.12C86.1741 22.12 86.4941 21.976 86.6541 21.8L87.0061 22.696C86.7021 22.984 86.2701 23.192 85.5661 23.192ZM100.234 23H98.6662L95.9462 18.76H93.8182V23H92.4902V12.328H96.7782C98.7302 12.328 100.122 13.576 100.122 15.544C100.122 17.464 98.8102 18.52 97.3542 18.648L100.234 23ZM96.6182 17.592C97.8822 17.592 98.7462 16.744 98.7462 15.544C98.7462 14.344 97.8822 13.512 96.6182 13.512H93.8182V17.592H96.6182ZM105.18 23.192C102.892 23.192 101.244 21.544 101.244 19.128C101.244 16.888 102.844 15.08 105.052 15.08C107.388 15.08 108.764 16.904 108.764 19.224V19.528H102.508C102.604 20.984 103.628 22.2 105.292 22.2C106.172 22.2 107.068 21.848 107.676 21.224L108.252 22.008C107.484 22.776 106.444 23.192 105.18 23.192ZM107.58 18.648C107.564 17.496 106.796 16.072 105.036 16.072C103.388 16.072 102.572 17.464 102.508 18.648H107.58ZM114.084 23H112.772L109.556 15.272H110.852L113.428 21.608L115.988 15.272H117.3L114.084 23ZM119.144 14.168C118.712 14.168 118.344 13.816 118.344 13.368C118.344 12.92 118.712 12.552 119.144 12.552C119.592 12.552 119.96 12.92 119.96 13.368C119.96 13.816 119.592 14.168 119.144 14.168ZM119.752 23H118.552V15.272H119.752V23ZM125.633 23.192C123.345 23.192 121.697 21.544 121.697 19.128C121.697 16.888 123.297 15.08 125.505 15.08C127.841 15.08 129.217 16.904 129.217 19.224V19.528H122.961C123.057 20.984 124.081 22.2 125.745 22.2C126.625 22.2 127.521 21.848 128.129 21.224L128.705 22.008C127.937 22.776 126.897 23.192 125.633 23.192ZM128.033 18.648C128.017 17.496 127.249 16.072 125.489 16.072C123.841 16.072 123.025 17.464 122.961 18.648H128.033ZM139.049 23H137.849L135.833 16.792L133.817 23H132.617L130.153 15.272H131.401L133.289 21.432L135.321 15.272H136.345L138.377 21.432L140.265 15.272H141.513L139.049 23ZM146.399 23.192C144.111 23.192 142.463 21.544 142.463 19.128C142.463 16.888 144.063 15.08 146.271 15.08C148.607 15.08 149.983 16.904 149.983 19.224V19.528H143.727C143.823 20.984 144.847 22.2 146.511 22.2C147.391 22.2 148.287 21.848 148.895 21.224L149.471 22.008C148.703 22.776 147.663 23.192 146.399 23.192ZM148.799 18.648C148.783 17.496 148.015 16.072 146.255 16.072C144.607 16.072 143.791 17.464 143.727 18.648H148.799ZM158.727 23H157.527V21.848C156.951 22.632 156.007 23.192 154.919 23.192C152.903 23.192 151.479 21.656 151.479 19.144C151.479 16.68 152.887 15.08 154.919 15.08C155.959 15.08 156.903 15.592 157.527 16.44V12.328H158.727V23ZM155.207 22.12C156.167 22.12 157.095 21.576 157.527 20.904V17.4C157.095 16.728 156.167 16.152 155.207 16.152C153.655 16.152 152.727 17.432 152.727 19.144C152.727 20.856 153.655 22.12 155.207 22.12Z" fill="#E62334"/>
<defs>
<clipPath id="clip0_3462_21147">
<rect width="20" height="20" fill="white" transform="translate(16 8)"/>
</clipPath>
</defs>
</svg>
</div>
</a>
{/if}
</div>
<style lang="scss">
@import 'src/scss/media';
@import 'src/scss/mixins';
@import 'src/scss/variables';
.poster {
display: flex;
flex-direction: column;
&__titleIndicators {
display: flex;
order: 1;
margin-bottom: 26px;
@include breakpoint-down('deskS') {
margin-bottom: 24px;
}
@include breakpoint-down('tabL') {
margin-bottom: 18px;
}
@include breakpoint-down('tabM') {
margin-bottom: 16px;
}
}
&__content {
position: relative;
width: 100%;
background: $postPoster;
min-height: 400px;
height: 381px;
border-radius: 24px;
overflow: hidden;
margin-bottom: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 40px 120px;
order: 2;
@include breakpoint-down('deskL') {
padding-left: 96px;
}
@include breakpoint-down('deskS') {
min-height: 320px;
margin-bottom: 14px;
padding: 48px 79px 41px;
}
@include breakpoint-down('tabM') {
min-height: 335px;
height: 335px;
margin-bottom: 16px;
padding: 35px 25px 22px 20px;
}
}
&__contentBg {
width: 100%;
height: 400px;
object-position: center;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
@include breakpoint-down('tabM') {
height: 335px;
}
}
&__nameplates {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
position: absolute;
z-index: 1;
bottom: 13px;
left: 12px;
flex-wrap: wrap;
}
&__nameplate {
@include smallDefault;
padding: 6px 20px;
border-radius: 40px;
background: $redPrimary;
color: $techWhite;
}
&__title {
@include postTitleH1;
font-weight: 700;
width: 100%;
max-width: 920px;
color: #141414;
position: relative;
z-index: 1;
order: 1;
margin-bottom: 8px;
@include breakpoint-down('deskL') {
max-width: 640px;
}
@include breakpoint-down('deskS') {
max-width: 530px;
}
@include breakpoint-down('tabM') {
margin-bottom: 14px;
}
}
&__wrote {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
position: relative;
z-index: 1;
order: 3;
margin-bottom: 12px;
@include breakpoint-down('deskS') {
gap: 8px;
}
@include breakpoint-down('tabL') {
flex-direction: column-reverse;
flex-wrap: wrap;
align-items: start;
gap: 10px;
}
@include breakpoint-down('tabM') {
width: 100%;
font-size: 31px;
line-height: 32.55px;
margin-bottom: 10px;
order: 2;
align-items: start;
}
}
&__author {
display: flex;
gap: 10px;
justify-content: center;
}
&__expert {
order: 4;
display: flex;
justify-content: space-between;
margin-top: 12px;
@include breakpoint-down('tabM') {
margin-bottom: 14px;
}
}
&__expertInfo {
display: flex;
gap: 10px;
}
&__expertAvatar {
width: 32px;
min-width: 32px;
height: 32px;
object-fit: cover;
object-position: center;
border-radius: 100%;
}
&__expertTextContent {
display: flex;
flex-direction: column;
}
&__expertName {
@include xSmallDefault;
font-weight: 700;
color: #141414;
@include breakpoint-down('deskL') {
font-size: 14px;
line-height: 20px;
}
}
&__expertJobTitle {
@include xSmallDefault;
color: #141414;
}
&__indicators{
display: flex;
gap: 24px;
@include breakpoint-down('tabL') {
width: 100%;
justify-content: space-between;
margin-bottom: 12px;
gap: 0;
order: 5;
}
}
&__wroteImage {
width: 32px;
min-width: 32px;
height: 32px;
object-fit: cover;
object-position: center;
border-radius: 100%;
}
&__wroteContent {
display: flex;
flex-direction: column;
}
&__wroteText {
@include xSmallDefault;
color: #141414;
}
&__wroteName {
@include xSmallDefault;
font-weight: 700;
color: #141414;
@include breakpoint-down('deskL') {
font-size: 14px;
line-height: 20px;
}
}
&__shreButton{
}
&__list {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 42px;
@include breakpoint-down('deskL') {
padding: 0 34px;
}
@include breakpoint-down('deskS') {
padding: 0 30px;
}
@include breakpoint-down('tabM') {
flex-wrap: wrap;
padding: 0;
row-gap: 4px;
}
}
&__listItem {
display: flex;
align-items: center;
gap: 4px;
@include breakpoint-down('deskL') {
gap: 8px;
}
@include breakpoint-down('deskS') {
gap: 2px;
}
@include breakpoint-down('tabM') {
width: calc(100% / 2);
}
&:nth-child(1) {
@include breakpoint-down('deskS') {
order: 1;
}
}
&:nth-child(2) {
@include breakpoint-down('deskS') {
order: 2;
}
.poster__listItemText {
p {
@include breakpoint-down('deskS') {
display: none;
}
}
}
}
&:nth-child(3) {
@include breakpoint-down('deskS') {
order: 4;
}
@include breakpoint-down('tabM') {
justify-content: flex-end;
}
.poster__listItemText {
p {
@include breakpoint-down('deskS') {
display: none;
}
}
}
}
&:nth-child(4) {
@include breakpoint-down('deskS') {
order: 3;
}
}
}
&__listItemIcon {
width: 24px;
min-width: 24px;
height: 24px;
}
&__listItemText {
@include smallDefault;
color: $techBlueSecondary;
p {
display: inline;
}
span {
@include smallCTA;
display: inline;
color: $techBluePrimary;
}
}
}
</style>