Quote (#24)

* quote added

* quote file added differently

* path changed

* css file deleted along with 2nd quote.tsx

* format adjusted

Author: UmeshPaliyaal

src/App.tsx

@@ -1,25 +1,26 @@
-
-
-import { BrowserRouter, Route, Routes } from 'react-router-dom'
-import LandingPage from './Pages/LandingPage'
-import NotFound from './NotFound'
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import LandingPage from "./Pages/LandingPage";
+import NotFound from "./NotFound";
 
 function App() {
- 
-
   return (
     <>
-    <BrowserRouter>
-    <Routes>
-      <Route path="*" element={<NotFound />} />
-      <Route path='LibraryManagement' element={<LandingPage/>}/>
-      <Route path='LibraryManagement/management/login' element={<LandingPage/>}/>
-      <Route path='LibraryManagement/user/login' element={<LandingPage/>}/>
-     
-     </Routes>
-     </BrowserRouter>
+      <BrowserRouter>
+        <Routes>
+          <Route path="*" element={<NotFound />} />
+          <Route path="LibraryManagement" element={<LandingPage />} />
+          <Route
+            path="LibraryManagement/management/login"
+            element={<LandingPage />}
+          />
+          <Route
+            path="LibraryManagement/user/login"
+            element={<LandingPage />}
+          />
+        </Routes>
+      </BrowserRouter>
     </>
-  )
+  );
 }
 
-export default App
+export default App;

src/Pages/LandingPage.tsx

@@ -1,17 +1,23 @@
-import { Button } from "@/components/ui/button"
-import { Link } from "react-router-dom"
+import { Button } from "@/components/ui/button";
+import { Link } from "react-router-dom";
 
 const LandingPage = () => {
   return (
     <div className="h-[100vh] flex flex-col justify-center items-center">
-        <h1 className="text-[128px] font-medium-">LibraryHub</h1>
-        <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> 
-        </div>
+      <h1 className="text-[128px] font-medium-">LibraryHub</h1>
+      <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={"management/login"}>
+          <Button>Join A Library</Button>
+        </Link>
+      </div>
     </div>
-  )
-}
+  );
+};
 
-export default LandingPage
+export default LandingPage;

src/mycomponents/Quote.tsx

@@ -0,0 +1,54 @@
+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;