Whiteboard Page - Copy this React, Tailwind Component to your project

I’m building a React and Tailwind CSS based whiteboard website for math teachers to solve and explain mathematical questions. The website will allow users to create multiple projects, each containing multiple whiteboards. Teachers can write with a pen, type text, and insert mathematical expressions (e.g., limits, integrals, derivatives, powers) using keyboard shortcuts. The project should be responsive, optimized, and feature modern animations. Key Features: Project and Whiteboard Management: Sidebar to manage a list of projects. Each project is stored in the browser (local storage). There should be a New Project button to create a project. Projects should contain multiple whiteboards, and users can navigate between whiteboards within the same project. A toggle button to hide/show the sidebar with smooth animations. When the sidebar is hidden, a small strip should remain, allowing users to access the + button for new projects. Whiteboard: Teachers can draw on the whiteboard using a pen tool, with adjustable pen color and thickness. Teachers can type text on the whiteboard using a keyboard input. Mathematical expressions can be added using shortcuts: x^n for exponents (e.g., x²). lim_{n >∞} for limits. ∫ for integration. ∞ for infinity. √ for square root. ∑ for summation. 1/2 for fractions. A toolbar above the whiteboard with the following options: Pen Tool: Draw on the whiteboard with adjustable color (6 color options) and thickness (5 thickness options). Text Tool: Type text anywhere on the whiteboard. Eraser Tool: Erase with adjustable thickness. Select Tool: Select and move, copy, cut, or delete any drawn item or text on the whiteboard. Grid Alignment: Enable grid alignment to snap elements to a customizable grid (sizes: xsm, sm, md, lg, xl, 2xl). Adjustable grid opacity for better visualization. Shortcuts: A button in the bottom corner of the screen to toggle a list of all keyboard shortcuts available for math expressions and toolbar tools. Additional Features: Undo/Redo functionality for drawing actions. Clear All option to reset the whiteboard. Zoom in/out on the whiteboard for better navigation. Responsive Design: The website must be fully responsive, working smoothly across all screen sizes, including mobile and tablets. Animations: Smooth animations for sidebar toggle, toolbar interactions, and whiteboard updates (e.g., drawing, erasing, switching between tools). Requirements: Latest versions of React, Tailwind CSS, and other libraries. Use of React Icons for toolbar buttons. High quality, optimized code with good separation of components and hooks. Ensure the whiteboard and other components are highly performant, especially when dealing with multiple whiteboards and projects.