Added 'raw' markdown and 'preview' views

[priyank-mishra-1]

Solves #18

Description- Created a toggle button for Raw markdown code view. Changes made in Raw markdown editor are reflected in preview. Raw view and Preview are opened side by side with resizing panels.

Additional Details- Added additional dependency for resizing panels - npm i react-resizable-panels

Acceptance Criteria

• [x] Raw view is created
• [x] Changes in raw view are reflected in preview view
• [x] Does not break the existing code

[vercel[bot]]

@priyank-mishra-1 is attempting to deploy a commit to the theshiveshnetwork's projects Team on Vercel.

A member of the Team first needs to authorize it.

[priyank-mishra-1]

Please review my PR. I have added an additional dependency for resizable panels. If you don't want additional dependencies then I can recreate it with vanilla js.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
readmekraft	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 1, 2024 6:14pm

[TheShiveshNetwork]

I'm writing a sample code to explain factory pattern, refer this code:

function MobileComponent() {
    return (
         /* component to return modal for mobile screens */
    )
}
function DesktopComponent() {
    return (
         /* component to return for desktop screens */
        /* write all your resizable component code */
    )
}

export default function ResizableFactory({  }: Props) {
    const [isRawMode, setIsRawMode] = useState(false);
   /* handle all the logic here*/
    if (isMobile) return (
         <MobileComponent/>
    )
    return (
        <DesktopComponent/>
    )
}

Create this as a new component and all the logic related to resizable components and other things will go inside the factory component. Import this factory component and use it in all the places, reducing the code.