Migrate edito components

app/src/components/editor/ContentView.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Text, Center } from '@mantine/core';
+import Editor from './Editor';
+import MarkdownPreview from './MarkdownPreview';
+import { getFileUrl, isImageFile } from '../../utils/fileHelpers';
+import { useWorkspace } from '@/contexts/WorkspaceContext';
+
+type ViewTab = 'source' | 'preview';
+
+interface ContentViewProps {
+  activeTab: ViewTab;
+  selectedFile: string | null;
+  content: string;
+  handleContentChange: (content: string) => void;
+  handleSave: (filePath: string, content: string) => Promise<boolean>;
+  handleFileSelect: (filePath: string | null) => Promise<void>;
+}
+
+const ContentView: React.FC<ContentViewProps> = ({
+  activeTab,
+  selectedFile,
+  content,
+  handleContentChange,
+  handleSave,
+  handleFileSelect,
+}) => {
+  const { currentWorkspace } = useWorkspace();
+  if (!currentWorkspace) {
+    return (
+      <Center style={{ height: '100%' }}>
+        <Text size="xl" fw={500}>
+          No workspace selected.
+        </Text>
+      </Center>
+    );
+  }
+
+  if (!selectedFile) {
+    return (
+      <Center style={{ height: '100%' }}>
+        <Text size="xl" fw={500}>
+          No file selected.
+        </Text>
+      </Center>
+    );
+  }
+
+  if (isImageFile(selectedFile)) {
+    return (
+      <Center className="image-preview">
+        <img
+          src={getFileUrl(currentWorkspace.name, selectedFile)}
+          alt={selectedFile}
+          style={{
+            maxWidth: '100%',
+            maxHeight: '100%',
+            objectFit: 'contain',
+          }}
+        />
+      </Center>
+    );
+  }
+
+  return activeTab === 'source' ? (
+    <Editor
+      content={content}
+      handleContentChange={handleContentChange}
+      handleSave={handleSave}
+      selectedFile={selectedFile}
+    />
+  ) : (
+    <MarkdownPreview content={content} handleFileSelect={handleFileSelect} />
+  );
+};
+
+export default ContentView;