[feat 🐱‍🏍] execute website 🚀

devlopersabbir · devlopersabbir · commit a8b176c3210c · 2025-06-28T03:22:01.000+06:00
diff --git a/websites/src/app/_components/code-editor.tsx b/websites/src/app/_components/code-editor.tsx
@@ -6,11 +6,12 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Loader2 } from 'lucide-react';
 import { LANGUAGE_MAP, SAMPLE_CODE } from '@/constants';
+import { Language } from '@/@types';
 
 interface CodeEditorProps {
   value: string;
   onChange: (value: string) => void;
-  language: string;
+  language: Language;
   height?: string;
   readOnly?: boolean;
 }
@@ -19,7 +20,7 @@ export function CodeEditor({
   value,
   onChange,
   language,
-  height = '400px',
+  height = '300px',
   readOnly = false,
 }: CodeEditorProps) {
   const { theme } = useTheme();
@@ -30,10 +31,10 @@ export function CodeEditor({
 
   const editorOptions = {
     minimap: { enabled: false },
-    fontSize: 14,
+    fontSize: 16,
     lineNumbers: 'on' as const,
     roundedSelection: false,
-    scrollBeyondLastLine: false,
+    scrollBeyondLastLine: true,
     automaticLayout: true,
     tabSize: 2,
     insertSpaces: true,
@@ -67,16 +68,16 @@ export function CodeEditor({
               <div className="w-3 h-3 rounded-full bg-green-400"></div>
             </div>
             <span className="text-sm font-medium text-slate-600">
-              {language}.
-              {LANGUAGE_MAP[language] === 'cpp'
+              {language}
+              {/* {LANGUAGE_MAP[language] === 'cpp'
                 ? 'cpp'
                 : LANGUAGE_MAP[language] === 'python'
                 ? 'py'
                 : LANGUAGE_MAP[language] === 'javascript'
                 ? 'js'
                 : LANGUAGE_MAP[language] === 'typescript'
                 ? 'ts'
-                : LANGUAGE_MAP[language]}
+                : LANGUAGE_MAP[language]} */}
             </span>
           </div>
           <Badge variant="secondary" className="text-xs">
@@ -88,7 +89,9 @@ export function CodeEditor({
           <Editor
             height={height}
             language={LANGUAGE_MAP[language] || 'plaintext'}
-            value={value || SAMPLE_CODE[language] || '// Start coding here...'}
+            value={value ?? '// Start coding here...'}
+            defaultLanguage={LANGUAGE_MAP[language]}
+            saveViewState={false}
             onChange={handleEditorChange}
             theme={theme === 'dark' ? 'vs-dark' : 'vs'}
             options={editorOptions}
diff --git a/websites/src/app/page.tsx b/websites/src/app/page.tsx
@@ -25,14 +25,7 @@ import { SUPPORTED_LANGUAGES } from '@/constants/language';
 import { CodeEditor } from './_components/code-editor';
 import { OutputViewer } from './_components/output-viewer';
 import { executeCodeAction } from './_actions/execute';
-import { Language } from '@/@types';
-
-interface ExecutionResult {
-  status: 'success' | 'error' | 'running';
-  output: string;
-  executionTime: number;
-  language: string;
-}
+import { ExecutionResult, Language } from '@/@types';
 
 export default function ExecuteMePlatform() {
   const [selectedLanguage, setSelectedLanguage] = useState<Language>('python');
@@ -42,28 +35,6 @@ export default function ExecuteMePlatform() {
     useState<ExecutionResult | null>(null);
   const [isExecuting, setIsExecuting] = useState(false);
 
-  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      setUploadedFile(file);
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const content = e.target?.result as string;
-        setCode(content);
-      };
-      reader.readAsText(file);
-
-      // Auto-detect language from file extension
-      const extension = file.name.split('.').pop();
-      const detectedLanguage = SUPPORTED_LANGUAGES.find(
-        (lang) => lang.extension === `.${extension}`
-      );
-      if (detectedLanguage) {
-        setSelectedLanguage(detectedLanguage.value as Language);
-      }
-    }
-  };
-
   const executeCode = async () => {
     if (!code.trim()) {
       return;
@@ -99,26 +70,6 @@ export default function ExecuteMePlatform() {
     }
   };
 
-  const copyOutput = () => {
-    if (executionResult?.output) {
-      navigator.clipboard.writeText(executionResult.output);
-    }
-  };
-
-  const downloadOutput = () => {
-    if (executionResult?.output) {
-      const blob = new Blob([executionResult.output], { type: 'text/plain' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `output_${Date.now()}.txt`;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-    }
-  };
-
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-4">
       <div className="max-w-7xl mx-auto">
@@ -143,21 +94,18 @@ export default function ExecuteMePlatform() {
         <div className="grid lg:grid-cols-2 gap-6">
           {/* Code Input Section */}
           <Card className="h-fit">
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Code2 className="w-5 h-5" />
-                Code Editor
-              </CardTitle>
-              <CardDescription>
-                Write or upload your code with full syntax highlighting
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
+            <CardHeader className="flex justify-between">
+              <div>
+                <CardTitle className="flex items-center gap-2">
+                  <Code2 className="w-5 h-5" />
+                  Code Editor
+                </CardTitle>
+                <CardDescription>
+                  Write or upload your code with full syntax highlighting
+                </CardDescription>
+              </div>
               {/* Language Selection */}
               <div className="space-y-2">
-                <label className="text-sm font-medium">
-                  Programming Language
-                </label>
                 <Select
                   value={selectedLanguage}
                   onValueChange={(e) => setSelectedLanguage(e as Language)}
@@ -174,71 +122,14 @@ export default function ExecuteMePlatform() {
                   </SelectContent>
                 </Select>
               </div>
-
-              <Tabs defaultValue="editor" className="w-full">
-                <TabsList className="grid w-full grid-cols-2">
-                  <TabsTrigger value="editor">Code Editor</TabsTrigger>
-                  <TabsTrigger value="upload">Upload File</TabsTrigger>
-                </TabsList>
-
-                <TabsContent value="editor" className="space-y-4">
-                  <CodeEditor
-                    value={code}
-                    onChange={setCode}
-                    language={selectedLanguage}
-                    height="500px"
-                  />
-                </TabsContent>
-
-                <TabsContent value="upload" className="space-y-4">
-                  <div className="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center hover:border-slate-400 transition-colors">
-                    <Upload className="w-12 h-12 text-slate-400 mx-auto mb-4" />
-                    <div className="space-y-2">
-                      <p className="text-sm text-slate-600">
-                        Drop your code file here or click to browse
-                      </p>
-                      <input
-                        type="file"
-                        onChange={handleFileUpload}
-                        accept={SUPPORTED_LANGUAGES.map(
-                          (l) => l.extension
-                        ).join(',')}
-                        className="hidden"
-                        id="file-upload"
-                      />
-                      <Button
-                        variant="outline"
-                        onClick={() =>
-                          document.getElementById('file-upload')?.click()
-                        }
-                      >
-                        Choose File
-                      </Button>
-                    </div>
-                  </div>
-
-                  {uploadedFile && (
-                    <div className="flex items-center gap-2 p-3 bg-slate-50 rounded-lg">
-                      <FileText className="w-4 h-4 text-slate-500" />
-                      <span className="text-sm font-medium">
-                        {uploadedFile.name}
-                      </span>
-                      <Badge variant="secondary" className="text-xs">
-                        {(uploadedFile.size / 1024).toFixed(1)} KB
-                      </Badge>
-                    </div>
-                  )}
-
-                  {code && (
-                    <CodeEditor
-                      value={code}
-                      onChange={setCode}
-                      language={selectedLanguage}
-                      height="400px"
-                    />
-                  )}
-                </TabsContent>
-              </Tabs>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <CodeEditor
+                value={code}
+                onChange={setCode}
+                language={selectedLanguage}
+                height="300px"
+              />
 
               <Button
                 onClick={executeCode}
diff --git a/websites/src/constants/language.ts b/websites/src/constants/language.ts
@@ -1,12 +1,12 @@
 export const SUPPORTED_LANGUAGES = [
   { value: 'python', label: 'Python', extension: '.py' },
-  { value: 'javascript', label: 'JavaScript', extension: '.js' },
-  { value: 'typescript', label: 'TypeScript', extension: '.ts' },
-  { value: 'java', label: 'Java', extension: '.java' },
-  { value: 'cpp', label: 'C++', extension: '.cpp' },
-  { value: 'c', label: 'C', extension: '.c' },
-  { value: 'go', label: 'Go', extension: '.go' },
-  { value: 'rust', label: 'Rust', extension: '.rs' },
-  { value: 'php', label: 'PHP', extension: '.php' },
-  { value: 'ruby', label: 'Ruby', extension: '.rb' },
+  { value: 'nodejs', label: 'JavaScript', extension: '.js' },
+  // { value: 'typescript', label: 'TypeScript', extension: '.ts' },
+  // { value: 'java', label: 'Java', extension: '.java' },
+  // { value: 'cpp', label: 'C++', extension: '.cpp' },
+  // { value: 'c', label: 'C', extension: '.c' },
+  // { value: 'go', label: 'Go', extension: '.go' },
+  // { value: 'rust', label: 'Rust', extension: '.rs' },
+  // { value: 'php', label: 'PHP', extension: '.php' },
+  // { value: 'ruby', label: 'Ruby', extension: '.rb' },
 ] as const;
diff --git a/websites/src/lib/utils.ts b/websites/src/lib/utils.ts
@@ -1,6 +1,24 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
+
+export const copyOutput = (output: string) => {
+  navigator.clipboard.writeText(output);
+};
+
+export const downloadOutput = (output: string) => {
+  if (output) {
+    const blob = new Blob([output], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `executeme_${Date.now()}.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+};
