Multi tags support! (Beta) + Bug fix

src/App.js

@@ -17,9 +17,9 @@ function App() {
   function search(e) {
     setSearchQuery(e.target.value);
   }
-  
+  // || e.tag.toLowerCase().includes(searchQuery.toLowerCase())
   const filteredData = data.filter((e) => {
-    return (e.name.toLowerCase().includes(searchQuery.toLowerCase()) || e.title.toLowerCase().includes(searchQuery.toLowerCase()) || e.tag.toLowerCase().includes(searchQuery.toLowerCase()))
+    return (e.name.toLowerCase().includes(searchQuery.toLowerCase()) || e.title.toLowerCase().includes(searchQuery.toLowerCase()))
   });
 
   async function fetchData() {

src/componets/AddModal.js

@@ -6,7 +6,7 @@ import config from '../config.json';
 const AddModal = ({onExit, reFetch}) => {
   const [name, setName] = useState('');
   const [link, setLink] = useState('');
-  const [tag, setTag] = useState('');
+  const [tag, setTag] = useState([]);
 
   function SetName(e) {
     setName(e.target.value);
@@ -17,7 +17,8 @@ const AddModal = ({onExit, reFetch}) => {
   }
 
   function SetTag(e) {
-    setTag(e.target.value);
+    setTag([e.target.value]);
+    setTag(e.target.value.split(/(\s+)/).filter( e => e.trim().length > 0).map(e => e.toLowerCase()))
   }
 
   async function submitBookmark() {
@@ -44,7 +45,7 @@ const AddModal = ({onExit, reFetch}) => {
         body: JSON.stringify({
             _id: nanoid(),
             name: name,
-            title: null,
+            title: '',
             link: link,
             tag: tag
         }),
@@ -84,7 +85,7 @@ const AddModal = ({onExit, reFetch}) => {
           <h3>Link:</h3>
           <input onChange={SetLink} className="modal-input" type="search" placeholder="e.g. https://example.com/"/>
           <h3>Tag:</h3>
-          <input onChange={SetTag} className="modal-input" type="search" placeholder="e.g. Tutorials"/>
+          <input onChange={SetTag} className="modal-input" type="search" placeholder="e.g. Tutorials (Seperate with spaces)"/>
           <button onClick={submitBookmark} className="upload-btn">Upload &#xf093;</button>
           <button className="cancel-btn">Cancel</button>
         </div>

src/componets/List.js

@@ -34,10 +34,13 @@ const List = ({data, reFetch}) => {
                         <div className="img-content-grp">
                             <img src={favicon} />
                             <div className="list-entity-content">
-                                <div className='row-name'><span className="num">{i + 1}.</span> {e.name}</div>
+                                <div className='row-name'><span className="num">{i + 1}.</span> {e.name} <a target="_blank" href={e.link}>({url.hostname})</a></div>
                                 <div>{e.title}</div>
-                                <div><a href={e.link}>{url.hostname}</a></div>
-                                <div className="tag">{e.tag}</div>
+                                <div className="tags">
+                                    {e.tag.map((e, i) => {
+                                        return <div key={i}>{e}</div>
+                                    })}
+                                </div>
                             </div>
                         </div>
                         <div className="delete" onClick={() => deleteEntity(e._id)}>&#xf2ed;</div>

src/styles/List.css

@@ -11,10 +11,11 @@
   user-select: none;
   position: absolute;
   filter: blur(5px);
-  opacity: 60%;
+  opacity: 50%;
   margin: 20px;
   width: 100px;
   height: 100px;
+  transition: opacity 0.3s;
 }
 
 .img-content-grp {
@@ -32,26 +33,41 @@
   margin: 20px;
 }
 
+.list-row:hover img {
+  opacity: 90%;
+}
+
 .list-entity-content {
-  text-shadow: 1px 1px 2px black;
+	text-shadow: 0px 1px 3px #1f2c38;
   z-index: 0;
-  margin-left: 50px;
+  margin-left: 70px;
   padding: 20px;
   justify-content: space-between;
   display: flex;
   flex-direction: column;
+  pointer-events: none;
 }
 
 .list a {
+  white-space: nowrap;
+  font-family: 'Font Awesome 5 Free';
+  pointer-events: all;
   text-decoration: none;
   color: rgb(194, 193, 193);
   font-size: 1rem;
 }
 
-.list a:hover {
-  text-decoration: underline;
+.list a::after {
+  content: " ";
+  opacity: 0%;
+  transition: opacity 0.1s;
 }
 
+.list a:hover::after {
+  opacity: 100%;
+}
+
+
 .delete {
   color: white;
   cursor: pointer;
@@ -73,9 +89,9 @@
   font-size: 2rem;
 }
 
-.tag {
+.tags {
+  display: flex;
   margin: 10px;
-  border: solid;
   border-width: 1px;
   width: fit-content;
   padding: 10px;
@@ -83,6 +99,15 @@
   border-radius: 5px;
 }
 
+.tags div {
+  margin-right: 10px;
+  color: rgb(126, 208, 255);
+}
+
+.tags div::before {
+  content: "#";
+}
+
 .num {
   font-size: 1rem;
 }

src/styles/index.css

@@ -7,3 +7,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   background-color: #1f2c38;
 }
+
+*::selection {
+  background-color: rgba(101, 142, 255, 0.335);
+}