From e9af22c3a7c3861339b9a24676798e2ac44b6ffc Mon Sep 17 00:00:00 2001
From: NancyAanchal <nancyjha2006@gmail.com>
Date: Sun, 21 Jul 2024 01:00:08 +0545
Subject: [PATCH] added streak display component acc to figma

---
 .../src/components/DictionarySearchBar.tsx    |  4 +--
 nepalingo-web/src/components/GreetingCard.tsx | 25 +++++-----------
 .../src/components/header/Header.tsx          |  2 +-
 .../src/components/header/StreakDisplay.tsx   | 30 +++++++++++++++++++
 .../src/components/header/StreakPhrase.tsx    |  1 -
 nepalingo-web/src/pages/Home.tsx              | 14 ++++-----
 6 files changed, 48 insertions(+), 28 deletions(-)
 create mode 100644 nepalingo-web/src/components/header/StreakDisplay.tsx

diff --git a/nepalingo-web/src/components/DictionarySearchBar.tsx b/nepalingo-web/src/components/DictionarySearchBar.tsx
index 5580fca..5a58cbf 100644
--- a/nepalingo-web/src/components/DictionarySearchBar.tsx
+++ b/nepalingo-web/src/components/DictionarySearchBar.tsx
@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import useDictionary, { DictionaryProps } from "../hooks/useDictionary";
 import InputText from "../components/InputText";
-import Button from "../components/Button"; // Assuming you have a Button component
+import Button from "../components/Button";
 
 interface DictionarySearchBarProps {
-  language: DictionaryProps["language"]; // Define language as a prop
+  language: DictionaryProps["language"];
 }
 
 const DictionarySearchBar: React.FC<DictionarySearchBarProps> = ({
diff --git a/nepalingo-web/src/components/GreetingCard.tsx b/nepalingo-web/src/components/GreetingCard.tsx
index 0688d6f..d10a958 100644
--- a/nepalingo-web/src/components/GreetingCard.tsx
+++ b/nepalingo-web/src/components/GreetingCard.tsx
@@ -5,21 +5,6 @@ interface GreetingCardProps {
   name: string;
 }
 
-const cardStyle: React.CSSProperties = {
-  border: "2px solid #000",
-  borderRadius: "15px",
-  padding: "20px",
-  margin: "10px",
-  textAlign: "center",
-  backgroundColor: "#f0f0f0",
-  fontFamily: "Arial, sans-serif",
-};
-
-const headingStyle: React.CSSProperties = {
-  fontSize: "2em",
-  color: "#333",
-};
-
 const GreetingCard: React.FC<GreetingCardProps> = ({ name }) => {
   ReactGA.send({
     hitType: "pageview",
@@ -37,9 +22,15 @@ const GreetingCard: React.FC<GreetingCardProps> = ({ name }) => {
       return "Good Evening";
     }
   };
+
   return (
-    <div style={cardStyle}>
-      <h1 style={headingStyle}>{`${getCurrentGreeting()}, ${name}`} </h1>
+    <div className="m-2 text-center bg-black font-secondary">
+      <h1 className="text-3xl font-bold leading-7 text-white">
+        {`${getCurrentGreeting()} ${name},`}
+      </h1>
+      <p className="px-1 text-sm font-light leading-6 text- mt-2 text-white text-left">
+        Lets learn some new words today!
+      </p>
     </div>
   );
 };
diff --git a/nepalingo-web/src/components/header/Header.tsx b/nepalingo-web/src/components/header/Header.tsx
index bee0c95..892820d 100644
--- a/nepalingo-web/src/components/header/Header.tsx
+++ b/nepalingo-web/src/components/header/Header.tsx
@@ -5,7 +5,7 @@ import ChangeLanguage from "@/components/header/ChangeLanguage";
 
 const Header: React.FC = () => {
   return (
-    <nav className=" border-gray-200 px-4 lg:px-6 py-1 bg-black text-white flex justify-between items-center w-full h-16">
+    <nav className=" border-gray-200 px-6 py-4 lg:px-6 py-1 bg-black text-white flex justify-between items-center w-full h-16">
       <div className="flex-1">
         <a href="https://nepalingo.com">
           <img src={logo} alt="Nepalingo Logo" className="h-12" />
diff --git a/nepalingo-web/src/components/header/StreakDisplay.tsx b/nepalingo-web/src/components/header/StreakDisplay.tsx
new file mode 100644
index 0000000..c9d72e6
--- /dev/null
+++ b/nepalingo-web/src/components/header/StreakDisplay.tsx
@@ -0,0 +1,30 @@
+import React, { useContext } from "react";
+import { StreakContext } from "@/hooks/StreakContext";
+import { getPhrase } from "@/components/header/StreakPhrase";
+import fire from "../../assets/fire.svg";
+
+const StreakDisplay: React.FC = () => {
+  const { currentStreak } = useContext(StreakContext);
+  const phrase = getPhrase(currentStreak);
+
+  return (
+    <div className="bg-[#D03641] min-w-[210px] max-w-max h-[55px] rounded-md px-3 pt-0 inline-flex items-center justify-between text-white">
+      <div className="text-left flex-1">
+        <p className="text-sm font-bold leading-tight uppercase">
+          {phrase.split("!")[0]}!
+        </p>
+        <p className="text-sm font-bold leading-tight uppercase">
+          {phrase.split("!")[1]}!
+        </p>
+      </div>
+      <div className="relative flex-shrink-0">
+        <img src={fire} alt="Fire" className="w-10 h-10" />
+        <span className="absolute font-black font-primary text-1xl text-white bottom-0 left-1/2 transform -translate-x-1/2">
+          {currentStreak}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default StreakDisplay;
diff --git a/nepalingo-web/src/components/header/StreakPhrase.tsx b/nepalingo-web/src/components/header/StreakPhrase.tsx
index 5be21f9..c5a96b7 100644
--- a/nepalingo-web/src/components/header/StreakPhrase.tsx
+++ b/nepalingo-web/src/components/header/StreakPhrase.tsx
@@ -1,4 +1,3 @@
-// streakPhrases.ts
 export interface StreakPhrase {
   min: number;
   max: number;
diff --git a/nepalingo-web/src/pages/Home.tsx b/nepalingo-web/src/pages/Home.tsx
index 1787b16..684cb15 100644
--- a/nepalingo-web/src/pages/Home.tsx
+++ b/nepalingo-web/src/pages/Home.tsx
@@ -6,6 +6,7 @@ import Header from "@/components/header/Header";
 import GreetingCard from "@/components/GreetingCard";
 import DailyQuiz from "@/components/DailyQuiz";
 import ViewDictionary from "@/components/ViewDictionary";
+import StreakDisplay from "@/components/header/StreakDisplay";
 
 const Home: React.FC = () => {
   ReactGA.send({
@@ -16,16 +17,15 @@ const Home: React.FC = () => {
   const { user } = useAuth();
 
   return (
-    <div className="flex flex-col w-full justify-between h-screen bg-gradient-to-r from-black via-gray-800 to-black text-white">
+    <div className="flex flex-col w-full justify-between h-screen bg-black text-white font-primary">
       <Header />
-      <div className="flex flex-col items-center justify-center flex-grow">
-        <div className="mt-10">
-          <div className="text-xl font-bold text-centre">
-            <GreetingCard name={user?.user_metadata?.username} />
-          </div>
+      <div className="flex flex-col px-6 items-center justify-center flex-grow">
+        <div className="flex items-center justify-between w-full mt-5 text-xl font-primary font-bold">
+          <GreetingCard name={user?.user_metadata?.username} />
+          <StreakDisplay />
         </div>
 
-        <div className="flex flex-col items-center mt-10">
+        <div className="flex flex-col items-center mt-5">
           <div className="w-40 h-40 border-2 border-white rounded-full flex items-center justify-center">
             <img
               src={logo}