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

initial composer

Browse Source
This commit is contained in:
Ren Amamiya
2023-05-08 21:20:49 +07:00
parent 09380e4fef
commit 93439abe33
6 changed files with 142 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/shared/composer/modal.tsx Normal file
View File

@@ -0,0 +1,80 @@
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>
</>
);
};

24
src/shared/composer/user.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { Image } from '@lume/shared/image';
import { DEFAULT_AVATAR, IMGPROXY_URL } from '@lume/stores/constants';
export const ComposeUser = ({ data }: { data: any }) => {
const metadata = JSON.parse(data.metadata);
return (
<div className="flex items-center gap-1.5">
<div className="h-6 w-6 shrink-0 overflow-hidden rounded bg-zinc-900">
<Image
src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${metadata?.picture ? metadata.picture : DEFAULT_AVATAR}`}
alt={data.pubkey}
className="h-6 w-6 object-cover"
loading="auto"
/>
</div>
<h5 className="text-sm font-semibold leading-none text-zinc-100">
{metadata?.display_name || metadata?.name || (
<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700"></div>
)}
</h5>
</div>
);
};

15
src/shared/icons/chevronDown.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { SVGProps } from 'react';
export default function ChevronDownIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
return (
<svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M8 10L12 14L16 10"
stroke="currentColor"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}

15
src/shared/icons/chevronRight.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { SVGProps } from 'react';
export default function ChevronRightIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
return (
<svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M10 16L14 12L10 8"
stroke="currentColor"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}

7
src/shared/navigation.tsx
View File

@@ -1,8 +1,8 @@
import ChannelsList from '@lume/app/channel/components/list';
import ChatsList from '@lume/app/chat/components/list';
import ActiveLink from '@lume/shared/activeLink';
import { ComposerModal } from '@lume/shared/composer/modal';
import EventCollector from '@lume/shared/eventCollector';
import ComposeIcon from '@lume/shared/icons/compose';
import MyspaceIcon from '@lume/shared/icons/myspace';
import NavArrowDownIcon from '@lume/shared/icons/navArrowDown';
import ThreadsIcon from '@lume/shared/icons/threads';
@@ -14,10 +14,7 @@ export default function Navigation() {
return (
<div className="relative flex h-full flex-col gap-3 pt-1.5">
<div className="flex h-11 items-center justify-between px-3.5">
<button 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>
<ComposerModal />
<EventCollector />
</div>
{/* Newsfeed */}

6
tailwind.config.js
View File

@@ -36,6 +36,12 @@ module.exports = {
rgb(74, 4, 78) 0px 0px 0px 1px,
rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset
`,
'mini-button': `
rgba(13, 16, 23, 0.36) 0px 2px 8px,
rgba(13, 16, 23, 0.36) 0px 2px 4px,
rgba(13, 16, 23, 0.36) 0px 0px 0px 1px,
rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset
`,
},
backgroundColor: {
'near-black': '#07070d',