Coding Practice - Copy this React, Tailwind Component to your project
Prompt-for-Designing-a-Professional-and-Advanced-Webpage-Inspired-by-LeetCode-Page-Layout-and-Design:-Split-View-Interface:-Left-Section-(Problem-Description):-A-scrollable-pane-to-display-the-problem-statement.-Include-sections-such-as-"Problem-Description,"-"Constraints,"-"Input/Output-Format,"-and-"Examples."-Use-collapsible-panels-for-subsections-(e.g.,-constraints,-examples)-to-keep-the-view-clean.-Highlight-important-keywords-or-terms-using-a-bold-font-or-different-colors-for-better-readability.-Add-a-"Difficulty-Level"-badge-(e.g.,-Easy,-Medium,-Hard)-at-the-top,-styled-with-different-colors.-Allow-users-to-bookmark-problems-or-mark-them-as-solved-using-icons-like-a-star-or-checkmark.-Right-Section-(Code-Editor):-A-rich,-resizable-code-editor-that-supports-syntax-highlighting,-auto-completion,-and-line-numbering.-Include-tabs-for-choosing-programming-languages-(e.g.,-JavaScript,-Python,-Java)-with-React-icons-like-MdCode-for-better-aesthetics.-Below-the-editor,-provide-buttons-for-Run,-Submit,-Clear,-and-Download-Code-with-hover-effects-and-tooltips.-Add-a-status-bar-at-the-bottom-of-the-editor-to-show-line-and-column-numbers,-selected-language,-and-compile-status-(success,-error,-etc.).-Below-the-Editor:-A-"Test-Cases"-section-where-users-can-add-custom-test-cases-with-an-input-and-expected-output-field.-Display-the-results-of-test-cases-in-a-table-format-after-the-code-is-executed.-Columns:-Test-Case-Number,-Input,-Expected-Output,-Actual-Output,-Result-(Pass/Fail).-Use-colors-(green-for-pass,-red-for-fail)-to-indicate-the-test-result-visually.-Include-a-collapsible-"Execution-History"-to-show-details-of-previous-runs-with-time-and-status.-Actionable-Buttons:-Run:-Executes-the-code-and-displays-the-output-below.-Submit:-Submits-the-solution-and-evaluates-against-hidden-test-cases.-Clear:-Clears-the-editor-content.-Download-Code:-Downloads-the-current-code-file-in-the-selected-language-format.-Advanced-Features:-Left-Pane-Enhancements:-Include-a-"Hints"-button-to-toggle-helpful-hints-for-the-problem.-Add-a-discussion-section-for-the-problem,-where-users-can-read-and-post-comments.-Display-problem-statistics-like-total-submissions,-accuracy-rate,-and-average-runtime.-Right-Pane-Enhancements:-Integrate-a-"Theme-Switcher"-(e.g.,-Light,-Dark,-Solarized-themes)-with-icons-like-MdBrightness4.-Provide-the-ability-to-toggle-between-a-Fullscreen-Mode-and-split-view.-Offer-a-"Version-Control"-dropdown-to-revert-to-previous-versions-of-the-code.-Responsive-Design:-Mobile-View:-Stack-the-problem-description-above-the-code-editor.-Add-a-toggle-button-to-switch-between-the-problem-description-and-code-editor.-Tablet-View:-Display-a-side-by-side-view-with-reduced-font-sizes-and-collapsible-side-sections.-Desktop-View:-Full-fledged-split-screen-view-with-all-features-visible.-Footer-Section-Below-All:-Include-details-like-"Time-Complexity"-and-"Space-Complexity"-insights-after-submission.-Show-badges-for-"Best-Runtime"-and-"Best-Memory-Usage"-for-optimal-solutions.-Styling-and-Color-Scheme:-Use-a-Purple-and-Indigo-theme-for-the-overall-design.-Highlight-action-buttons-with-gradients-(e.g.,-from-#6B46C1-to-#805AD5)-and-subtle-shadows-for-a-professional-look.-Use-Tailwind-CSS-to-ensure-consistency-in-spacing,-fonts,-and-responsiveness.-Use-animations-for-buttons,-transitions-for-collapsible-sections,-and-loading-indicators-for-run-and-submit-actions.-Icons-and-Interactivity:-Problem-Description:-MdDescription-for-problem-details,-MdBookmark-for-bookmark.-Code-Editor:-MdCode,-MdDownload,-MdClear,-MdPlayArrow-for-run-and-submit.-Test-Cases:-MdFormatListBulleted-for-cases,-MdHistory-for-execution-history.-Responsive-Switches:-MdPhoneAndroid-for-mobile-toggle,-MdTabletMac-for-tablet-view,-MdComputer-for-desktop-mode.-End-of-Page:-Add-pagination-or-infinite-scroll-for-exploring-other-problems-or-browsing-solved/unsolved-problems.-Include-a-"Showing-X-to-Y-of-Z-test-cases"-summary-for-clarity.-This-prompt-ensures-a-professional,-user-friendly,-and-fully-responsive-design-with-all-features-essential-for-advanced-coding-practice-and-evaluation.
