81 lines
3.2 KiB
TypeScript
81 lines
3.2 KiB
TypeScript
import { ComposeUser } from '@lume/shared/composer/user';
|
|
import CancelIcon from '@lume/shared/icons/cancel';
|
|
import ChevronDownIcon from '@lume/shared/icons/chevronDown';
|
|
import ChevronRightIcon from '@lume/shared/icons/chevronRight';
|
|
import ComposeIcon from '@lume/shared/icons/compose';
|
|
import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
|
|
|
|
import { Dialog, Transition } from '@headlessui/react';
|
|
import { Fragment, useState } from 'react';
|
|
|
|
export const ComposerModal = () => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const { account, isLoading, isError } = useActiveAccount();
|
|
|
|
const closeModal = () => {
|
|
setIsOpen(false);
|
|
};
|
|
|
|
const openModal = () => {
|
|
setIsOpen(true);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={() => openModal()}
|
|
className="inline-flex h-7 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-2.5 text-xs font-medium text-zinc-200 shadow-button hover:bg-fuchsia-600"
|
|
>
|
|
<ComposeIcon width={14} height={14} />
|
|
Compose
|
|
</button>
|
|
<Transition appear show={isOpen} as={Fragment}>
|
|
<Dialog as="div" className="relative z-10" onClose={closeModal}>
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-100"
|
|
leave="ease-in duration-200"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0"
|
|
>
|
|
<div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md data-[state=open]:animate-overlayShow" />
|
|
</Transition.Child>
|
|
<div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0 scale-95"
|
|
enterTo="opacity-100 scale-100"
|
|
leave="ease-in duration-200"
|
|
leaveFrom="opacity-100 scale-100"
|
|
leaveTo="opacity-0 scale-95"
|
|
>
|
|
<Dialog.Panel className="relative h-min w-full max-w-xl rounded-lg border border-zinc-800 bg-zinc-900">
|
|
<div className="flex items-center justify-between px-4 py-4">
|
|
<div className="flex items-center gap-2">
|
|
<div>{!isLoading && !isError && account && <ComposeUser data={account} />}</div>
|
|
<span>
|
|
<ChevronRightIcon width={14} height={14} className="text-zinc-500" />
|
|
</span>
|
|
<button className="inline-flex h-6 w-max items-center justify-center gap-0.5 rounded bg-zinc-800 pl-3 pr-1.5 text-xs font-medium text-zinc-400 shadow-mini-button">
|
|
Post
|
|
<ChevronDownIcon width={14} height={14} />
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<CancelIcon width={16} height={16} className="text-zinc-500" />
|
|
</div>
|
|
</div>
|
|
<div className="px-4 pb-4"></div>
|
|
</Dialog.Panel>
|
|
</Transition.Child>
|
|
</div>
|
|
</Dialog>
|
|
</Transition>
|
|
</>
|
|
);
|
|
};
|