codecheck

1
<script setup lang="ts">
2
useHead({
3
  title: "Панель управления",
4
});
5
definePageMeta({
6
  middleware: "admin",
7
});
8
</script>
9

10
<template>
11
  <div class="admin">
12
    <div class="admin__container">
13
      <h1 class="admin__title">Панель управления</h1>
14
      <nav class="admin__nav">
15
        <NuxtLink class="admin__nav-item" to="/admin/challenges"
16
          >Добавить задание</NuxtLink
17
        >
18
        <NuxtLink class="admin__nav-item" to="/admin/tags"
19
          >Добавить тэги</NuxtLink
20
        >
21
        <NuxtLink class="admin__nav-item" to="/admin/users"
22
          >Пользователи</NuxtLink
23
        >
24
      </nav>
25
    </div>
26
  </div>
27
</template>
28

29
<style scoped lang="scss">
30
.admin {
31
  &__container {
32
    margin: 0 auto;
33
    max-width: var(--width-container);
34
    padding-right: 1rem;
35
    padding-left: 1rem;
36
  }
37
  &__title {
38
    margin-bottom: 2rem;
39
  }
40
  &__nav {
41
    display: flex;
42
    justify-content: space-between;
43
    gap: 0.5rem;
44
    flex-wrap: wrap;
45
  }
46
  &__nav-item {
47
    border-radius: var(--border-radius);
48
    padding: 0.35rem 0.75rem;
49
    background: var(--color-warning);
50
    display: flex;
51
    justify-content: center;
52
    flex-grow: 1;
53
  }
54
}
55
</style>
56