search

devsoc-unsw / structs.sh

An educational data structures and algorithms platform.
https://structs.sh
MIT License
27 stars 7 forks source link

Dynamic Tab Investigation #632

Open Dammshine opened 4 months ago

Dammshine commented 4 months ago

https://leetcode.com/problems/maximum-nesting-depth-of-the-parentheses/?envType=daily-question&envId=2024-04-04

Leetcode got a really cool feature, where it alow you to arrange every component's position, adjust, merge tab. We want to support that in our code .

a-kuchuk commented 3 months ago

Resources:

  1. Drag and Drop Libraries:

    • React DnD: A popular library for implementing drag and drop functionality in React applications.

  2. Resizable Components Libraries:

    • react-resizable: A library for implementing resizable components in React applications.

  3. Example: React DnD Example: An example demonstrating how to implement drag and drop functionality using React DnD.

Prototype Design Outline:

  1. Draggable Tabs:

    • Use a library like React DnD

  2. Resizable Tabs:

    • Utilize a library like react-resizable
    • Implement auto resizing via events?

  3. Event Handling:

    • Implement event handlers to capture user interactions such as dragging and resizing.
    • Update the layout and tab positions accordingly in response to these events.

  4. Persistence:

    • The layout should be restored to a default state when the user reloads the page?