<template>
  <v-bottom-sheet class="max-w-[480px]" v-model="editor.show.comment" eager>
    <comment-editor />
  </v-bottom-sheet>
  <v-bottom-sheet class="max-w-[480px]" v-model="editor.show.moment" eager>
    <moment-editor />
  </v-bottom-sheet>
  <v-bottom-sheet v-model="editor.show.article" eager>
    <article-editor />
  </v-bottom-sheet>

  <v-bottom-sheet class="max-w-[480px]" v-model="editor.show.delete" eager>
    <post-deletion />
  </v-bottom-sheet>
</template>

<script setup lang="ts">
import { useEditor } from "@/stores/editor"
import MomentEditor from "@/components/publish/MomentEditor.vue"
import CommentEditor from "@/components/publish/CommentEditor.vue"
import ArticleEditor from "@/components/publish/ArticleEditor.vue"
import PostDeletion from "@/components/publish/PostDeletion.vue"

const editor = useEditor()
</script>
