UI and UX update

Author: imrany

src/App.css

@@ -2,9 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
-.App {
-  text-align: center;
-}
+ *{
+    margin:0;
+    padding:0;
+ }
 
 .App-logo {
   height: 40vmin;
@@ -17,20 +18,6 @@
   }
 }
 
-.App-header {
-  background-color: #252525;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
 
 @keyframes App-logo-spin {
   from {

src/App.tsx

@@ -7,7 +7,7 @@ import SearchPage from "./pages/SearchPage.tsx";
 import { GlobalContext } from "./context";
 
 export default function App(){
-    const API_URL=`http://127.0.0.1:5000`
+    const API_URL=`https://gemmie.onrender.com`
     const [isSupported,setIsSupported]=useState(true)
     const [videoConstraints, setVideoConstraints]=useState<any>({
         width: screen.width-400,

src/pages/MainPage.tsx

@@ -81,12 +81,12 @@ export default function MainPage() {
   return (
         <>
             {isLoading&&isLoading?(
-                <div style={{display:"flex",justifyContent:"center", background:"#252525", alignItems:"center", height:"100vh"}}>
+                <div style={{display:"flex",justifyContent:"center", background:"#14161a", alignItems:"center", height:"100vh"}}>
                     <p style={{fontSize:14, color:"white", textAlign:"center"}}>Loading, please wait...</p>
                 </div>
             ):(
-                <div className="App h-screen">
-                    <header className="App-header">
+                <div className="text-center h-screen">
+                    <header className="h-screen flex flex-col items-center justify-center text-white bg-[#14161a]">
                         <Webcam
                             ref={webcamRef}
                             audio={false} 

src/pages/NotSupported.tsx

@@ -1,7 +1,7 @@
 
 export default function NotSupported(){
     return(
-        <div style={{display:"flex",justifyContent:"center", background:"#252525", alignItems:"center", height:"100vh"}}>
+        <div style={{display:"flex",justifyContent:"center", background:"#14161a", alignItems:"center", height:"100vh"}}>
             <p style={{fontSize:14, color:"white", textAlign:"center"}}>Warning, open this website on your mobile phone...</p>
         </div>
     )

src/pages/SearchPage.tsx

@@ -1,8 +1,83 @@
+import { Link } from "react-router-dom";
+import { useContext, useEffect, useState } from "react"
+import { FaChevronLeft } from "react-icons/fa";
+import { FiMoreHorizontal } from "react-icons/fi";
+import { GlobalContext } from "../context";
+import { FaAngellist } from "react-icons/fa6";
+import { HiMiniSpeakerWave } from "react-icons/hi2";
 
 export default function SearchPage(){
+    const { videoConstraints, API_URL }=useContext(GlobalContext);
+    const [results,setResults]=useState<any>(<></>)
+    const [error,setError]=useState("")
+    const [isLoading,setIsLoading]=useState(true)
+    let capture:any=localStorage.getItem("capture")
+    let query:any=localStorage.getItem("query")
+
+    async function getResults(){
+        try{
+            let url=`${API_URL}/api/prompt`
+
+            const response = await fetch(url, {
+                method: 'POST',
+                body: JSON.stringify({ prompt: `What is a ${query}` }),
+                headers: {
+                    'content-type': 'application/json',
+                },
+            });
+
+            const parseRes = await response.json();
+            if (parseRes.error) {
+                setError(parseRes.error);
+                setIsLoading(false)
+            } else {
+                let text=parseRes.text.replace(/<[^>]+>/g, '')
+                setResults(text)
+                setIsLoading(false)
+            }
+        }catch(error:any){
+            setError(error.message)
+            setIsLoading(false)
+        }
+    }
+
+    useEffect(()=>{
+        getResults()
+    },[])
     return(
         <>
-            <p>Search page</p>
+            {isLoading&&isLoading?(
+                <div style={{display:"flex",justifyContent:"center", background:"#14161a", alignItems:"center", height:"100vh"}}>
+                    <p style={{fontSize:14, color:"white", textAlign:"center"}}>Searching, please wait...</p>
+                </div>
+            ):(
+                <div className="flex flex-col text-white bg-[#14161a] min-h-screen">
+                    <div className="fixed h-[0px] z-10 top-0 left-0 right-0">
+                        <div className="flex bg-none text-white items-center justify-between m-[20px]">
+                            <Link to="/">
+                                <FaChevronLeft className="w-[22px] h-[20px]"/>
+                            </Link>
+                            <p>Search</p>
+                            <button>
+                                <FiMoreHorizontal className="w-[22px] h-[22px]"/>
+                            </button>
+                        </div>
+                    </div>
+                    <div className="bg-[#2a2d33] rounded-b-[20px]">
+                        <img src={capture} width={videoConstraints.width} height={480} className="h-[380px] object-cover rounded-b-[20px]"/>
+                        <div className="flex items-center m-[15px] justify-between">
+                            <div className="flex gap-2">
+                                <FaAngellist className="w-[22px] h-[22px]"/>
+                                <p className="capitalize">{query}</p>
+                            </div>
+                            <HiMiniSpeakerWave className="w-[22px] h-[22px] ml-auto"/>
+                        </div>
+                    </div>
+                    <div className="flex flex-col m-[20px] text-sm">
+                        {results?results:(<p className="text-center">{error}</p>)}
+                    </div>
+                </div>
+            )}
         </>
     )
 }