├── .gitignore ├── README.md ├── next-env.d.ts ├── package-lock.json ├── package.json ├── pages ├── App.js ├── _app.tsx ├── api │ └── hello.tsx ├── components │ ├── Chat │ │ ├── Chat.js │ │ └── Chat.module.scss │ ├── Editor │ │ ├── Editor.module.scss │ │ └── Editor.tsx │ ├── InfoBar │ │ ├── InfoBar.module.scss │ │ └── InfoBar.tsx │ ├── Input │ │ ├── Input.module.scss │ │ └── Input.tsx │ ├── Join │ │ ├── Join.module.scss │ │ └── Join.tsx │ ├── Messages │ │ ├── Message │ │ │ ├── Message.js │ │ │ └── Message.module.scss │ │ ├── Messages.js │ │ └── Messages.module.scss │ ├── Navbar │ │ ├── Nav.module.scss │ │ └── Navbar.tsx │ ├── Notes │ │ ├── NoteComp │ │ │ ├── CreateArea.tsx │ │ │ └── Note.tsx │ │ ├── Notes.module.scss │ │ └── Notes.tsx │ └── body │ │ ├── Body.module.scss │ │ └── Body.tsx └── index.tsx ├── public ├── .comments │ ├── fav.png.xml │ ├── logo2.png.xml │ ├── logo3.png.xml │ └── logo5.png.xml ├── fav.ico ├── logo5.png └── vercel.svg ├── server ├── .gitignore ├── Procfile ├── index.js ├── package-lock.json ├── package.json ├── router.js └── users.js ├── styles ├── App.module.scss ├── Home.module.scss └── globals.scss └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | ./server 5 | /node_modules 6 | /.pnp 7 | .pnp.js 8 | ./package-lock.json 9 | /package-lock.json 10 | 11 | # testing 12 | /coverage 13 | 14 | # next.js 15 | /.next/ 16 | /out/ 17 | 18 | # production 19 | /build 20 | 21 | # misc 22 | .DS_Store 23 | *.pem 24 | 25 | # debug 26 | npm-debug.log* 27 | yarn-debug.log* 28 | yarn-error.log* 29 | 30 | # local env files 31 | .env.local 32 | .env.development.local 33 | .env.test.local 34 | .env.production.local 35 | 36 | # vercel 37 | .vercel 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Xpro: A Next-Generation Code Editor 2 | 3 | 4 | ![cool, smooth & useful..png](https://cdn.hashnode.com/res/hashnode/image/upload/v1612765322346/dpERJJM3A.png) 5 | 6 | 7 | ✖️pro is a new and customizable online Code Editor. It is a “playground for the front-end designers and developers". It is great for testing out bugs, making notes, and collaborating with others. 8 | 9 | 10 | 11 | - [Live Demo of Project](https://code-editor-xpro.vercel.app/) 12 | - [Demo Video](https://youtu.be/pO00gSfIXZ8) 13 | 14 | 15 | 16 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 17 | 18 | ## Getting Started 19 | 20 | First, run the development server: 21 | 22 | ``` 23 | bash 24 | npm run dev 25 | # or 26 | yarn dev 27 | 28 | ``` 29 | 30 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 31 | 32 | 33 | To run server Chat server locally. 34 | 35 | ``` 36 | cd server/ 37 | npm start 38 | 39 | ``` 40 | - And then go to the chat.tsx file and uncomment the 41 | 42 | ``` 43 | server = io.connect('localhost:4000') 44 | 45 | ``` 46 | 47 | 48 | 49 | ## Learn More 50 | 51 | To learn more about Next.js, take a look at the following resources: 52 | 53 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 54 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 55 | 56 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 57 | 58 | ## Deploy on Vercel 59 | 60 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 61 | 62 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 63 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xpro3", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "start": "next start", 8 | "build": "next build" 9 | }, 10 | "dependencies": { 11 | "@material-ui/core": "^4.11.4", 12 | "@material-ui/icons": "^4.11.2", 13 | "@types/node": "^15.12.4", 14 | "@types/react": "^17.0.11", 15 | "antd": "^4.16.3", 16 | "codemirror": "^5.62.0", 17 | "next": "11.0.0", 18 | "react": "17.0.2", 19 | "react-codemirror2": "^7.2.1", 20 | "react-dom": "17.0.2", 21 | "react-emoji": "^0.5.0", 22 | "react-scroll-to-bottom": "^4.1.2", 23 | "react-spinners": "^0.11.0", 24 | "react-split-pane": "^0.1.92", 25 | "react-tabs": "^3.2.2", 26 | "sass": "^1.35.1", 27 | "socket.io-client": "^4.1.2", 28 | "typescript": "^4.3.4", 29 | "vercel": "^23.0.1" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /pages/App.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import Body from './components/body/Body'; 3 | import styles from '../styles/App.module.scss'; 4 | import Navbar from './components/Navbar/Navbar'; 5 | import ClimbingBoxLoader from "react-spinners/ClimbingBoxLoader"; 6 | 7 | const override = { 8 | position: "absolute", 9 | top: "45%", 10 | left: "45%" 11 | }; 12 | 13 | 14 | function App() { 15 | const [loading, setLoading] = useState(false); 16 | 17 | useEffect(() => { 18 | setLoading(true) 19 | // true 20 | setTimeout(() => { 21 | setLoading(false) 22 | }, 1000); 23 | }, []) 24 | 25 | return ( 26 |
27 | { loading ? 30 | :
31 | 32 | 33 |
} 34 | 35 |
36 | ) 37 | } 38 | 39 | export default App; 40 | -------------------------------------------------------------------------------- /pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.scss' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /pages/api/hello.tsx: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default (req, res) => { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /pages/components/Chat/Chat.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import InfoBar from '../InfoBar/InfoBar'; 3 | import Input from '../Input/Input'; 4 | import Messages from '../Messages/Messages'; 5 | import styles from "./Chat.module.scss"; 6 | import io from "socket.io-client"; 7 | 8 | const ENDPOINT = 'https://xpro-chatapp.herokuapp.com/'; 9 | // const ENDPOINT = 'localhost:4000'; 10 | let socket; 11 | 12 | var connectionOptions = { 13 | "force new connection": true, 14 | "reconnectionAttempts": "Infinity", 15 | "timeout": 10000, 16 | "transports": ["websocket"] 17 | }; 18 | 19 | 20 | function Chat({ _name, _room }) { 21 | 22 | const [name, setName] = useState(''); 23 | const [room, setRoom] = useState(''); 24 | const [users, setUsers] = useState(''); 25 | const [message, setMessage] = useState(''); 26 | const [messages, setMessages] = useState([]); 27 | 28 | 29 | 30 | useEffect(() => { 31 | 32 | socket = io(ENDPOINT, connectionOptions); 33 | setRoom(_room); 34 | setName(_name) 35 | 36 | socket.emit('join', { name: _name, room: _room }, (error) => { 37 | if (error) { 38 | alert(error); 39 | } 40 | }); 41 | }, []); 42 | 43 | useEffect(() => { 44 | socket.on('message', message => { 45 | // console.log("Comming"); 46 | setMessages(messages => [...messages, message]); 47 | 48 | }); 49 | 50 | socket.on("roomData", ({ users }) => { 51 | setUsers(users); 52 | }); 53 | }, []); 54 | 55 | const sendMessage = (event) => { 56 | event.preventDefault(); 57 | 58 | if (message) { 59 | socket.emit('sendMessage', message, () => setMessage('')); 60 | } 61 | } 62 | 63 | return ( 64 |
65 | 66 | 67 |
68 |
69 | 70 | 71 | 72 | 73 | 74 | 75 |
76 |
77 |
78 | ) 79 | } 80 | 81 | export default Chat; 82 | -------------------------------------------------------------------------------- /pages/components/Chat/Chat.module.scss: -------------------------------------------------------------------------------- 1 | .outerContainer { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | 6 | 7 | } 8 | 9 | .container { 10 | display: flex; 11 | flex-direction: column; 12 | justify-content: space-between; 13 | color: aliceblue; 14 | border-radius: 8px; 15 | height: 78vh; 16 | width: 100%; 17 | box-shadow: 0px 0px 5px rgb(6, 176, 255); 18 | 19 | } 20 | -------------------------------------------------------------------------------- /pages/components/Editor/Editor.module.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap'); 2 | 3 | .editorContainer{ 4 | height: 51vh; 5 | width: 100%; 6 | 7 | .wrapper{ 8 | height: 100%; 9 | width: 100%; 10 | box-shadow: 0px 2px 5px rgb(6, 255, 234); 11 | transition: .2s linear; 12 | border-radius: 10%; 13 | margin-top: -10px; 14 | 15 | &:hover{ 16 | 17 | box-shadow: 0px 3px 10px rgb(6, 255, 234); 18 | } 19 | 20 | } 21 | 22 | .coloumnTitle{ 23 | font-size: 1.2rem; 24 | 25 | display: flex; 26 | align-items: center; 27 | justify-content: center; 28 | background-color: #000000; 29 | /* // hsl(225, 6%, 13%) */ 30 | color: antiquewhite; 31 | font-weight: 700; 32 | height: 50px; 33 | border-top-right-radius: 20%; 34 | border-top-left-radius: 20%; 35 | 36 | 37 | } 38 | 39 | 40 | .codeMirrorWrapper{ 41 | margin-top: 10px; 42 | height: 100% !important; 43 | width: 100%; 44 | border-bottom-left-radius: 20% !important; 45 | border-bottom-right-radius: 20% !important; 46 | font-weight: none !important; 47 | line-height: 1.4rem; 48 | font-size: 1.2rem; 49 | font-family: 'Ubuntu Mono', monospace !important; 50 | overflow: hidden; 51 | 52 | } 53 | 54 | } 55 | 56 | -------------------------------------------------------------------------------- /pages/components/Editor/Editor.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from './Editor.module.scss'; 3 | import "codemirror/lib/codemirror.css"; 4 | import "codemirror/theme/ayu-dark.css"; 5 | 6 | if (typeof navigator !== "undefined") { 7 | require("codemirror/mode/xml/xml"); 8 | require("codemirror/mode/css/css") 9 | require("codemirror/mode/javascript/javascript"); 10 | 11 | } 12 | import { Controlled } from "react-codemirror2"; 13 | // For embeding Editor, used react-codemirror2 14 | 15 | // import styles from './main.module.scss'; 16 | // import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 17 | // import { faCompressAlt, faExpandAlt } from '@fortawesome/free-solid-svg-icons' 18 | 19 | 20 | 21 | function Editor(props) { 22 | 23 | const { 24 | displayName, 25 | value, 26 | language, 27 | onChange, 28 | } = props; 29 | 30 | const [screen, setScreen] = React.useState(true) 31 | 32 | 33 | function handleChange(editor, data, value) { 34 | onChange(value); 35 | } 36 | function screenSize() { 37 | let value = ""; 38 | (screen) ? value = [styles.mainContainer,].join('') : value = [styles.mainContainer, styles.collapse].join('') 39 | console.log(value); 40 | 41 | return value; 42 | } 43 | 44 | return ( 45 |
46 |
47 |
48 | {displayName} 49 |
50 | 51 | 65 |
66 | 67 | 68 |
69 | ) 70 | } 71 | 72 | export default Editor; 73 | -------------------------------------------------------------------------------- /pages/components/InfoBar/InfoBar.module.scss: -------------------------------------------------------------------------------- 1 | .infoBar { 2 | display: flex; 3 | align-items: center; 4 | justify-content: space-between; 5 | background: #2979FF; 6 | border-radius: 4px 4px 0 0; 7 | height: 60px; 8 | width: 100%; 9 | 10 | } 11 | 12 | .leftInnerContainer { 13 | flex: 0.5; 14 | display: flex; 15 | align-items: center; 16 | margin-left: 5%; 17 | color: white; 18 | padding-top: 10px; 19 | 20 | h3{ 21 | color: aliceblue !important; 22 | font-size: larger; 23 | font-weight: 700; 24 | } 25 | } 26 | 27 | .rightInnerContainer { 28 | display: flex; 29 | flex: 0.5; 30 | justify-content: flex-end; 31 | margin-right: 5%; 32 | } 33 | 34 | .onlineIcon { 35 | margin-right: 5%; 36 | } 37 | -------------------------------------------------------------------------------- /pages/components/InfoBar/InfoBar.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './InfoBar.module.scss'; 3 | 4 | function InfoBar({ room }) { 5 | return ( 6 |
7 |
8 | {/* online icon*/} 9 |

Room ID: {room}

10 |
11 |
12 | {/* close icon */} 13 |
14 |
15 | ) 16 | } 17 | 18 | export default InfoBar 19 | -------------------------------------------------------------------------------- /pages/components/Input/Input.module.scss: -------------------------------------------------------------------------------- 1 | .form { 2 | display: flex; 3 | padding: 2%; 4 | 5 | } 6 | 7 | .input { 8 | color: black; 9 | border: none; 10 | border-radius: 20px; 11 | padding: 5%; 12 | width: 70%; 13 | font-size: 1.2em; 14 | margin-right: 2%; 15 | 16 | &:focus, textarea:focus, select:focus{ 17 | outline: none; 18 | } 19 | } 20 | 21 | 22 | 23 | .sendButton { 24 | color: #fff !important; 25 | text-transform: uppercase; 26 | text-decoration: none; 27 | background: #2979FF; 28 | padding: 20px; 29 | display: inline-block; 30 | border: none; 31 | border-radius: 20px; 32 | width: 28%; 33 | 34 | &:focus, textarea:focus, select:focus{ 35 | outline: none; 36 | } 37 | } -------------------------------------------------------------------------------- /pages/components/Input/Input.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './Input.module.scss' 3 | 4 | function Input({ message, setMessage, sendMessage }) { 5 | return ( 6 | <> 7 |
8 | setMessage(value)} 14 | onKeyPress={event => event.key === 'Enter' ? sendMessage(event) : null} 15 | /> 16 | 17 |
18 | 19 | ) 20 | } 21 | 22 | export default Input 23 | -------------------------------------------------------------------------------- /pages/components/Join/Join.module.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | .joinOuterContainer { 4 | display: flex; 5 | justify-content: center; 6 | text-align: center; 7 | height: 100%; 8 | width: 100%; 9 | align-items: center; 10 | } 11 | 12 | .joinInnerContainer { 13 | width: 80%; 14 | 15 | } 16 | 17 | .joinInput { 18 | color: black; 19 | 20 | font-size: 1.1rem; 21 | border-radius: 0; 22 | padding: 15px 20px; 23 | width: 100%; 24 | } 25 | 26 | .heading { 27 | color: white; 28 | font-size: 2.5em; 29 | font-weight: 700; 30 | padding-bottom: 10px; 31 | 32 | } 33 | 34 | .button { 35 | color: #fff; 36 | font-size: 18px; 37 | font-weight: 700; 38 | text-transform: uppercase; 39 | text-decoration: none; 40 | background: #2979FF; 41 | padding: 15px; 42 | border-radius: 5px; 43 | display: inline-block; 44 | border: none; 45 | width: 100%; 46 | &:focus { 47 | outline: 0; 48 | } 49 | } 50 | 51 | .mt20 { 52 | margin-top: 20px; 53 | } 54 | 55 | 56 | -------------------------------------------------------------------------------- /pages/components/Join/Join.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import styles from './Join.module.scss'; 3 | import Chat from '../Chat/Chat'; 4 | 5 | function Join() { 6 | 7 | const [name, setName] = useState(''); 8 | const [room, setRoom] = useState(''); 9 | 10 | const [login, setLogin] = useState(true); 11 | 12 | 13 | 14 | 15 | function handleClick(e) { 16 | 17 | if (!name || !room) { console.log("Both fields are important!") } 18 | else { 19 | setLogin(!login); 20 | } 21 | 22 | 23 | 24 | 25 | 26 | 27 | } 28 | 29 | return ( 30 | <> 31 | {(login) ?
32 |
33 |

ROOM

34 |
35 | setName(event.target.value)} /> 36 |
37 |
38 | setRoom(event.target.value)} /> 39 |
40 | 41 | 47 | {/* 48 | 49 | 50 | */} 51 |
52 |
:
53 | 54 | 55 | 56 | 57 |
} 63 | 64 | 65 | ); 66 | } 67 | 68 | export default Join; 69 | -------------------------------------------------------------------------------- /pages/components/Messages/Message/Message.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactEmoji from 'react-emoji'; 3 | import styles from './Message.module.scss' 4 | 5 | function Message({ message, name }) { 6 | 7 | if (!message) { 8 | return null 9 | } 10 | 11 | const { text, user } = message; 12 | let isSentByCurrentUser = false; 13 | console.log(text, name, user); 14 | 15 | const trimmedName = name.trim().toLowerCase(); 16 | if (user === trimmedName) { 17 | isSentByCurrentUser = true; 18 | } 19 | 20 | return ( 21 | isSentByCurrentUser 22 | ? ( 23 |
24 |

{trimmedName}

25 |
26 |

{ReactEmoji.emojify(text)}

27 |
28 |
29 | ) 30 | : ( 31 |
32 |
33 |

{ReactEmoji.emojify(text)}

34 |
35 |

{user}

36 |
37 | ) 38 | ); 39 | } 40 | 41 | 42 | export default Message 43 | -------------------------------------------------------------------------------- /pages/components/Messages/Message/Message.module.scss: -------------------------------------------------------------------------------- 1 | 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 3 | .messageBox { 4 | background: #F3F3F3; 5 | border-radius: 30px; 6 | padding: 15px 15px 0px 15px; 7 | color: white; 8 | display: inline-block; 9 | max-width: 80%; 10 | 11 | } 12 | 13 | .messageText { 14 | font-family: 'Poppins', sans-serif; 15 | width: 100%; 16 | letter-spacing: 0px; 17 | float: left; 18 | font-size: 1rem; 19 | font-weight:400; 20 | 21 | } 22 | 23 | .messageText img { 24 | vertical-align: middle; 25 | } 26 | 27 | .messageContainer { 28 | display: flex; 29 | justify-content: flex-end; 30 | padding: 0 5%; 31 | margin-top: 3px; 32 | } 33 | 34 | .sentText { 35 | padding-top: 15px; 36 | display: flex; 37 | align-items: center; 38 | font-family: Helvetica; 39 | color: #949494; 40 | letter-spacing: 0.8px; 41 | font-weight: 600; 42 | } 43 | 44 | .pl10 { 45 | padding-left: 10px; 46 | } 47 | 48 | .pr10 { 49 | padding-right: 10px; 50 | } 51 | 52 | .justifyStart { 53 | justify-content: flex-start; 54 | } 55 | 56 | .justifyEnd { 57 | justify-content: flex-end; 58 | } 59 | 60 | .colorWhite { 61 | color: white; 62 | } 63 | 64 | .colorDark { 65 | color: #353535; 66 | } 67 | 68 | .backgroundBlue { 69 | background: #2979FF; 70 | border-radius: 30px; 71 | } 72 | 73 | .backgroundLight { 74 | background: #F3F3F3; 75 | } 76 | -------------------------------------------------------------------------------- /pages/components/Messages/Messages.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Message from './Message/Message'; 3 | import ScrollToBottom from 'react-scroll-to-bottom'; 4 | import styles from './Messages.module.scss'; 5 | 6 | function Messages({ messages, name }) { 7 | return ( 8 | 9 | {messages 10 | ? messages.map((message, i) => 11 | message && ( 12 |
13 | 14 |
15 | ) 16 | ) 17 | : null} 18 | 19 | ) 20 | } 21 | 22 | export default Messages 23 | -------------------------------------------------------------------------------- /pages/components/Messages/Messages.module.scss: -------------------------------------------------------------------------------- 1 | .messages { 2 | padding: 5% 0; 3 | overflow: auto; 4 | flex: auto; 5 | } -------------------------------------------------------------------------------- /pages/components/Navbar/Nav.module.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | .navContainer{ 6 | background-color: rgb(0, 0, 0) !important; 7 | background-image: url("https://www.transparenttextures.com/patterns/inspiration-geometry.png"); 8 | color: aliceblue; 9 | display: flex; 10 | padding: 0 2% 0 1%; 11 | justify-content: center; 12 | transition: 1.5sec ease-in-out; 13 | 14 | 15 | 16 | .content{ 17 | width: 90%; 18 | height: 10vh; 19 | display: flex; 20 | flex-direction: row; 21 | justify-content: space-between; 22 | align-items: center; 23 | 24 | img{ 25 | width: 180px; 26 | height: 60px; 27 | } 28 | 29 | 30 | }} 31 | 32 | 33 | .Nav { 34 | text-align: center; 35 | position: relative; 36 | 37 | ul { 38 | list-style-type: none; 39 | margin-left: -40px; 40 | 41 | li { 42 | display: inline-block; 43 | 44 | a { 45 | color: #e0e0e0; 46 | text-decoration: none; 47 | 48 | &:hover { 49 | color: #00fff7f1; 50 | } 51 | } 52 | 53 | 54 | a { 55 | transition: all 0.3s ease; 56 | display: block; 57 | font-size: 18px; 58 | font-weight: 600; 59 | text-align: center; 60 | padding: 15px 15px 0 15px; 61 | 62 | // &:hover { 63 | // transform: rotate(5deg) scale(1.1); 64 | // } 65 | 66 | 67 | 68 | } 69 | } 70 | } 71 | } 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /pages/components/Navbar/Navbar.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './Nav.module.scss'; 3 | 4 | function Navbar() { 5 | return ( 6 | 7 |
8 |
9 |
10 | 11 |
12 |
13 | 20 |
21 | 22 |
23 |
24 | ) 25 | } 26 | 27 | export default Navbar; 28 | -------------------------------------------------------------------------------- /pages/components/Notes/NoteComp/CreateArea.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import AddIcon from "@material-ui/icons/Add"; 3 | import Fab from "@material-ui/core/Fab"; 4 | import Zoom from "@material-ui/core/Zoom"; 5 | import styles from '../Notes.module.scss'; 6 | 7 | 8 | 9 | function CreateArea(props) { 10 | const [isExpanded, setExpanded] = useState(false); 11 | 12 | const [note, setNote] = useState({ 13 | title: "", 14 | content: "" 15 | }); 16 | 17 | function handleChange(event) { 18 | const { name, value } = event.target; 19 | 20 | setNote(prevNote => { 21 | return { 22 | ...prevNote, 23 | [name]: value 24 | }; 25 | }); 26 | } 27 | 28 | function submitNote(event) { 29 | props.onAdd(note); 30 | setNote({ 31 | title: "", 32 | content: "" 33 | }); 34 | event.preventDefault(); 35 | } 36 | 37 | function expand() { 38 | setExpanded(true); 39 | } 40 | 41 | return ( 42 |
43 |
44 | {isExpanded && ( 45 | 51 | )} 52 | 53 |