init

app/components/ui/Buttons/ButtonBack.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup="">
+import {useGoBackOrHome} from "~/composables/useGoBackOrHome";
+
+const router = useRouter()
+const {goBack, canGoBack} = useGoBackOrHome()
+const onClickBack = () => {
+  if (canGoBack.value) {
+    goBack()
+    return
+  }
+  router.push('/')
+}
+</script>
+
+<template>
+  <button type="button" class="button"  @click="onClickBack">
+    <IconsIconArrowLeft class="icon"/>
+    <span class="text" >Назад</span>
+  </button>
+</template>
+
+<style scoped lang="scss">
+.button {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  background: none;
+  cursor: pointer;
+  color: var(--text-black);
+  transition: all .3s ease;
+
+  &:hover {
+    color: var(--text-blue);
+  }
+}
+.icon {
+  @include mixins.square(24px);
+}
+
+.text {
+  font-family: FuturaPT, sans-serif;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 100%;
+}
+
+</style>

app/components/ui/Buttons/ButtonDefault.vue

@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import IconLoader from "~/components/icons/iconLoader.vue";
+import type {ButtonProps} from "~/components/ui/Buttons/types.buttons";
+import {ButtonKind} from "~/components/ui/Buttons/constants.buttons";
+import IconAdd from "~/components/icons/iconAdd.vue";
+import IconSend from "~/components/icons/iconSend.vue";
+import {useWindowSize} from "@vueuse/core";
+
+const {width} = useWindowSize()
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  loading: false,
+  kind: ButtonKind.CreateMaterial
+
+})
+
+const getButtonTextAndIcon = computed(() => {
+  switch (props.kind) {
+    case ButtonKind.CreateStory:
+      return {
+        text: 'Создать историю',
+        icon: IconAdd,
+      };
+    case ButtonKind.CreateMaterial:
+      return {
+        text: 'Создать материал',
+        icon: IconAdd,
+      };
+    case ButtonKind.Send:
+    default:
+      return {
+        text: 'Сохранить',
+        icon: IconSend
+      }
+  }
+})
+</script>
+
+<template>
+  <button type="button" class="button">
+    <IconLoader class="icon loader" :class="{loading}" v-if="loading" />
+
+    <template v-else>
+      <span v-if="width > 768">{{getButtonTextAndIcon.text}}</span>
+      <component v-else :is="getButtonTextAndIcon.icon" class="icon"/>
+    </template>
+  </button>
+</template>
+
+<style scoped lang="scss">
+.button {
+  border-radius: 12px;
+  padding: 0 24px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  background: #E7F8FE;
+  color: var(--text-blue);
+
+  font-family: FuturaPT, sans-serif;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 100%;
+
+  cursor: pointer;
+  transition: all .3s ease;
+
+  &:hover:not(:disabled) {
+    background: #D2F3FF;
+  }
+
+  &:disabled {
+    background: #E7F8FE;
+    cursor: not-allowed;
+  }
+
+  &.loading {
+    pointer-events: none;
+  }
+}
+
+.icon {
+  @include mixins.square(20px);
+}
+
+.loader {
+  animation: rotate 1s linear infinite;
+}
+
+@keyframes rotate {
+  0% {
+    rotate: 0deg;
+  }
+
+  100% {
+    rotate: 360deg;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .button {
+    padding: 10px;
+    height: 48px;
+  }
+
+  .icon {
+    @include mixins.square(28px);
+  }
+}
+</style>

app/components/ui/Buttons/constants.buttons.ts

@@ -0,0 +1,5 @@
+export enum ButtonKind {
+  Send = 'send',
+  CreateStory = 'createStory',
+  CreateMaterial = 'createMaterial'
+}

app/components/ui/Buttons/index.ts

@@ -0,0 +1,7 @@
+import ButtonBack from "~/components/ui/Buttons/ButtonBack.vue";
+import ButtonDefault from "~/components/ui/Buttons/ButtonDefault.vue";
+
+export const Button = {
+  ButtonBack: ButtonBack,
+  ButtonDefault: ButtonDefault
+}

app/components/ui/Buttons/types.buttons.ts

@@ -0,0 +1,7 @@
+import {ButtonBackTheme, ButtonKind} from "~/components/ui/Buttons/constants.buttons";
+
+export interface ButtonProps {
+  loading?: boolean
+  kind?: ButtonKind,
+}
+