45 |
57 | );
58 | }
59 |
--------------------------------------------------------------------------------
/src/components/editor/stats.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from "react";
2 | import { useStore } from "@/store/useStore";
3 |
4 | import { FileTextIcon, TypeIcon, HashIcon } from "lucide-react";
5 |
6 | interface CodeStats {
7 | lines: number;
8 | words: number;
9 | characters: number;
10 | }
11 |
12 | export default function Stats() {
13 | const { code } = useStore();
14 |
15 | const stats: CodeStats = useMemo(
16 | () => ({
17 | lines: code.split("\n").length,
18 | words: code.trim().split(/\s+/).length,
19 | characters: code.length
20 | }),
21 | [code]
22 | );
23 |
24 | return (
25 |
26 |
44 | );
45 | }
46 |
47 | interface StatItemProps {
48 | icon: React.ReactNode;
49 | value: number;
50 | label: string;
51 | }
52 |
53 | function StatItem({ icon, value, label }: StatItemProps) {
54 | return (
55 |
27 |
43 |
56 |
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/src/components/ui/resizable.tsx:
--------------------------------------------------------------------------------
1 | import * as ResizablePrimitive from "react-resizable-panels";
2 | import { GripVerticalIcon } from "lucide-react";
3 |
4 | import { cn } from "@/lib/utils";
5 |
6 | const ResizablePanelGroup = ({
7 | className,
8 | ...props
9 | }: React.ComponentProps
57 | {icon}
58 | {value}
59 |
60 | {label}
61 |
37 |
39 | )}
40 |
66 | 
71 |
75 |
71 | 72 | Loading WebAssembly 73 |
74 |
85 |
87 | );
88 | }
89 |
90 | return (
91 |
95 | {(error || output) && (
96 |
116 | );
117 | }
118 |
--------------------------------------------------------------------------------
/src/store/useStore.ts:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 | import type { PyodideInterface } from "@/types";
3 |
4 | type Direction = "horizontal" | "vertical";
5 |
6 | interface State {
7 | code: string;
8 | output: string;
9 | error: string | null;
10 | direction: Direction;
11 | pyodide: PyodideInterface | null;
12 | isPyodideLoading: boolean;
13 | isCodeExecuting: boolean;
14 | isLibLoading: boolean;
15 | }
16 |
17 | interface Actions {
18 | setCode: (code: string) => void;
19 | setOutput: (newOutput: string) => void;
20 | clearOutput: (defaultValue?: string) => void;
21 | setError: (error: string | null) => void;
22 | setDirection: (direction: Direction) => void;
23 | initializePyodide: () => Promise
99 | {error || output}
100 |
101 | )}
102 |
115 |
2 |
3 |
4 | 
5 |
6 |
7 | # Python Playground
8 |
9 |
29 | 30 | 31 |
32 |
33 |
34 |
35 |
36 | ## Features
37 |
38 | 10 | Browser-based Python playground built using WebAssembly (Pyodide) and ReactJS. Run and test Python code directly in your browser with an interactive and user-friendly interface. 11 |
12 | 13 | 27 | 28 |
16 | 
19 | 
22 | 
25 | 29 | 30 | 31 |
 Python in Browser |
41 |  WebAssembly Powered |
42 |  Library Support |
43 |
|
46 | • Run Python code instantly 47 | • No server-side processing 48 | • Immediate feedback and results 49 | |
50 |
51 | • Pyodide integration 52 | • Near-native performance 53 | • Seamless Python execution 54 | |
55 |
56 | • Install packages via micropip 57 | • Access to wide range of libraries 58 | • Expand functionality on-the-fly 59 | |
60 |
 Terminal Commands |
63 |  Intuitive Interface |
64 |  Fast and Responsive |
65 |
|
68 | • Support for pwd, clear, etc. 69 | • Familiar command-line experience 70 | • Enhanced debugging capabilities 71 | |
72 |
73 | • Clean and modern UI design 74 | • User-friendly code editor 75 | • Intuitive layout and controls 76 | |
77 |
78 | • Quick code execution 79 | • Responsive editor interface 80 | • Smooth user experience 81 | |
82 |
32 |
35 | );
36 | }
37 |
38 | export default function Settings() {
39 | const { code, pipInstall, isLibLoading } = useStore();
40 |
41 | const handleDownloadCode = useCallback(() => {
42 | const blob = new Blob([code], { type: "text/plain" });
43 | const url = URL.createObjectURL(blob);
44 | const link = document.createElement("a");
45 | link.download = "code.py";
46 | link.href = url;
47 | link.click();
48 | URL.revokeObjectURL(url);
49 | }, [code]);
50 |
51 | const handlePipInstall = useCallback(
52 | async (e: React.FormEvent{title}
33 |{children}
34 |
82 |
83 | Settings
84 |
85 | Personalize your site experience here.
86 |
87 |
88 |
134 |
135 |
138 |
139 |
140 |
141 |
89 |
90 |
111 |
112 |
113 |
122 |
131 |
132 |
133 |