<script lang="ts" setup="">
import {Button} from "~/components/ui/Buttons";
import {useWindowSize} from "@vueuse/core";

const {width} = useWindowSize()
const router = useRouter()
</script>

<template>
  <div class="create-container">
    <Button.ButtonBack v-if="width > 768"/>
    <h1 class="h1">Создание материала</h1>
    <TiptapEditor class="editor" />
  </div>
</template>


<style scoped lang="scss">
.create-container {
  max-width: 1014px;
  margin: 0 auto;
}
.h1 {
  font-family: SourceSans3, sans-serif;
  font-weight: 600;
  font-size: 36px;
  line-height: 120%;
  padding-top: 32px;
}

.editor {
  padding-top: 48px;
}

@media screen and (max-width: 768px) {
  .h1 {
    padding-top: 0;
    font-size: 24px;
  }

  .editor {
    padding-top: 32px;
  }
}
</style>
