Skip to content

Commit caa6e52

Browse files
codescalpercodescalper
committed
Added monaco-editor with list of languages
1 parent 7a8665c commit caa6e52

File tree

9 files changed

+238
-7
lines changed

9 files changed

+238
-7
lines changed

‎client/package-lock.json

Lines changed: 50 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,15 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@monaco-editor/react": "^4.6.0",
1314
"@nextui-org/react": "^2.2.2",
1415
"canvas-confetti": "^1.9.0",
1516
"framer-motion": "^10.16.4",
1617
"next-themes": "^0.2.1",
1718
"react": "^18.2.0",
1819
"react-dom": "^18.2.0",
19-
"react-icons": "^4.11.0"
20+
"react-icons": "^4.11.0",
21+
"react-toastify": "^9.1.3"
2022
},
2123
"devDependencies": {
2224
"@types/canvas-confetti": "^1.6.2",

‎client/src/App.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import PasteArea from './components/Form/Snippet'
12
import Header from './components/Header'
23
import Hero from './components/Hero'
34
import Steps from './components/Steps'
@@ -11,6 +12,7 @@ function App() {
1112
<Hero />
1213
<div className="container mx-auto px-4 lg:w-2/4 my-24">
1314
<Steps />
15+
<PasteArea />
1416
</div>
1517
</>
1618
)

‎client/src/components/Form/Snippet.tsx

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
/* eslint-disable @typescript-eslint/no-unused-vars */
2+
import { BsCodeSlash } from 'react-icons/bs';
3+
import {HiMiniArrowUpTray} from "react-icons/hi2"
4+
import Editor from '@monaco-editor/react';
5+
import { useMemo, useState } from 'react';
6+
import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from "@nextui-org/react";
7+
import { useTheme } from 'next-themes';
8+
import { Button as But } from '@nextui-org/react';
9+
10+
11+
export default function PasteArea({ snippet = null }) {
12+
const [selectedKeys, setSelectedKeys] = useState("Plain Text");
13+
14+
const selectedValue = useMemo(
15+
() => Array.from(selectedKeys).join(", ").replaceAll("_", " "),
16+
[selectedKeys]
17+
);
18+
19+
const languages = [
20+
{
21+
name: 'Plain Text',
22+
value: 'plaintext',
23+
},
24+
{
25+
name: 'JavaScript',
26+
value: 'javascript',
27+
},
28+
{
29+
name: 'TypeScript',
30+
value: 'typescript',
31+
},
32+
{
33+
name: 'Rust',
34+
value: 'rust',
35+
},
36+
{
37+
name: 'Python',
38+
value: 'python',
39+
},
40+
{
41+
name: 'Java',
42+
value: 'java',
43+
},
44+
{
45+
name: 'C',
46+
value: 'c',
47+
},
48+
{
49+
name: 'C++',
50+
value: 'cpp',
51+
},
52+
{
53+
name: 'C#',
54+
value: 'csharp',
55+
},
56+
];
57+
58+
const initialState = {
59+
language: languages[0],
60+
code: '',
61+
};
62+
63+
const onChange = (key: string, value: string | undefined) => {
64+
// Define the onChange function to handle code changes.
65+
// For example, you can update the code in the state.
66+
};
67+
68+
// Obtain the current theme
69+
const { theme } = useTheme();
70+
71+
return (
72+
<div className="gradient-border flex justify-center items-center">
73+
<form action="#" className="relative w-full">
74+
<div className="border border-gray-300 dark:border-zinc-600 shadow-sm focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500 bg-white dark:bg-zinc-800 dark:text-gray-100">
75+
<Editor
76+
height="350px"
77+
language={initialState.language.value}
78+
theme={theme === 'dark' ? 'vs-dark' : 'light'}
79+
value={initialState.code}
80+
options={{
81+
readOnly: !!snippet,
82+
minimap: {
83+
enabled: false,
84+
},
85+
contextmenu: false,
86+
suggest: {
87+
},
88+
inlineSuggest: {
89+
enabled: false,
90+
},
91+
quickSuggestions: false,
92+
}}
93+
onChange={(value) => onChange('code', value)}
94+
/>
95+
96+
<div aria-hidden="true">
97+
<div className="py-2">
98+
<div className="h-9" />
99+
</div>
100+
<div className="h-px" />
101+
<div className="py-2">
102+
<div className="py-px">
103+
<div className="h-9" />
104+
</div>
105+
</div>
106+
</div>
107+
</div>
108+
109+
<div className="absolute inset-x-px bottom-0">
110+
<div className="flex flex-nowrap justify-end space-x-2 px-2 py-2 sm:px-3 border-t border-gray-200 dark:border-zinc-600">
111+
<Dropdown>
112+
<DropdownTrigger>
113+
<But
114+
variant="bordered"
115+
className="capitalize"
116+
>
117+
<BsCodeSlash /> {selectedValue}
118+
</But>
119+
</DropdownTrigger>
120+
<DropdownMenu
121+
aria-label="Single selection example"
122+
variant="flat"
123+
disallowEmptySelection
124+
selectionMode="single"
125+
selectedKeys={selectedKeys}
126+
onSelectionChange={setSelectedKeys}
127+
>
128+
{
129+
languages.map((lang)=>(
130+
<DropdownItem key={lang.name} value={lang.value}>
131+
{lang.name}
132+
</DropdownItem>
133+
))
134+
135+
}
136+
</DropdownMenu>
137+
</Dropdown>
138+
</div>
139+
140+
<div className="flex items-center justify-end space-x-3 border-t border-gray-200 dark:border-zinc-600 px-2 py-2 sm:px-3">
141+
<div>
142+
<But>
143+
<HiMiniArrowUpTray /> Create Snippet
144+
</But>
145+
</div>
146+
</div>
147+
148+
</div>
149+
</form>
150+
</div>
151+
);
152+
}

‎client/src/components/Header.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from 'react';
21
import { ThemeSwitcher } from './ThemeSwitcher';
32
import { FaGithub, FaLinkedin, FaTwitter } from 'react-icons/fa';
43

‎client/src/components/Steps.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Button } from "@nextui-org/react"
22
import { AiOutlineRight } from "react-icons/ai"
33
import confetti from 'canvas-confetti';
4-
4+
import { IconContext } from "react-icons";
55

66

77

@@ -19,11 +19,16 @@ const Steps = () => {
1919
<div></div>
2020
<div className="flex items-center justify-around space-x-2 col-span-4">
2121
Paste
22-
<AiOutlineRight width={40} />
22+
<IconContext.Provider value={{ className: "text-purple-500 dark:text-yellow-500 text-xl " }}>
23+
<AiOutlineRight width={40} />
24+
</IconContext.Provider>
2325
</div>
2426
<div className="flex items-center justify-around space-x-2 col-span-4">
2527
Create
26-
<AiOutlineRight width={40} />
28+
<IconContext.Provider value={{ className: "text-purple-500 dark:text-yellow-500 text-xl " }}>
29+
<AiOutlineRight width={40} />
30+
</IconContext.Provider>
31+
2732
</div>
2833
<div className="flex items-center justify-around space-x-2">
2934
<div className="flex justify-center items-center ">

‎client/src/index.css

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,16 @@
2525
background-position: 100% 0%;
2626
}
2727
}
28-
28+
29+
30+
/* For dark theme */
31+
.dark-glow {
32+
/* Dark theme glow styles go here */
33+
filter: drop-shadow(0 0 10px rgba(255, 165, 0, 0.7)); /* Orange glow effect */
34+
}
35+
36+
/* For light theme */
37+
.light-glow {
38+
/* Light theme glow styles go here */
39+
filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.7)); /* Red glow effect */
40+
}

‎client/tailwind.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export default {
1515
'gradient-conic':
1616
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
1717
},
18+
1819
},
1920
},
2021

‎client/vite.config.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,13 @@ import react from '@vitejs/plugin-react-swc'
44
// https://vitejs.dev/config/
55
export default defineConfig({
66
plugins: [react()],
7+
server: {
8+
proxy: {
9+
'/api': {
10+
target: 'http://localhost:8080',
11+
changeOrigin: true,
12+
rewrite: (path) => path.replace(/^\/api/, '')
13+
}
14+
}
15+
}
716
})

0 commit comments

Comments
 (0)