diff --git a/claude-generated-code.ts b/claude-generated-code.ts new file mode 100644 index 0000000..f5a845e --- /dev/null +++ b/claude-generated-code.ts @@ -0,0 +1,138 @@ +import React, { useState, useEffect } from 'react'; +import { Card } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { + Bold, + Italic, + List, + ListOrdered, + Heading1, + Heading2, + Quote, + MoreVertical, + X +} from 'lucide-react'; + +const NoteEditor = () => { + const [content, setContent] = useState(''); + const [isToolbarOpen, setIsToolbarOpen] = useState(false); + const [viewportHeight, setViewportHeight] = useState('100vh'); + + // Handle viewport resize when keyboard appears + useEffect(() => { + const handleResize = () => { + const visualViewport = window.visualViewport; + if (visualViewport) { + setViewportHeight(`${visualViewport.height}px`); + } + }; + + window.visualViewport?.addEventListener('resize', handleResize); + window.visualViewport?.addEventListener('scroll', handleResize); + + return () => { + window.visualViewport?.removeEventListener('resize', handleResize); + window.visualViewport?.removeEventListener('scroll', handleResize); + }; + }, []); + + const execCommand = (command, value = false) => { + document.execCommand(command, false, value); + }; + + const ToolbarButton = ({ icon: Icon, command, value, label }) => ( + + ); + + return ( +
+ {/* Main toolbar button */} + + + {/* Expandable toolbar */} + {isToolbarOpen && ( + +
+ + + + + + + +
+
+ )} + + {/* Editor area */} +
+
setContent(e.currentTarget.innerHTML)} + suppressContentEditableWarning={true} + style={{ + WebkitUserSelect: 'text', + WebkitTouchCallout: 'none', + overflowY: 'auto', + }} + /> +
+
+ ); +}; + +export default NoteEditor;