add post item

src/components/common/PostItem/PostItem.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { PropType, computed } from 'vue';
+import { IMarkdownOptions } from './types';
+
+const props = defineProps({
+  data: {
+    type: Object as PropType<IMarkdownOptions>,
+    required: true,
+  },
+  small: Boolean,
+});
+
+const day = computed(() => String(new Date(props.data.date).getDate() + 1).padStart(2, '0'));
+const month = computed(() => String(new Date(props.data.date).toLocaleString('en-us', { month: 'short' }).toUpperCase()));
+const year = computed(() => String(new Date(props.data.date).getFullYear()));
+
+const componentName = computed(() => ((props.data.slug || props.data.route) ? 'router-link' : 'div'));
+</script>
+
+<template>
+  <component
+    :is="componentName"
+    :to="{ name: data.route, params: { slug: data.slug } }"
+    v-bind="$attrs"
+    class="post-item"
+    :class="{ 'is--small': small }"
+    :aria-label="data.title"
+    itemscope
+    itemtype="https://schema.org/BlogPosting"
+  >
+    <div
+      class="post-item__publish-date is--small-2"
+      itemprop="datePublished"
+    >
+      {{ day }} {{ month }}, {{ year }}
+    </div>
+    <div class="post-item__details">
+      <div class="post-item__details-title">
+        <h3
+          class="post-item__name is--h4__title"
+          itemprop="headline"
+        >
+          {{ data.title }}
+        </h3>
+        <div
+          v-if="$slots.label"
+          class="post-item__details-label"
+        >
+          <slot name="label" />
+        </div>
+      </div>
+      <p
+        class="post-item__excerpt is--body"
+        itemprop="description"
+      >
+        {{ data.description }}
+      </p>
+    </div>
+    <div
+      v-if="$slots.img"
+      class="post-item__image"
+    >
+      <slot name="img" />
+    </div>
+  </component>
+</template>
+
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.post-item
+  $root: &
+
+  padding: 20px 0
+  display: flex
+  align-items: center
+  justify-content: space-between
+  text-decoration: none
+  border-top: 1px solid $gray-40
+  flex-direction: row
+  cursor: pointer
+  @include media-gte(tablet)
+    &:hover
+      background-color: $white
+
+  &.is--small
+    flex-direction: column
+    flex-wrap: wrap
+    align-items: flex-start
+    border: none
+    justify-content: flex-start
+
+  @include media-lte(tablet)
+    flex-direction: column
+    flex-wrap: wrap
+    align-items: flex-start
+
+  &:not(.is--small):last-child
+    border-bottom: 1px solid $gray-40
+
+  .mobile
+    opacity: 0.6
+    color: $black
+    text-align: left
+    margin-bottom: 15px
+    order: 0
+    @media screen and (min-width: 768px)
+      display: none
+
+  &__publish-date
+    text-align: center
+    padding-right: 40px
+    display: flex
+    flex-direction: column
+    flex-shrink: 0
+    justify-content: center
+    align-items: center
+    color: $gray-70
+
+    @include media-gte(tablet)
+      #{$root}:not(.is--small) &
+        flex-basis: 140px
+
+    #{$root}.is--small &
+      margin-bottom: 12px
+
+    @include media-lte(tablet)
+      margin-bottom: 12px
+
+  &__details
+    width: 100%
+    padding-right: 30px
+    display: flex
+    flex-direction: column
+    justify-content: center
+    #{$root}.is--small &
+      order: 2
+
+    @include media-lte(tablet)
+      order: 2
+
+    #{$root}__name
+      color: $black
+      margin-bottom: 8px
+
+  &__details-title
+    display: flex
+    align-items: center
+    justify-content: space-between
+
+  &__details-label
+    padding: 6px 8px
+    margin-bottom: 15px
+    display: flex
+    align-items: center
+    justify-content: center
+    background: $primary
+    border-radius: 4px
+    font-weight: 400
+    font-size: 14px
+    line-height: 22px
+    text-transform: capitalize
+    letter-spacing: 0.3px
+    color: $black
+
+  &__image
+    margin-left: auto
+    margin-right: 20px
+    width: 188px
+    height: 125px
+    flex-shrink: 0
+    @include media-lte(tablet)
+      order: 1
+      width: 100%
+      margin-bottom: 15px
+      height: 122px
+      min-width: 100%
+
+    #{$root}.is--small &
+      order: 1
+      width: 100%
+      margin-bottom: 23px
+      height: 122px
+      min-width: 100%
+
+  &__excerpt
+    color: $gray-80
+
+</style>
+
+<style lang="scss">
+.post-item
+  &__image
+    img
+      object-fit: cover
+      width: 100%
+      height: 100%
+</style>

src/components/common/PostItem/index.sass

@@ -0,0 +1,2 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_global.sass'

src/components/common/PostItem/types.ts

@@ -0,0 +1,28 @@
+
+export interface IMarkdownOptions {
+  title: string;
+  subTitle?: string;
+  description: string;
+  date: string;
+  image: string;
+  slug?: string;
+  authors?: string;
+  draft?: boolean;
+  tags?: string[];
+  route?: string;
+}
+
+export interface IPostContent extends IMarkdownOptions {
+  content: string;
+}
+
+export interface IAuthor {
+  title: string;
+  date: string;
+  draft?: boolean;
+  image: string;
+  position?: string;
+  description: string;
+  favoriteTags?: string[];
+  slug?: string;
+}