feat: picture notes editor

src/components/PostEditor/index.tsx

@@ -5,19 +5,16 @@ import {
   DialogHeader,
   DialogTitle
 } from '@/components/ui/dialog'
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle
-} from '@/components/ui/drawer'
 import { ScrollArea } from '@/components/ui/scroll-area'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { Event } from 'nostr-tools'
-import { Dispatch } from 'react'
-import PostContent from './PostContent'
+import { Dispatch, useMemo } from 'react'
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../ui/sheet'
+import NormalPostContent from './NormalPostContent'
+import PicturePostContent from './PicturePostContent'
 import Title from './Title'
+import { useTranslation } from 'react-i18next'
 
 export default function PostEditor({
   defaultContent = '',
@@ -30,32 +27,58 @@ export default function PostEditor({
   open: boolean
   setOpen: Dispatch<boolean>
 }) {
+  const { t } = useTranslation()
   const { isSmallScreen } = useScreenSize()
 
+  const content = useMemo(() => {
+    return parentEvent ? (
+      <NormalPostContent
+        defaultContent={defaultContent}
+        parentEvent={parentEvent}
+        close={() => setOpen(false)}
+      />
+    ) : (
+      <Tabs defaultValue="normal" className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="normal">{t('Normal Post')}</TabsTrigger>
+          <TabsTrigger value="picture">{t('Picture Post')}</TabsTrigger>
+        </TabsList>
+        <TabsContent value="normal">
+          <NormalPostContent
+            defaultContent={defaultContent}
+            parentEvent={parentEvent}
+            close={() => setOpen(false)}
+          />
+        </TabsContent>
+        <TabsContent value="picture">
+          <PicturePostContent close={() => setOpen(false)} />
+        </TabsContent>
+      </Tabs>
+    )
+  }, [parentEvent])
+
   if (isSmallScreen) {
     return (
-      <Drawer open={open} onOpenChange={setOpen}>
-        <DrawerContent className="h-full">
-          <DrawerHeader>
-            <DrawerTitle className="text-start">
-              <Title parentEvent={parentEvent} />
-            </DrawerTitle>
-            <DrawerDescription className="hidden" />
-          </DrawerHeader>
-          <div className="overflow-auto py-2 px-4">
-            <PostContent
-              defaultContent={defaultContent}
-              parentEvent={parentEvent}
-              close={() => setOpen(false)}
-            />
-          </div>
-        </DrawerContent>
-      </Drawer>
+      <Sheet open={open} onOpenChange={setOpen} modal={false}>
+        <SheetContent className="h-full w-full p-0 border-none" side="bottom" hideClose>
+          <ScrollArea className="px-4 h-full max-h-screen">
+            <div className="space-y-4 px-2 py-6">
+              <SheetHeader>
+                <SheetTitle className="text-start">
+                  <Title parentEvent={parentEvent} />
+                </SheetTitle>
+                <SheetDescription className="hidden" />
+              </SheetHeader>
+              {content}
+            </div>
+          </ScrollArea>
+        </SheetContent>
+      </Sheet>
     )
   }
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <Dialog open={open} onOpenChange={setOpen} modal={false}>
       <DialogContent className="p-0" withoutClose>
         <ScrollArea className="px-4 h-full max-h-screen">
           <div className="space-y-4 px-2 py-6">
@@ -65,11 +88,7 @@ export default function PostEditor({
               </DialogTitle>
               <DialogDescription className="hidden" />
             </DialogHeader>
-            <PostContent
-              defaultContent={defaultContent}
-              parentEvent={parentEvent}
-              close={() => setOpen(false)}
-            />
+            {content}
           </div>
         </ScrollArea>
       </DialogContent>