reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: port more component to new ui

Browse Source
This commit is contained in:
Ren Amamiya
2023-08-02 14:48:51 +07:00
parent a85bcf917b
commit babcd8698e
20 changed files with 410 additions and 559 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/shared/composer/modal.tsx
View File

@@ -1,5 +1,4 @@
import { Dialog, Transition } from '@headlessui/react';
import { Fragment } from 'react';
import * as Dialog from '@radix-ui/react-dialog';
import { useHotkeys } from 'react-hotkeys-hook';
import { Button } from '@shared/button';
@@ -27,64 +26,39 @@ export function ComposerModal() {
useHotkeys(COMPOSE_SHORTCUT, () => toggle(true));
return (
<>
<Button onClick={() => toggle(true)} preset="small">
<ComposeIcon className="h-4 w-4" />
Postr
</Button>
<Transition appear show={open} 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" />
</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-xl border-t border-zinc-800/50 bg-zinc-900">
<div className="flex items-center justify-between px-4 py-4">
<div className="flex items-center gap-2">
{account && <ComposerUser pubkey={account.pubkey} />}
<span>
<ChevronRightIcon
width={14}
height={14}
className="text-zinc-500"
/>
</span>
<div className="inline-flex h-7 w-max items-center justify-center gap-0.5 rounded bg-zinc-800 pl-3 pr-1.5 text-sm font-medium text-zinc-400">
New Post
<ChevronDownIcon className="h-4 w-4" />
</div>
</div>
<button
onClick={closeModal}
type="button"
className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800"
>
<CancelIcon width={16} height={16} className="text-zinc-500" />
</button>
<Dialog.Root open={open}>
<Dialog.Trigger asChild>
<Button preset="small">
<ComposeIcon className="h-4 w-4" />
Postr
</Button>
</Dialog.Trigger>
<Dialog.Portal className="relative z-10">
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
<div className="relative h-min w-full max-w-2xl rounded-xl bg-white/10">
<div className="flex items-center justify-between px-4 py-4">
<div className="flex items-center gap-2">
{account && <ComposerUser pubkey={account.pubkey} />}
<span>
<ChevronRightIcon className="h-4 w-4 text-white/50" />
</span>
<div className="inline-flex h-7 w-max items-center justify-center gap-0.5 rounded bg-white/10 pl-3 pr-1.5 text-sm font-medium text-white">
New Post
<ChevronDownIcon className="h-4 w-4" />
</div>
<Composer />
</Dialog.Panel>
</Transition.Child>
</div>
<Dialog.Close
onClick={() => closeModal()}
className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-zinc-800"
>
<CancelIcon className="h-5 w-5 text-white/50" />
</Dialog.Close>
</div>
<Composer />
</div>
</Dialog>
</Transition>
</>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
);
}