claude-generated code

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 }) => (
+    <Button 
+      variant="ghost"
+      size="lg"
+      className="p-4 h-auto flex flex-col items-center gap-1"
+      onClick={() => {
+        execCommand(command, value);
+        // Don't close toolbar for formatting commands
+        if (command === 'save') setIsToolbarOpen(false);
+      }}
+    >
+      <Icon className="w-6 h-6" />
+      <span className="text-xs">{label}</span>
+    </Button>
+  );
+
+  return (
+    <div 
+      className="fixed inset-0 flex flex-col"
+      style={{ height: viewportHeight }}
+    >
+      {/* Main toolbar button */}
+      <Button
+        variant="outline"
+        size="icon"
+        className="fixed top-2 right-2 z-20"
+        onClick={() => setIsToolbarOpen(!isToolbarOpen)}
+      >
+        {isToolbarOpen ? <X className="w-4 h-4" /> : <MoreVertical className="w-4 h-4" />}
+      </Button>
+
+      {/* Expandable toolbar */}
+      {isToolbarOpen && (
+        <Card className="absolute top-12 right-2 z-10 p-2 shadow-lg">
+          <div className="grid grid-cols-3 gap-2">
+            <ToolbarButton 
+              icon={Bold} 
+              command="bold" 
+              label="Bold"
+            />
+            <ToolbarButton 
+              icon={Italic} 
+              command="italic" 
+              label="Italic"
+            />
+            <ToolbarButton 
+              icon={List} 
+              command="insertUnorderedList" 
+              label="Bullet List"
+            />
+            <ToolbarButton 
+              icon={ListOrdered} 
+              command="insertOrderedList" 
+              label="Numbered List"
+            />
+            <ToolbarButton 
+              icon={Heading1} 
+              command="formatBlock" 
+              value="<h1>" 
+              label="Heading 1"
+            />
+            <ToolbarButton 
+              icon={Heading2} 
+              command="formatBlock" 
+              value="<h2>" 
+              label="Heading 2"
+            />
+            <ToolbarButton 
+              icon={Quote} 
+              command="formatBlock" 
+              value="<blockquote>" 
+              label="Quote"
+            />
+          </div>
+        </Card>
+      )}
+
+      {/* Editor area */}
+      <div className="flex-1 overflow-auto">
+        <div
+          className="min-h-full p-4 focus:outline-none"
+          contentEditable={true}
+          onInput={(e) => setContent(e.currentTarget.innerHTML)}
+          suppressContentEditableWarning={true}
+          style={{
+            WebkitUserSelect: 'text',
+            WebkitTouchCallout: 'none',
+            overflowY: 'auto',
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default NoteEditor;