search resultss

src/Components/DesktopSidebar.jsx

@@ -14,13 +14,15 @@ import Cookies from "js-cookie"
 import { config, signedIn } from '../main.jsx'
 import { useNavigate } from 'react-router'
 
-function search(minimized) {
+function search(minimized, navigate) {
+
     if (minimized) {
-        // goto search page
+        navigate("/search");
         return;
     }
 
     // goto search page with search query
+    navigate("/search"); // todo make it take the search query
 }
 
 function HajeeberButton(props) {
@@ -93,7 +95,7 @@ function DesktopSidebar(props) {
 
             <ul className="middle">
                 <div className="searchContainer" style={{ width: minimized ? "100px" : "250px" }}>
-                    <button className="searchButton" onClick={() => {search(minimized)}}>
+                    <button className="searchButton" onClick={() => {search(minimized, navigate)}}>
                         <Search size={size} />
                     </button>
                     {!minimized && <input type="text" placeholder="Search" className="searchBar" />}

src/Components/SearchResult.jsx

@@ -0,0 +1,48 @@
+import '../css/SearchResult.css'
+import { config } from "../main";
+
+import Heart from '../icons/Heart';
+import Deodorant from '../icons/Deodorant';
+import Contact from '../icons/Contact';
+import ArrowRight from '../icons/ArrowRight';
+
+function SearchResult(props) {
+	const { id,
+		title,
+		author,
+		likes,
+		dislikes,
+		comments,
+		shares,
+	} = props;
+
+	return (
+		<div className="search-result">
+			<img src={`${config.serverURL}/video/${id}/thumbnail`} className="search-result-thumbnail" />
+			<div className="search-result-details">
+				<h1>{title}</h1>
+				<p>{author}</p>
+				<div className="search-result-interactions">
+					<span className="search-result-interaction">
+						<Heart size={30} />
+						<span className="search-result-interaction-count">{likes}</span>
+					</span>
+					<span className="search-result-interaction">
+						<Deodorant size={30} />
+						<span className="search-result-interaction-count">{dislikes}</span>
+					</span>
+					<span className="search-result-interaction">
+						<Contact size={30} />
+						<span className="search-result-interaction-count">{comments}</span>
+					</span>
+					<span className="search-result-interaction">
+						<ArrowRight size={30} />
+						<span className="search-result-interaction-count">{shares}</span>
+					</span>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default SearchResult

src/Search.jsx

@@ -2,14 +2,39 @@ import './css/Search.css'
 import Sidebar from './Components/Sidebar'
 import { default as axios } from 'axios'
 import Cookies from 'js-cookie'
+import SearchResult from './Components/SearchResult'
 
 function Search() {
 	return (
 		<>
-			<div>
+			<div class="main">
 				<Sidebar />
-				<div className="profile-container">
+				<div className="search-container">
+					<div className="search-bar">
+						<input type="text" placeholder="serach"></input>
+					</div>
 
+					<div className="search-results">
+						<SearchResult 
+							id={1}
+							title="niagar"
+							author="john.clapper"
+							likes="1.2l"
+							dislikes="1"
+							comments="1.2m"
+							shares="1.2kg"
+						/>
+
+						<SearchResult
+							id={1}
+							title="niagar"
+							author="john.clapper"
+							likes="1.2l"
+							dislikes="1"
+							comments="1.2m"
+							shares="1.2kg"
+						/>
+					</div>
 				</div>
 			</div>
 		</>

src/css/DesktopSidebar.css

@@ -3,8 +3,8 @@
     margin: 0;
     padding: 0;
 
-    background-color: #303030;
-    color: white;
+    background-color: var(--secondary-background-color);
+    color: var(--text-color);
 
     display: flex;
     flex-direction: column;
@@ -27,7 +27,7 @@ li {
 
     padding: 10px 10px;
     background: none;
-    color: rgb(255, 0, 149);
+    color: var(--accent-color);
     font-family: "Pinyon Script", cursive;
     font-size: 30px;
 
@@ -81,7 +81,7 @@ li {
     justify-content: center;
     gap: 10px;
 
-    background-color: white;
+    background-color: var(--text-color);
     border-radius: 10px;
 }
 
@@ -89,9 +89,9 @@ li {
     padding: 6px;
     font-size: 20px;
     width: 150px;
-    background-color: white;
+    background-color: var(--text-color);
     border: none;
-    color: black;
+    color: var(--inverted-text-color);
     font-family: "Knewave", system-ui;
 }
 

src/css/Login.css

@@ -11,7 +11,7 @@
 }
 
 .login {
-	background-color: #363636;
+	background-color: var(--secondary-background-color);
 	color: white;
 
 	padding: 10px;
@@ -28,7 +28,7 @@ input {
 	font-family: "Knewave", system-ui;
 	font-size: 30px;
 
-	border: 2px solid rgb(255, 0, 234);
+	border: 2px solid var(--accent-color);
 	border-radius: 5px;
 }
 

src/css/MobileSidebar.css

@@ -27,8 +27,8 @@ li {
 	padding: 0;
 	justify-content: space-between;
 
-	background-color: #303030;
-	color: white;
+	background-color: var(--secondary-background-color);
+	color: var(--text-color);
 
 	display: flex;
 	flex-direction: row;
@@ -47,12 +47,12 @@ li {
 
 	padding: 10px 10px;
 	background: none;
-	color: rgb(255, 0, 149);
+	color: var(--accent-color);
 	font-family: "Knewave", cursive;
 	font-size: 20px;
 }
 
-.sidebar li button:hover {
-	color: black;
+.mobile-sidebar li button:hover {
+	color: var(--inverted-text-color);
 	cursor: pointer;
 }

src/css/Player.css

@@ -64,7 +64,7 @@
     border-radius: 15px;
 
     text-shadow: #000 1px 0 10px;
-    color: #ffffff;
+    color: var(--text-color);
 
     position: absolute;
     z-index: 2;

src/css/Search.css

@@ -0,0 +1,30 @@
+.main {
+	width: 100vw;
+	height: 100vh;
+	margin: 0;
+	display: flex;
+	flex-direction: row;
+}
+
+.search-results {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.search-container {
+	/* I have to do % instead of vw and vh for the proper sizing with the sidebar !! !! !! */
+	width: 100%;
+	height: 100%; 
+	margin: 0;
+
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	padding: 20px;
+
+	justify-content: space-evenly;
+	align-items: center;
+}

src/css/SearchResult.css

@@ -0,0 +1,76 @@
+.search-result {
+	display: flex;
+	flex-direction: row;
+
+	align-items: center;
+	justify-content: center;
+
+	gap: 10px;
+}
+
+.search-result-details {
+	display: flex;
+	flex-direction: column;
+	gap: 0px;
+}
+
+.search-result-thumbnail {
+	height: 150px;
+	border-radius: 5px;
+}
+
+.search-result-thumbnail:hover {
+	cursor: pointer;
+	animation-name: interaction;
+	animation-duration: 1s;
+	animation-iteration-count: infinite;
+}
+
+.search-result-details h1 {
+	line-height: 10px;
+}
+
+.search-result-details h1:hover {
+	cursor: pointer;
+	animation-name: interaction;
+	animation-duration: 1s;
+	animation-iteration-count: infinite;
+
+	color: var(--accent-color);
+}
+
+.search-result-details p:hover {
+	cursor: pointer;
+	animation-name: interaction;
+	animation-duration: 1s;
+	animation-iteration-count: infinite;
+
+	color: var(--accent-color);
+}
+
+.search-result-interactions {
+	display: flex;
+	flex-direction: row;
+	gap: 10px;
+}
+
+.search-result-interaction {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
+
+@keyframes interaction {
+	0% {
+		transform: scale(1);
+	}
+
+	50% {
+		transform: scale(1.1);
+	}
+
+	100% {
+		transform: scale(1);
+	}
+}

src/css/index.css

@@ -13,10 +13,16 @@
 }
 
 :root {
+  --accent-color: rgb(255, 0, 234);
+  --background-color: #0e0e0e;
+  --secondary-background-color: #363636;
+  --text-color: white;
+  --inverted-text-color: black;
+
   font-family: "Knewave", 'Times New Roman', Times, serif;
   color-scheme: light dark;
-  color: rgba(255, 255, 255);
-  background-color: #0e0e0e;
+  color: var(--text-color);
+  background-color: var(--background-color);
 
   width: 100vw;
   height: 100vh;

src/main.jsx

@@ -6,6 +6,7 @@ import App from './App.jsx'
 import Login from "./Login.jsx"
 import Profile from "./Profile.jsx"
 import Cookies from "js-cookie"
+import Search from './Search.jsx';
 
 // helper shit
 export const config = {
@@ -22,6 +23,7 @@ createRoot(document.getElementById('root')).render(
       <Route path="/" element={<App />} />
       <Route path="/login" element={<Login />} />
       <Route path="/profile" element={<Profile />} />
+      <Route path="/search" element={<Search />} />
     </Routes>
   </BrowserRouter>
 )