+
+ setSnippet({ ...snippet, fileName: ev.currentTarget.value })}
+ />
+ setSnippet({ ...snippet, description: ev.currentTarget.value })}
+ />
+ setSnippet({ ...snippet, lang: ev as "javascript" | "typescript" })}
+ />
+ {
+ setButtonLoading(true)
+ createSnippet(snippet).catch(e => {
+ if (e.message === 'fillFields') {
+ notifications.show({
+ title: 'Something went wrong',
+ message: 'Please fill in all the fields',
+ color: 'red',
+ })
+ }
+ }).then(id => {
+ if (id) {
+ router.push(`/s/${id}`)
+ }
+ })
+ setButtonLoading(false)
+ }}
+ >
+ Create
+
+
+
+
+
+ )
+}
diff --git a/src/components/CreateSnippet/createSnippet.ts b/src/components/CreateSnippet/createSnippet.ts
new file mode 100644
index 0000000..b532d87
--- /dev/null
+++ b/src/components/CreateSnippet/createSnippet.ts
@@ -0,0 +1,20 @@
+'use server'
+import {ICreateApiRequest} from "@/utils/types";
+import db from "@/db";
+import * as schema from "@/db/schema";
+import {randomString} from "util-utils";
+
+export async function createSnippet(snippet: ICreateApiRequest) {
+ if (Object.values(snippet).some(e => typeof e === 'string' && e.trim() === '')) throw new Error('fillFields');
+ const query = await db
+ .insert(schema.code)
+ .values({
+ id: randomString(8),
+ ...snippet
+ })
+ .returning({
+ snippetId: schema.code.id
+ })
+ .execute();
+ return query[0].snippetId;
+}
\ No newline at end of file
diff --git a/src/components/CreateSnippet/index.module.css b/src/components/CreateSnippet/index.module.css
new file mode 100644
index 0000000..e68f8c6
--- /dev/null
+++ b/src/components/CreateSnippet/index.module.css
@@ -0,0 +1,13 @@
+.inputs {
+ margin-bottom: 20px;
+ display: flex;
+ gap: 5px;
+ width: 100%;
+}
+
+.monaco {
+ width: 100%;
+ height: 100%;
+ border-radius: 5px;
+ border: 1px solid #ccc;
+}
\ No newline at end of file
diff --git a/src/components/MonacoEditor/MonacoEditor.tsx b/src/components/MonacoEditor/MonacoEditor.tsx
new file mode 100644
index 0000000..2413381
--- /dev/null
+++ b/src/components/MonacoEditor/MonacoEditor.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import {Editor} from "@monaco-editor/react";
+import {useUser} from "@clerk/nextjs";
+
+export default function MonacoEditor(props: Props) {
+ const clerk = useUser()
+ return clerk.isLoaded &&