created current greeting based on time added greetingcard component i…

…n home component updated showing username

nepalingo-web/src/App.tsx

@@ -10,12 +10,6 @@ import Home from "./pages/Home/Home";
 import FlashcardPage from "./pages/FlashcardPage"
 import { useAuth } from "./components/userAuth/AuthContext";
 import ReactGA from "react-ga4";
-import GreetingCard from './components/GreetingCard';
-//const App: React.FC<{}>; {  
-// const TrackingID = import.meta.env.VITE_GOOGLE_ANALYTICS_TRACKING_ID;
-// ReactGA.initialize(TrackingID);
-//const { user } = useAuth();
-
 
 const TrackingID = import.meta.env.VITE_GOOGLE_ANALYTICS_TRACKING_ID;
 ReactGA.initialize(TrackingID);
@@ -24,9 +18,7 @@ const { user } = useAuth();
 const App: React.FC = () => {
   return (
     <><div>
-      <GreetingCard message="Good Morning" name="Puja" />
-      <GreetingCard message="Good Afternoon" name="Puja" />
-      <GreetingCard message="Good Evening" name="puja" />
+      <Home />
     </div><Router>
         <Routes>
           <Route path="/login" element={<User_auth />} />

nepalingo-web/src/components/GreetingCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 interface GreetingCardProps {
-  message: string;
+
   name: string;
 }
 
@@ -21,10 +21,21 @@ const headingStyle: React.CSSProperties = {
   color: '#333',
 };
 
-const GreetingCard: React.FC<GreetingCardProps> = ({ message, name }) => {
+const GreetingCard: React.FC<GreetingCardProps> = ({ name }) => {
+  const getCurrentGreeting = (): string => {
+    const CurrentHours = new Date().getHours();
+    if (CurrentHours < 12) {
+      return 'Good Morning';
+    }
+    else if (CurrentHours < 18) {
+      return 'Good Afternoon';
+    } else {
+      return 'Good Evening';
+    }
+  }
   return (
     <div style={cardStyle}>
-      <h1 style={headingStyle}>{message} {name}</h1>
+      <h1 style={headingStyle}>{`${getCurrentGreeting()}, ${name}!`}  {name}</h1>
 
     </div>
   );

nepalingo-web/src/pages/Home/Home.tsx

@@ -3,18 +3,28 @@ import { Link } from "react-router-dom";
 import logo from "../../assets/logo.png";
 import ReactGA from 'react-ga4';
 import { useAuth } from "../../components/userAuth/AuthContext";
+import GreetingCard from "../../components/GreetingCard";
 
 const Home: React.FC = () => {
-  ReactGA.send({ hitType: "pageview", page: window.location.pathname, title: "home"});
+  ReactGA.send({ hitType: "pageview", page: window.location.pathname, title: "home" });
   const { user } = useAuth();
 
+  const userName = 'user';
+
+
+
   return (
     <div className="flex flex-col items-center justify-between h-screen bg-gradient-to-r from-black via-gray-800 to-black text-white p-10">
       <div className="mt-10">
         <h1 className="text-5xl font-bold text-center">
           Hello {user?.user_metadata?.username}, welcome to Nepalingo!
         </h1>
       </div>
+
+      <div>
+        <GreetingCard name={userName} />
+      </div>
+
       <div className="flex flex-col items-center">
         <div className="w-40 h-40 border-2 border-white rounded-full flex items-center justify-center">
           <img