init

app/components/MaterialsItem.vue

@@ -0,0 +1,101 @@
+<script lang="ts" setup="">
+import dayjs from "dayjs";
+import ru from 'dayjs/locale/ru'
+import type {Material} from "~/stores/materials/types.materials";
+import IconCalendar from "~/components/icons/iconCalendar.vue";
+
+dayjs.locale(ru);
+interface Props {
+  item: Material
+}
+
+const props = defineProps<Props>()
+
+const date = computed(() => dayjs(props.item.datetime).format('D MMMM'))
+</script>
+
+<template>
+  <div class="item-container">
+    <div class="date-container">
+      <IconCalendar class="icon" />
+      <span class="date">{{date}}</span>
+    </div>
+
+    <div class="item-content" >
+      <h2 class="title">{{item.title}}</h2>
+      <p class="description">{{item.short_description}}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.item-container {
+  border-radius: 24px;
+  padding: 32px 24px;
+  transition: all .3s ease;
+  box-shadow: unset;
+  background: #fff;
+  box-sizing: border-box;
+  @include mixins.square(276px);
+
+  &:hover {
+    cursor: pointer;
+    box-shadow: -2px 5px 13px 0px #0000000A, -9px 21px 23px 0px #0000000A, -21px 48px 31px 0px #00000005, -37px 85px 37px 0px #00000003, -57px 133px 40px 0px #00000000;
+  }
+}
+
+.date-container {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--text-light-gray);
+}
+.icon {
+  @include mixins.square(20px);
+}
+
+.date {
+  font-family: FuturaPT, monospace;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 100%;
+}
+
+.item-content {
+  .title, .description {
+    padding-top: 20px;
+    margin: 0;
+  }
+
+  .title {
+    font-family: SourceSans3, monospace;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 120%;
+    color: var(--text-black)
+  }
+
+  .description {
+    font-family: FuturaPT, monospace;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 120%;
+    color: var(--text-gray);
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .item-container {
+    max-width: unset;
+    min-width: unset;
+    width: unset;
+    height: unset;
+    min-height: unset;
+  }
+}
+</style>