feat: notes taking app - base (#524)

* [Feat] Add NoteApp Layout How: with styles Why: according to the design sample * [Feat] Add Layout for NotesSidebarHeader and NotesSidebarSearch How: html/css in react Why: progressing * [Feat] Isolate SearchInputBox component Why: so we could reuse it How: Isolate SearchInputBox to different file and use in right places * [Feat] Change the Toggle Button of Sidebar Position Why: the prev position get on elements in the main container How: change some styles * [Feat] Add NotesList in SideBar What: add notes list in SideBar How: create components for list, item style , pass data Why: need to implement * [Feat] Add Search Functionality, Add Pick Note And Show Description why: to be able to search notes. to show description of notes how: react... * [Feat] Add Search Functionality, Add Pick Note And Show Description why: to be able to search notes. to show description of notes how: react...
th3cyb3rhub · Nov 30, 2023 · 6eaa444 · 6eaa444
1 parent dfcadd9
commit 6eaa444
Show file tree

Hide file tree

Showing 18 changed files with 446 additions and 222 deletions.
diff --git a/src/components/CaptureTheFlag/CTF.jsx b/src/components/CaptureTheFlag/CTF.jsx
@@ -2,18 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Wrapper } from "../Dashboard/Profile/ProfileElements";
 import { getAllCTFs } from "../../features/ctf/ctfSlice";
 import { useDispatch, useSelector } from "react-redux";
-import {
-    CTFContainer,
-    CTFHeader,
-    CTFHeading,
-    Option,
-    SearchBox,
-    SearchContainer,
-    SearchDifficulty,
-    SearchIcon,
-    SearchInput,
-    Select,
-} from "./CTFElements";
+import { CTFContainer, CTFHeader, CTFHeading, Option, SearchContainer, SearchDifficulty, Select } from "./CTFElements";
 import { getUserDetail } from "../../features/userDetail/userDetailSlice";
 // import { encodeURL } from "../Blogs/util";
 import UnderMaintenance from "../Other/UnderMaintenance/UnderMaintenance";
@@ -23,6 +12,7 @@ import CtfChallenges from "./CTFCards/CtfChallenges";
 import { RankTrophy } from "../Header/Navbar/NavbarElements";
 import { RouteLink } from "../Dashboard/Sidebar/SidebarElements";
 import LoadingSpinner from "../Other/MixComponents/Spinner/LoadingSpinner";
+import SearchInputBox from "../Common/SearchInputBox";
 
 const CTF = () => {
     const { isApiLoading, isApiWorking } = apiStatus();
@@ -83,15 +73,7 @@ const CTF = () => {
                 {/* </Link> */}
 
                 <SearchContainer>
-                    <SearchBox>
-                        <SearchIcon />
-                        <SearchInput
-                            type="text"
-                            placeholder="Search by name"
-                            value={searchTerm}
-                            onChange={handleSearchTermChange}
-                        />
-                    </SearchBox>
+                    <SearchInputBox placeholder="Search by name" value={searchTerm} onChange={handleSearchTermChange} />
                     <SearchDifficulty>
                         Type
                         <Select value={selectedType} onChange={handleTypeSelect}>

diff --git a/src/components/CaptureTheFlag/CTFElements.jsx b/src/components/CaptureTheFlag/CTFElements.jsx
@@ -1,6 +1,5 @@
 import styled from "styled-components";
 import { Link } from "react-router-dom";
-import { FcSearch } from "react-icons/fc";
 
 export const CTFContainer = styled.div`
     display: flex;
@@ -277,46 +276,3 @@ export const Option = styled.option`
         box-shadow: 0 0 0 1px #1a1c1d;
     }
 `;
-
-// SearchInput Component
-export const SearchInput = styled.input`
-    border: none;
-    background: #252525;
-    color: #d7d7d7;
-    padding: 8px;
-    font-size: 16px;
-    width: 300px;
-    border-radius: 0 4px 4px 0;
-    @media screen and (max-width: 380px) {
-        width: 100%;
-    }
-
-    @media screen and (max-width: 800px) {
-        width: 100%;
-    }
-
-    &:focus {
-        outline: none;
-        box-shadow: 0 0 0 1px #1a1c1d;
-    }
-`;
-export const SearchBox = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    gap: 10px;
-    background: #131313;
-    border-radius: 5px;
-    padding: 0 0 0 10px;
-    @media screen and (max-width: 380px) {
-        width: 100%;
-    }
-`;
-
-export const SearchIcon = styled(FcSearch)`
-    font-size: 2rem;
-    color: #d7d7d7;
-    cursor: pointer;
-    transition: 0.2s ease-in-out;
-`;
diff --git a/src/components/Common/SearchInputBox/SearchInputBox.jsx b/src/components/Common/SearchInputBox/SearchInputBox.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { SearchBox, SearchIcon, SearchInput } from "./SearchInputBoxElements";
+
+const SearchInputBox = ({ placeholder, value, onChange }) => {
+    return (
+        <SearchBox>
+            <SearchIcon />
+            <SearchInput type="text" placeholder={placeholder} value={value} onChange={onChange} />
+        </SearchBox>
+    );
+};
+
+export default SearchInputBox;
diff --git a/src/components/Common/SearchInputBox/SearchInputBoxElements.jsx b/src/components/Common/SearchInputBox/SearchInputBoxElements.jsx
@@ -0,0 +1,44 @@
+import { FcSearch } from "react-icons/fc";
+import styled from "styled-components";
+
+export const SearchInput = styled.input`
+    border: none;
+    background: #252525;
+    color: #d7d7d7;
+    padding: 8px;
+    font-size: 16px;
+    width: 300px;
+    border-radius: 0 4px 4px 0;
+    @media screen and (max-width: 380px) {
+        width: 100%;
+    }
+
+    @media screen and (max-width: 800px) {
+        width: 100%;
+    }
+
+    &:focus {
+        outline: none;
+        box-shadow: 0 0 0 1px #1a1c1d;
+    }
+`;
+export const SearchBox = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+    background: #131313;
+    border-radius: 5px;
+    padding: 0 0 0 10px;
+    @media screen and (max-width: 380px) {
+        width: 100%;
+    }
+`;
+
+export const SearchIcon = styled(FcSearch)`
+    font-size: 2rem;
+    color: #d7d7d7;
+    cursor: pointer;
+    transition: 0.2s ease-in-out;
+`;
diff --git a/src/components/Common/SearchInputBox/index.js b/src/components/Common/SearchInputBox/index.js
@@ -0,0 +1,2 @@
+import SearchInputBox from "./SearchInputBox";
+export default SearchInputBox;
diff --git a/src/components/Dashboard/Notetaker/AddNote.jsx b/src/components/Dashboard/Notetaker/AddNote.jsx
diff --git a/src/components/Dashboard/Notetaker/Note.jsx b/src/components/Dashboard/Notetaker/Note.jsx
diff --git a/src/components/Dashboard/Notetaker/NoteApp.css b/src/components/Dashboard/Notetaker/NoteApp.css
@@ -1,62 +1,7 @@
-.note {
-    background-color: #242526;
-    color: #828282;
-    border: 1px solid #828282;
-    border-radius: 8px;
-    padding: 10px;
-    margin-bottom: 20px;
-    max-height: 300px;
-    width: 300px;
-    overflow-x: none;
-    overflow-wrap: break-word;
-    word-break: break-all;
+.icon {
+    color: #646464;
 }
-
-.note textarea {
-    width: 100%;
-    height: 100%;
-    border: none;
-    background-color: #242526;
-    color: #828282;
-    font-size: 16px;
-    resize: none;
-    outline: none;
-    overflow-x: none;
-}
-
-
-.note button {
-    background-color: #828282;
-    color: #090909;
-    border: none;
-    padding: 8px 16px;
-    font-size: 16px;
-    border-radius: 4px;
-    margin-left: 30px;
-    cursor: pointer;
-}
-
-.note button:hover {
-    background-color: #090909;
-    color: #828282;
-}
-
-.note .delete-button {
-    margin-bottom: -5px;
-    margin-left: 260px;
+.icon:hover {
+    color: #818181;
     cursor: pointer;
 }
-
-.note .character-limit-error {
-    color: red
-}
-
-.container {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-}
-
-.wrapper {
-    overflow-y: hidden;
-}