added context and coins

src/App.tsx

@@ -1,10 +1,16 @@
 import "./App.css";
 
-import { Trivia } from "./components/index";
+import { Coin, Header, Logo, Trivia } from "./components/index";
 
 function App() {
   return (
     <div className="flex w-full items-center justify-center text-black">
+      <Header>
+        <div className="flex justify-between w-full">
+          <Logo />
+          <Coin />
+        </div>
+      </Header>
       <div>
         <Trivia />
       </div>

src/components/coin/index.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { useCoinContext } from "../../context/coin";
+import CoinIcon from "../../assets/coin.svg";
+
+const Coin: React.FC = () => {
+  const { coins } = useCoinContext();
+
+  return (
+    <div className="flex items-center">
+      <span>{coins}&nbsp;</span>
+      <img src={CoinIcon} />
+    </div>
+  );
+};
+
+export default Coin;

src/components/header/index.tsx

@@ -0,0 +1,11 @@
+import React, { PropsWithChildren } from "react";
+
+const Header: React.FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <div className="absolute top-0 left-0 w-full items-center flex p-1">
+      {children}
+    </div>
+  );
+};
+
+export default Header;

src/components/index.ts

@@ -1,6 +1,9 @@
 import Auth0LoginButton from "./auth0-login-button";
 import Auth0LogoutButton from "./auth0-logout-button";
+import Coin from "./coin";
+import Header from "./header";
 import Loader from "./loader";
+import Logo from "./logo";
 import Trivia from "./trivia";
 
-export { Auth0LoginButton, Auth0LogoutButton, Trivia, Loader };
+export { Auth0LoginButton, Auth0LogoutButton, Trivia, Loader, Header, Coin, Logo };

src/components/logo/index.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Logo: React.FC = () => {
+  return <div></div>;
+};
+
+export default Logo;

src/components/trivia/index.tsx

@@ -3,13 +3,16 @@ import React, { useEffect, useState } from "react";
 import { getTriviaFromGemini } from "../../services/gemini";
 import Loader from "../loader";
 import { useQuery } from "@tanstack/react-query";
+import { useCoinContext } from "../../context/coin";
 
 const Trivia: React.FC = () => {
   const { isLoading, data, refetch, isRefetching } = useQuery({
     queryKey: ["trivia"],
     queryFn: async () => getTriviaFromGemini(),
   });
 
+  const { addCoin } = useCoinContext();
+
   const [isAttempted, setIsAttempted] = useState(false);
 
   const [correctOptionIndex, setCorrectOptionIndex] = useState<number>(-1);
@@ -18,6 +21,10 @@ const Trivia: React.FC = () => {
   const onOptionClick = (optionIndex: number) => {
     setClickedOptionIndex(optionIndex);
     setIsAttempted(true);
+
+    if (correctOptionIndex === optionIndex) {
+      addCoin(1);
+    }
   };
 
   const onNexTriviaClick = () => {
@@ -26,14 +33,15 @@ const Trivia: React.FC = () => {
   };
 
   useEffect(() => {
+    console.log(data);
     if (!isLoading && data?.correctOption) {
       setCorrectOptionIndex(
         data.options.findIndex(
           (option: string) => option === data?.correctOption
         )
       );
     }
-  }, [isLoading]);
+  }, [isLoading, isRefetching]);
 
   return (
     <div>

src/context/coin.tsx

@@ -0,0 +1,27 @@
+import { createContext, useContext, useState } from "react";
+
+export type CoinContextProps = {
+  coins: number;
+  addCoin: (coin: number) => void;
+};
+
+const CoinContext = createContext<CoinContextProps>({} as CoinContextProps);
+export const useCoinContext = (): CoinContextProps => useContext(CoinContext);
+
+const CoinContextProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [coins, setCoins] = useState<number>(0);
+
+  const addCoin = (coin: number) => {
+    setCoins(coins + coin);
+  };
+
+  return (
+    <CoinContext.Provider value={{ coins, addCoin }}>
+      {children}
+    </CoinContext.Provider>
+  );
+};
+
+export default CoinContextProvider;

src/context/index.ts

@@ -0,0 +1,3 @@
+import CoinContextProvider from "./coin";
+
+export { CoinContextProvider };

src/main.tsx

@@ -4,6 +4,7 @@ import App from "./App.tsx";
 import "./index.css";
 import { Auth0Provider } from "@auth0/auth0-react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { CoinContextProvider } from "./context/index.ts";
 
 const queryClient = new QueryClient();
 
@@ -17,7 +18,9 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
           redirect_uri: window.location.origin,
         }}
       >
-        <App />
+        <CoinContextProvider>
+          <App />
+        </CoinContextProvider>
       </Auth0Provider>
     </QueryClientProvider>
   </React.StrictMode>