Initial commit

src/utils/tldraw/ui-overrides/components/shared/CCYoutubePanel.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useEditor } from '@tldraw/tldraw';
+import { CC_SHAPE_CONFIGS } from '../../../cc-base/cc-configs';
+import { createYoutubeShapeAtCenter } from '../../../cc-base/shape-helpers/youtube-helpers';
+import './panel.css';
+
+export const CCYoutubePanel: React.FC = () => {
+  const editor = useEditor();
+  const [videoUrl, setVideoUrl] = React.useState<string>(CC_SHAPE_CONFIGS['cc-youtube-embed'].defaultProps.video_url as string);
+
+  return (
+    <div className="panel-container">
+      <div className="panel-section">
+        <input
+          type="text"
+          value={videoUrl}
+          onChange={(e) => setVideoUrl(e.target.value)}
+          onPaste={(e) => {
+            e.preventDefault();
+            const pastedText = e.clipboardData.getData('text');
+            setVideoUrl(pastedText);
+          }}
+          placeholder="Enter YouTube URL"
+          className="panel-input"
+        />
+        <button 
+          onClick={() => editor && createYoutubeShapeAtCenter(editor, videoUrl)}
+          className="shape-button"
+        >
+          Add YouTube Video
+        </button>
+      </div>
+    </div>
+  );
+};