From ae5ff0c48faad31755ba84ced8a3e00089d76a09 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Tue, 9 May 2023 19:44:47 +0700
Subject: [PATCH] update composer modal

---
 src/shared/composer/modal.tsx      | 40 +++++++++++++++++++++++++-----
 src/shared/composer/types/post.tsx |  3 +++
 src/shared/composer/user.tsx       | 10 ++++----
 src/shared/icons/plusCircle.tsx    | 15 +++++++++++
 src/stores/composer.tsx            |  3 +++
 5 files changed, 60 insertions(+), 11 deletions(-)
 create mode 100644 src/shared/composer/types/post.tsx
 create mode 100644 src/shared/icons/plusCircle.tsx
 create mode 100644 src/stores/composer.tsx

diff --git a/src/shared/composer/modal.tsx b/src/shared/composer/modal.tsx
index 0dd9c8f5..b81f7a7d 100644
--- a/src/shared/composer/modal.tsx
+++ b/src/shared/composer/modal.tsx
@@ -1,15 +1,22 @@
-import { ComposeUser } from '@lume/shared/composer/user';
+import { Post } from '@lume/shared/composer/types/post';
+import { User } 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 { composerAtom } from '@lume/stores/composer';
 import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
 
 import { Dialog, Transition } from '@headlessui/react';
+import { useAtom } from 'jotai';
 import { Fragment, useState } from 'react';
 
-export const ComposerModal = () => {
+import PlusCircleIcon from '../icons/plusCircle';
+
+export function ComposerModal() {
   const [isOpen, setIsOpen] = useState(false);
+  const [composer] = useAtom(composerAtom);
+
   const { account, isLoading, isError } = useActiveAccount();
 
   const closeModal = () => {
@@ -56,11 +63,14 @@ export const ComposerModal = () => {
               <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>
+                    <div>{!isLoading && !isError && account && <User 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">
+                    <button
+                      autoFocus={false}
+                      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>
@@ -69,7 +79,25 @@ export const ComposerModal = () => {
                     <CancelIcon width={16} height={16} className="text-zinc-500" />
                   </div>
                 </div>
-                <div className="px-4 pb-4"></div>
+                <div className="flex h-full flex-col px-4 pb-4">
+                  <div className="flex h-full w-full gap-2">
+                    <div className="flex w-8 shrink-0 items-center justify-center">
+                      <div className="h-full w-[2px] bg-zinc-800"></div>
+                    </div>
+                    {composer.type === 'post' && <Post />}
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <button className="inline-flex h-8 w-8 items-center justify-center rounded">
+                      <PlusCircleIcon width={20} height={20} className="text-zinc-500" />
+                    </button>
+                    <button
+                      type="button"
+                      className="inline-flex h-7 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-3.5 text-xs font-medium text-zinc-200 shadow-button hover:bg-fuchsia-600"
+                    >
+                      Post
+                    </button>
+                  </div>
+                </div>
               </Dialog.Panel>
             </Transition.Child>
           </div>
@@ -77,4 +105,4 @@ export const ComposerModal = () => {
       </Transition>
     </>
   );
-};
+}
diff --git a/src/shared/composer/types/post.tsx b/src/shared/composer/types/post.tsx
new file mode 100644
index 00000000..c290fa70
--- /dev/null
+++ b/src/shared/composer/types/post.tsx
@@ -0,0 +1,3 @@
+export function Post() {
+  return <div className="relative w-full"></div>;
+}
diff --git a/src/shared/composer/user.tsx b/src/shared/composer/user.tsx
index 3eed6acc..6f177781 100644
--- a/src/shared/composer/user.tsx
+++ b/src/shared/composer/user.tsx
@@ -1,16 +1,16 @@
 import { Image } from '@lume/shared/image';
 import { DEFAULT_AVATAR, IMGPROXY_URL } from '@lume/stores/constants';
 
-export const ComposeUser = ({ data }: { data: any }) => {
+export function User({ 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">
+    <div className="flex items-center gap-2">
+      <div className="h-8 w-8 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"
+          className="h-8 w-8 object-cover"
           loading="auto"
         />
       </div>
@@ -21,4 +21,4 @@ export const ComposeUser = ({ data }: { data: any }) => {
       </h5>
     </div>
   );
-};
+}
diff --git a/src/shared/icons/plusCircle.tsx b/src/shared/icons/plusCircle.tsx
new file mode 100644
index 00000000..ce7478da
--- /dev/null
+++ b/src/shared/icons/plusCircle.tsx
@@ -0,0 +1,15 @@
+import { SVGProps } from 'react';
+
+export default function PlusCircleIcon(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="M16.2426 12.0005H7.75736M12 16.2431V7.75781M21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12Z"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/src/stores/composer.tsx b/src/stores/composer.tsx
new file mode 100644
index 00000000..d7bd6534
--- /dev/null
+++ b/src/stores/composer.tsx
@@ -0,0 +1,3 @@
+import { atomWithReset } from 'jotai/utils';
+
+export const composerAtom = atomWithReset({ type: 'post', content: '' });