ansnid-anse/src/components/ModalsLayer.tsx
2023-07-19 23:39:43 +08:00

53 lines
1.8 KiB
TypeScript

import {
showConversationEditModal,
showConversationSidebar,
showEmojiPickerModal,
showSelectMessageModal,
showSettingsSidebar,
showShareModal,
} from '@/stores/ui'
import ConversationSidebar from './conversations/ConversationSidebar'
import SettingsSidebar from './settings/SettingsSidebar'
import ConversationEditModal from './conversations/ConversationEditModal'
import EmojiPickerModal from './ui/EmojiPickerModal'
import ShareModal from './ui/ShareModal'
import SelectMessageModal from './ui/SelectMessageModal'
import Modal from './ui/Modal'
export default () => {
return (
<>
<Modal bindValue={showConversationSidebar} direction="left" closeBtnClass="hidden">
<div class="w-[70vw] max-w-[300px] h-full">
<ConversationSidebar />
</div>
</Modal>
<Modal bindValue={showSettingsSidebar} direction="right">
<div class="w-screen sm:w-[70vw] sm:max-w-[300px] h-full">
<SettingsSidebar />
</div>
</Modal>
<Modal bindValue={showConversationEditModal} direction="bottom" closeBtnClass="top-6 right-6">
<div class="max-h-[70vh] w-full">
<ConversationEditModal />
</div>
</Modal>
<Modal bindValue={showEmojiPickerModal} direction="bottom" closeBtnClass="top-6 right-6">
<div class="max-h-[70vh] w-full">
<EmojiPickerModal />
</div>
</Modal>
<Modal bindValue={showShareModal} direction="bottom" closeBtnClass="hidden">
<div class="max-h-[70vh] w-full">
<ShareModal />
</div>
</Modal>
<Modal bindValue={showSelectMessageModal} direction="bottom" closeBtnClass="top-4 right-4" closeCallback={() => { showShareModal.set(true) }}>
<div class="max-h-[70vh] w-full">
<SelectMessageModal />
</div>
</Modal>
</>
)
}