stuff

src/App.jsx

@@ -2,13 +2,12 @@ import './css/App.css'
 import Sidebar from "./Components/Sidebar"
 import VideoFeed from './Components/VideoFeed'
 import Player from './Components/Player'
-import { useState, useEffect } from 'react'
 
 function App() {
   return (
     <div className="main">
       <Sidebar />
-      <Player className="top-video" video={2} information={{
+      <Player className="top-video" video={1} information={{
         title: "habibi habibi",
         description: "my name is john clapper. i clap everyone. i clap first at the cinema. no one else claps.",
         likes: "1.2M",

src/Components/DesktopSidebar.jsx

@@ -7,7 +7,7 @@ import Compass from "../icons/Compass.jsx"
 import Grandpa from "../icons/Grandpa.jsx"
 import Person from "../icons/Person.jsx"
 import Phone from "../icons/Phone.jsx"
-import Search from "../icons/Search.jsx"
+import Search from "../icons/SearchIcon.jsx"
 import Wrong2 from "../icons/Wrong2.jsx"
 
 import Cookies from "js-cookie"

src/Components/MobileSidebar.jsx

@@ -2,7 +2,7 @@ import '../css/MobileSidebar.css'
 
 import Home from "../icons/Home.jsx"
 import Person from "../icons/Person.jsx"
-import Search from "../icons/Search.jsx"
+import Search from "../icons/SearchIcon.jsx"
 
 import Cookies from "js-cookie"
 import { config, signedIn } from "../main.jsx"

src/Components/SearchResult.jsx → src/Components/VideoSearchResult.jsx

@@ -6,7 +6,7 @@ import Deodorant from '../icons/Deodorant';
 import Contact from '../icons/Contact';
 import ArrowRight from '../icons/ArrowRight';
 
-function SearchResult(props) {
+function VideoSearchResult(props) {
 	const { id,
 		title,
 		author,
@@ -21,7 +21,10 @@ function SearchResult(props) {
 			<img src={`${config.serverURL}/video/${id}/thumbnail`} className="search-result-thumbnail" />
 			<div className="search-result-details">
 				<h1>{title}</h1>
-				<p>{author}</p>
+				<span className="search-result-author">
+					<img src={`${config.serverURL}/account/${id}/picture`} className="search-result-author-image"></img>
+					<p>{author}</p>
+				</span>
 				<div className="search-result-interactions">
 					<span className="search-result-interaction">
 						<Heart size={30} />
@@ -45,4 +48,4 @@ function SearchResult(props) {
 	)
 }
 
-export default SearchResult
+export default VideoSearchResult

src/Profile.jsx

@@ -1,19 +1,44 @@
 import './css/Profile.css'
 import Sidebar from './Components/Sidebar'
 import { default as axios } from 'axios'
+import { config } from './main'
 
-function Login() {
+function Profile(props) {
+	const {
+		id, username, verified, bio, followers, following, videos
+	} = props;
 
 	return (
 		<>
 			<div>
 				<Sidebar  />
 				<div className="profile-container">
+					<div className="profile-details">
+						<img src={`${config.serverURL}/account/${id}/picture`} className="profile-picture"></img>
 
+						<span class="profile-detail">
+							{followers}
+							followers
+						</span>
+
+						<span class="profile-detail">
+							{following}
+							following
+						</span>
+
+						<span class="profile-detail">
+							{videos.length}
+							videos
+						</span>
+					</div>
+					
+					<div className="profile-videos">
+						
+					</div>
 				</div>
 			</div>
 		</>
 	)
 }
 
-export default Login
+export default Profile

src/Search.jsx

@@ -2,38 +2,74 @@ 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'
+import SearchIcon from './icons/SearchIcon'
+import VideoSearchResult from './Components/VideoSearchResult'
+import { config } from './main'
+import React, { useRef } from 'react'
+import { createRoot } from 'react-dom/client';
+
+let searchResults;
+let searched;
+let searchResultsRef;
+let searchStatusRef;
+
+async function search2() {
+	const searchBar = document.getElementById("search-bar");
+	if(searchBar.value.trim() != "") {
+		if(!searched) searchResults = createRoot(searchResultsRef.current);
+		if(searched) { searchResults.unmount(); searchResults = createRoot(searchResultsRef.current); }
+		searched = true;
+
+		searchStatusRef.current.innerText = "searching!!";
+		const response = await axios.post(`${config.serverURL}/video/search`, {
+			"query": searchBar.value
+		})
+
+		if(!response.error) {
+			if(response.data.length === 0) {
+				return searchStatusRef.current.innerText = "no results :(";
+			}
+
+			response.data.forEach(video => {
+				console.log(video)
+				searchResults.render(<VideoSearchResult 
+					id={video.id}
+					title={video.title}
+					author={video.author.username}
+					likes={video.likes}
+					dislikes={video.dislikes}
+					comments={video.comments}
+					shares={video.shares}
+				/>)
+			})
+		} else {
+			searchStatusRef.current.innerText = `search error: ${response.error}`;
+		}
+	} else {
+		searchStatusRef.current.innerText = `no`;
+	}
+}
 
 function Search() {
+	searchResultsRef = useRef(null);
+	searchStatusRef = useRef(null);
+
 	return (
 		<>
-			<div class="main">
+			<div className="main">
 				<Sidebar />
 				<div className="search-container">
-					<div className="search-bar">
-						<input type="text" placeholder="serach"></input>
+					<div className="search-bar-container">
+						<button className="search-button" onClick={() => {search2(searchResults)}}>
+							<SearchIcon size={50} />
+						</button>
+						<input type="text" placeholder="Search" className="search-bar" id="search-bar" />
 					</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 className="search-results" id="search-results" ref={searchResultsRef}>
+						<div className="search-status" ref={searchStatusRef}>
+							
+						</div>
 					</div>
 				</div>
 			</div>

src/css/Profile.css

@@ -0,0 +1,21 @@
+.profile-container {
+	width: 100%;
+	height: 100%;
+	margin: 0;
+
+	display: flex;
+	flex-direction: column;
+}
+
+.profile-details {
+	background-color: var(--accent-color);
+	display: flex;
+	flex-direction: column;
+
+	justify-content: space-between;
+}
+
+.profile-detail {
+	display: flex;
+	flex-direction: column;
+}

src/css/Search.css

@@ -27,4 +27,62 @@
 
 	justify-content: space-evenly;
 	align-items: center;
+}
+
+.search-bar-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 10px;
+
+	background-color: var(--text-color);
+	border-radius: 10px;
+
+	width: calc(100% - 200px);
+}
+
+.search-bar {
+	padding: 6px;
+	font-size: 20px;
+	width: 150px;
+	background-color: var(--text-color);
+	border: none;
+	color: var(--inverted-text-color);
+	font-family: "Knewave", system-ui;
+	width: calc(100% - 100px);
+}
+
+.search-bar:focus {
+	outline: none;
+}
+
+.search-button {
+	background-color: transparent;
+	border: none;
+}
+
+.search-button:hover {
+	cursor: pointer;
+	animation-name: interaction;
+	animation-duration: 1s;
+	animation-iteration-count: infinite;
+}
+
+.search-status {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	font-size: 70px;
+	font-family: "Pinyon Script", cursive;
+	color: var(--accent-color);
+
+	animation-name: interaction;
+	animation-duration: 0.2s;
+	animation-iteration-count: infinite;
+
+	pointer-events: none;
 }

src/css/SearchResult.css

@@ -39,7 +39,7 @@
 	color: var(--accent-color);
 }
 
-.search-result-details p:hover {
+.search-result-author:hover {
 	cursor: pointer;
 	animation-name: interaction;
 	animation-duration: 1s;
@@ -61,6 +61,21 @@
 	align-items: center;
 }
 
+.search-result-author-image {
+	width: 40px;
+	height: 40px;
+	border-radius: 100%;
+}
+
+.search-result-author {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: center;
+
+	gap: 10px;
+}
+
 @keyframes interaction {
 	0% {
 		transform: scale(1);