\n \n

\n course.dishes).length} ${inflect(\"dish\", \"dishes\", menu.courses.flatMap(course => course.dishes).length)}`}\n size=\"small\"\n color=\"info\"\n variant={isMobile ? \"outlined\" : \"filled\"}\n />\n \n

\n\n {/* Courses Section */}\n

\n \n Courses\n \n\n }\n >\n Add Course\n \n

\n\n {/* Drag and drop hint */}\n {!isMobile && menu.courses.length > 1 && (\n \n 💡 Drag courses to reorder them\n \n )}\n\n

\n {menu.courses.map((course, index) => (\n handleDragStart(e, index)}\n onDragOver={(e) => handleDragOver(e, index)}\n onDragLeave={handleDragLeave}\n onDrop={(e) => handleDrop(e, index)}\n onDragEnd={handleDragEnd}\n style={{\n cursor: !isMobile && !isUpdating ? 'grab' : 'default',\n opacity: draggedCourseIndex === index ? 0.5 : 1,\n transform: draggedCourseIndex === index ? 'rotate(2deg) scale(0.98)' : 'none',\n transition: 'all 0.2s ease',\n position: 'relative',\n userSelect: 'none',\n WebkitUserSelect: 'none',\n MozUserSelect: 'none',\n msUserSelect: 'none'\n }}\n >\n {/* Drop indicator */}\n {dragOverIndex === index && draggedCourseIndex !== index && (\n \n )}\n \n \n

\n ))}\n\n {menu.courses.length === 0 && (\n \n \n No courses yet\n \n \n This menu doesn't have any courses yet.\n \n \n Add First Course\n \n \n )}\n

\n \n \n );\n\n if (isMobile) {\n return

{content}

;\n }\n\n return (\n

\n {content}\n

\n );\n}","deleted","label",[176,177,178,179,158],"frontend","components","display","menu","permalink","https://www.val.town/x/damonb/react-hono-with-react-router/code/frontend/components/display/menu/MenuDisplay.tsx","extension","actionData","errors"]