Quote

src/App.tsx

@@ -3,6 +3,7 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import LandingPage from './Pages/LandingPage'
 import NotFound from './NotFound'
+import Quote from './mycomponents/Quote'
 
 function App() {
 
@@ -15,6 +16,8 @@
       <Route path='LibraryManagement' element={<LandingPage/>}/>
       <Route path='LibraryManagement/management/login' element={<LandingPage/>}/>
       <Route path='LibraryManagement/user/login' element={<LandingPage/>}/>
+
+
 
      </Routes>
      </BrowserRouter>

src/Pages/LandingPage.tsx

@@ -8,7 +8,7 @@ const LandingPage = () => {
         <p className="text-[36px] font-medium">Your central place for all library needs</p>
         <div className="flex gap-[20px] mt-[50px]">
       <Link to={'management/login'}><Button variant="outline">Create A Library</Button></Link>  
-       <Link to={'user/login'}><Button >Join A Library</Button></Link> 
+       <Link to={'management/login'}><Button >Join A Library</Button></Link> 
         </div>
     </div>
   )

src/components/ui/Quote.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { useState , useEffect } from 'react';
+
+function Quote() {
+
+    const [Quote , setQuote] = useState("");
+const [Author, setAuthor] = useState("");
+
+const api_url:string = "https://api.quotable.io/random";
+useEffect(()=>{
+async function getQuote(url:string){
+const response = await fetch(url);
+var data = await response.json();
+setQuote(data.content)
+setAuthor(data.author)
+}
+getQuote(api_url)
+}, []);
+
+
+  return (
+    <div>
+        <h1 id='line1'>Quote of the day</h1>
+    <h1 id='line2'>{`"${Quote}"`}</h1>
+    <p id='line3'>{`author- "${Author}"`}</p>
+    </div>
+  )
+}
+
+export default Quote

src/mycomponents/Quote.css

@@ -0,0 +1,4 @@
+.overlay{
+    display: flex;
+    flex-direction: column;
+}

src/mycomponents/Quote.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { useState,useEffect } from 'react';
+import { twMerge } from 'tailwind-merge';
+function Quote() {
+    const [Quote , setQuote] = useState("");
+    const [Author, setAuthor] = useState("");
+
+const api_url:string = "https://api.quotable.io/random";
+useEffect(()=>{
+async function getQuote(url:string){
+const response = await fetch(url);
+var data = await response.json();
+setQuote(data.content)
+setAuthor(data.author)
+
+localStorage.setItem('quote', data.content);
+localStorage.setItem('author' , data.author);
+localStorage.setItem('timestamp', new Date().toString());
+}
+
+const storedQuote = localStorage.getItem('quote');
+const storedAuthor = localStorage.getItem('author');
+const storedTimeStamp = localStorage.getItem('timestamp');
+
+if(storedQuote && storedAuthor && storedTimeStamp){
+    const currentTime = new Date();
+    const quoteTime = new Date(storedTimeStamp);
+    const hoursDifference = Math.abs(currentTime.getTime()-quoteTime.getTime())/36e5;
+
+
+    if (hoursDifference <24){
+        setAuthor(storedAuthor);
+        setQuote(storedQuote);
+        return;
+    }
+}
+
+
+getQuote(api_url)
+}, []);
+  return (
+<div className={twMerge('flex-col bg-zinc-800 text-white w-1/2 h-full')}>
+<h1 className={twMerge('text-6xl font-medium text-left my-16 ml-28')}>Quote of the day</h1>
+<h1 className={twMerge('w-96 font-medium text-3xl ml-40 ')} >{`"${Quote}"`}</h1>
+<p className={twMerge(' font-medium text-2xl ml-96 my-16')}>{`author- "${Author}"`}</p>
+</div>  )
+}
+
+export default Quote