add download feature with save

src/app/(main)/_components/Dropdown.tsx

@@ -0,0 +1,34 @@
+import { Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react';
+import { Key, ReactNode } from 'react';
+
+interface PSDropdownProps {
+    options: string[];
+    onClick: (key: Key) => void;
+    children: ReactNode;
+    className?: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+}
+
+const PSDropdown: React.FC<PSDropdownProps> = ({ options, onClick, children, className, placement }) => {
+    return (
+        <Dropdown
+            size='md'
+            className={`min-w-32 w-fit ${className}`}
+            placement={placement}
+        >
+            <DropdownTrigger>
+                {children}
+            </DropdownTrigger>
+            <DropdownMenu
+                aria-label="menu"
+                onAction={onClick}
+            >
+                {options.map((option, index) => (
+                    <DropdownItem key={index}>{option}</DropdownItem>
+                ))}
+            </DropdownMenu>
+        </Dropdown>
+    );
+};
+
+export default PSDropdown;

src/app/(main)/_components/Preview.tsx

@@ -1,17 +1,16 @@
 "use client";
 import Editor from '@/app/(main)/_components/Editor';
 import { formatReadableDate } from '@/utils/utils';
+import { EllipsisHorizontalIcon } from "@heroicons/react/24/solid";
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DoneIcon from '@mui/icons-material/Done';
-import { Button } from '@nextui-org/button';
-import { Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react';
 import html2canvas from 'html2canvas';
 import { useTheme } from 'next-themes';
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import { Key, useEffect, useState } from 'react';
 import Log from '../_models/Log';
-import { useSidebar } from '../_services/Context';
 import LogService from '../_services/logService';
+import PSDropdown from './Dropdown';
 import IconButton from './IconButton';
 
 const Preview = ({ logId }: { logId: string }) => {
@@ -20,46 +19,35 @@ const Preview = ({ logId }: { logId: string }) => {
     const [copied, setCopied] = useState<boolean>(false);
     const [previewLog, setpreviewLog] = useState<Log | null>(null);
     const { theme } = useTheme();
-    const { showSideBar } = useSidebar();
+    const router = useRouter();
+    const isPublishRoute = usePathname().includes('/logs/publish');
 
-    function Download() {
-        return (
-            <Dropdown
-                size='md'
-                className='min-w-32 w-fit'
-                placement='bottom-start' >
-                <DropdownTrigger>
-                    <Button
-                        variant='bordered'
-                        className='border-code-onSurface'>
-                        {'download'}
-                    </Button>
-
-                </DropdownTrigger>
-                <DropdownMenu
-                    aria-label="download"
-                    // disabledKeys={["edit", "delete"]}
-                    onAction={handleonAction}
-                >
-                    <DropdownItem key="image">Image</DropdownItem>
-                    <DropdownItem key="text">Text</DropdownItem>
-                    {/* <DropdownItem key="delete" className="text-danger" color="danger">
-                        Delete file
-                    </DropdownItem> */}
-                </DropdownMenu>
-            </Dropdown>
+    function More() {
+        const options = ['Image', 'Text'];
+        if (!logService.isLogPresentLocally(logId)) options.push('Save');
+        return (<PSDropdown
+            options={options}
+            onClick={handleonAction}
+            placement='bottom-end'
+            className="custom-dropdown-class">
+            <EllipsisHorizontalIcon
+                className='h-7 w-7 cursor-pointer dark:text-slate-100 transition-all duration-100' />
+        </PSDropdown>
         );
     }
 
 
     function handleonAction(key: Key) {
+        console.log(key);
         switch (key) {
-            case 'image':
+            case '0':
                 downloadImage();
                 break;
-            case 'text':
+            case '1':
                 downloadText();
                 break;
+            case '2':
+                logService.saveLogToLocal(previewLog!);
             default:
                 break;
         }
@@ -140,7 +128,17 @@ const Preview = ({ logId }: { logId: string }) => {
                                     : <div></div>
 
                             }
-                            <Download />
+                            {isPublishRoute && (
+                                <div className='space-x-2'>
+                                    {/* <Button
+                                        variant='bordered'
+                                        className='border-code-onSurface'
+                                        onClick={() => { }}>
+                                        {'save'}
+                                    </Button> */}
+                                    <More />
+                                </div>
+                            )}
                         </div>
                     )
                     }

src/app/(main)/_components/SideBarItem.tsx

@@ -1,8 +1,8 @@
 import { EllipsisHorizontalIcon } from "@heroicons/react/24/solid";
-import { Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react';
 import { Key, useState } from 'react';
 import Log from "../_models/Log";
 import LogService from '../_services/logService';
+import PSDropdown from "./Dropdown";
 
 interface SidebarItemProps {
     id: string;
@@ -16,25 +16,15 @@ const SidebarItem: React.FC<SidebarItemProps> = ({ selected, id, log, onLogClick
     const [isHovered, setIsHovered] = useState(false);
 
     function MoreOptions() {
-        return (
-            <Dropdown
-                size='md'
-                className='min-w-32 w-fit'
-                placement='bottom-start'
-            >
-                <DropdownTrigger>
-                    <EllipsisHorizontalIcon
-                        className='h-7 w-7 cursor-pointer hover:text-black-500 transition-all duration-100'
-                    />
-                </DropdownTrigger>
-                <DropdownMenu
-                    aria-label="menu"
-                    onAction={handleonAction}
-                >
-                    <DropdownItem key="share">Share</DropdownItem>
-                    <DropdownItem key="delete">Delete</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
+        const options = ['Share', 'Delete'];
+
+        return (<PSDropdown
+            options={options}
+            onClick={handleonAction}
+            className="custom-dropdown-class">
+            <EllipsisHorizontalIcon
+                className='h-5 w-7 cursor-pointer transition-all duration-100' />
+        </PSDropdown>
         );
     }
 

src/app/(main)/_services/logService.ts

@@ -82,6 +82,11 @@ class LogService {
         }
     }
 
+    async isLogPresentLocally(id: string): Promise<boolean> {
+        const logs = await this.fetchLogsFromLocal();
+        return logs.some(log => log.id === id);
+    }
+
     // Local Storage Methods
     private saveLogsToLocal(logs: Log[]): void {
         if (typeof window !== 'undefined') {