Skip to content

Commit b94df19

Browse files
antoniovini47antoniovini47
authored
Merge branch 'main' into main
2 parents 855259d + 1d3fbb8 commit b94df19

8 files changed

Lines changed: 222 additions & 58 deletions

File tree

‎package-lock.json‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"axios": "^1.7.7",
1717
"react": "^18.3.1",
1818
"react-dom": "^18.3.1",
19+
"react-icons": "^5.3.0",
1920
"y-monaco": "^0.1.6"
2021
},
2122
"devDependencies": {

‎src/App.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
#root {
2+
max-width: 1280px;
3+
margin: 0 auto;
4+
padding: 2rem;
5+
text-align: start;
6+
}

‎src/components/CodeEditor.tsx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ import { YjsProvider, useYjsProvider } from "@superviz/react-sdk";
88
import * as Y from "yjs";
99
import { MonacoBinding } from "y-monaco";
1010
import * as monaco from "monaco-editor";
11-
import postCode from "../services/postCode";
11+
// import postCode from "../services/postCode";
12+
// import { getFirestore } from "firebase/firestore";
13+
// import { initializeApp } from "firebase/app";
14+
// initializeApp();
15+
// const dbFirestore = getFirestore();
1216

1317
const ydoc = new Y.Doc();
1418

@@ -18,6 +22,9 @@ const CodeEditor = (props: { roomId: string }) => {
1822
const [language, setLanguage] = useState("javascript");
1923
const { provider } = useYjsProvider();
2024

25+
// test TODO: remove
26+
props.roomId = "test";
27+
2128
const onMount = (editor: monaco.editor.IStandaloneCodeEditor) => {
2229
editorRef.current = editor;
2330
editor.focus();
@@ -45,6 +52,14 @@ const CodeEditor = (props: { roomId: string }) => {
4552
};
4653
}, [provider]);
4754

55+
// async function saveCode() {
56+
// const docRef = dbFirestore.collection("codes").doc(props.roomId);
57+
58+
// await docRef.set({
59+
// code: value,
60+
// });
61+
// }
62+
4863
return (
4964
<YjsProvider doc={ydoc}>
5065
<Box>

‎src/components/CollapsibleText.tsx‎

Lines changed: 79 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
import React, { ReactNode, useState } from "react";
2+
import {
3+
FaChevronDown,
4+
FaChevronUp,
5+
FaCheckCircle,
6+
FaExclamationCircle,
7+
FaTimesCircle,
8+
} from "react-icons/fa"; // Ícones
29

310
interface CollapsibleTextProps {
411
title: string;
@@ -7,6 +14,18 @@ interface CollapsibleTextProps {
714
children?: ReactNode;
815
}
916

17+
const getStatusIcon = (status?: string) => {
18+
switch (status) {
19+
case "success":
20+
return <FaCheckCircle color="green" />;
21+
case "running":
22+
return <FaExclamationCircle color="orange" />;
23+
case "failed":
24+
return <FaTimesCircle color="red" />;
25+
default:
26+
return null;
27+
}
28+
};
1029
const CollapsibleText: React.FC<CollapsibleTextProps> = ({
1130
title,
1231
log,
@@ -16,20 +35,69 @@ const CollapsibleText: React.FC<CollapsibleTextProps> = ({
1635
const [isOpen, setIsOpen] = useState(false);
1736

1837
return (
19-
<div style={{ backgroundColor: "#999999", padding: 12, margin: 12 }}>
20-
{(log || children || status) && (
21-
<button onClick={() => setIsOpen(!isOpen)}>
22-
{isOpen ? "Hide" : "Show"} {title}
38+
<div
39+
style={{
40+
backgroundColor: "#f6f8fa",
41+
padding: 16,
42+
margin: 12,
43+
borderRadius: 6,
44+
border: "1px solid #d1d5da",
45+
}}
46+
>
47+
<div
48+
style={{
49+
display: "flex",
50+
alignItems: "center",
51+
justifyContent: "space-between",
52+
}}
53+
>
54+
<div style={{ display: "flex", alignItems: "center" }}>
55+
{getStatusIcon(status)}
56+
<span style={{ marginLeft: 8, fontWeight: 600 }}>{title}</span>
57+
</div>
58+
<button
59+
onClick={() => setIsOpen(!isOpen)}
60+
style={{
61+
background: "none",
62+
border: "none",
63+
cursor: "pointer",
64+
color: "#0366d6",
65+
display: "flex",
66+
alignItems: "center",
67+
fontSize: 14,
68+
}}
69+
>
70+
{isOpen ? "Hide logs" : "Show logs"}{" "}
71+
{isOpen ? <FaChevronUp /> : <FaChevronDown />}
2372
</button>
24-
)}
73+
</div>
74+
2575
{isOpen && (log || children || status) && (
26-
<>
27-
{/* {children} <div dangerouslySetInnerHTML={{ __html: log.replace(/\n/g, "<br />") }} /> */}
28-
{children} <div> {log} </div>
29-
</>
76+
<div
77+
style={{
78+
padding: "12px 0",
79+
borderTop: "1px solid #e1e4e8",
80+
marginTop: 12,
81+
}}
82+
>
83+
{children}
84+
{log && (
85+
<pre
86+
style={{
87+
whiteSpace: "pre-wrap",
88+
background: "#f6f8fa",
89+
padding: 12,
90+
borderRadius: 6,
91+
}}
92+
>
93+
{log}
94+
</pre>
95+
)}
96+
</div>
97+
)}
98+
{status && (
99+
<h4 style={{ color: "#586069", marginTop: 12 }}>Status: {status}</h4>
30100
)}
31-
{status && <h4>Status: {status}</h4>}
32-
{/*TODO: change icon based on status... */}
33101
</div>
34102
);
35103
};

‎src/index.css‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
:root {
2+
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3+
line-height: 1.5;
4+
font-weight: 400;
5+
6+
color-scheme: light dark;
7+
color: rgba(255, 255, 255, 0.87);
8+
background-color: #242424;
9+
10+
font-synthesis: none;
11+
text-rendering: optimizeLegibility;
12+
-webkit-font-smoothing: antialiased;
13+
-moz-osx-font-smoothing: grayscale;
14+
}
15+
16+
a {
17+
font-weight: 500;
18+
color: #646cff;
19+
text-decoration: inherit;
20+
}
21+
a:hover {
22+
color: #535bf2;
23+
}
24+
25+
body {
26+
margin: 0;
27+
min-height: 100vh;
28+
}
29+
30+
h1 {
31+
font-size: 3.2em;
32+
line-height: 1.1;
33+
}
34+
35+
button {
36+
border-radius: 8px;
37+
border: 1px solid transparent;
38+
padding: 0.6em 1.2em;
39+
font-size: 1em;
40+
font-weight: 500;
41+
font-family: inherit;
42+
background-color: #1a1a1a;
43+
cursor: pointer;
44+
transition: border-color 0.25s;
45+
}
46+
button:hover {
47+
border-color: #646cff;
48+
}
49+
button:focus,
50+
button:focus-visible {
51+
outline: 4px auto -webkit-focus-ring-color;
52+
}
53+
54+
@media (prefers-color-scheme: light) {
55+
:root {
56+
color: #213547;
57+
background-color: #ffffff;
58+
}
59+
a:hover {
60+
color: #747bff;
61+
}
62+
button {
63+
background-color: #f9f9f9;
64+
}
65+
}
66+
67+
#root {
68+
background: #e9e5ef;
69+
margin: 0;
70+
height: 100%;
71+
}
72+
73+
#monaco-editor {
74+
width: 100%;
75+
height: 600px;
76+
border: 1px solid #ccc;
77+
}
78+
79+
.yRemoteSelection {
80+
background-color: red;
81+
opacity: 0.5;
82+
}
83+
84+
.yRemoteSelectionHead {
85+
position: absolute;
86+
background-color: red;
87+
height: 100%;
88+
bottom: 0;
89+
width: 2px;
90+
box-sizing: border-box;
91+
}
92+

0 commit comments

Comments
 (0)