init

app/pages/materials/index.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup="">
+import MaterialsItem from "~/components/MaterialsItem.vue";
+import {useMaterialsStore} from "~/stores/materials/useMaterialsStore";
+
+const materialsStore = useMaterialsStore()
+await useAsyncData(async () => {
+  await materialsStore.fetchMaterials()
+  return true
+})
+</script>
+
+<template>
+  <div>
+    <h1 class="h1">Материалы</h1>
+
+    <div v-if="materialsStore.errorMaterials" class="error">Упс... Данные не загрузились :(</div>
+    <div v-else class="materials">
+      <template
+          v-for="item of materialsStore.getMaterialsSorted" :key="item.id"
+      >
+
+        <NuxtLink
+          :to="{
+            name: 'materials-id', params: {id: item.id }
+          }"
+          target="_blank"
+          class="link"
+        >
+          <MaterialsItem :item />
+        </NuxtLink>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.h1 {
+  font-family: SourceSans3, sans-serif;
+  font-weight: 600;
+  font-size: 36px;
+  line-height: 120%;
+}
+
+.materials {
+  padding-top: 48px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+}
+.link {
+  text-decoration: none;
+  color: var(--text-black);
+}
+
+@media screen and (max-width: 768px) {
+  .materials {
+    flex-direction: column;
+  }
+}
+</style>