Aadarsh805 · Somidh · Mar 8, 2023 · Mar 9, 2023 · Mar 9, 2023 · Mar 15, 2023
diff --git a/app/components/Accordian.tsx b/app/components/Accordian.tsx
@@ -0,0 +1,103 @@
+import * as React from "react";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import Typography from "@mui/material/Typography";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import Link from "next/link";
+import { poppins } from "@/public/assets/fonts/fonts";
+
+export default function Accordian() {
+  return (
+    <div className="flex flex-col items-center justify-center w-full ">
+      <Typography
+        className={`font-bold text-2xl mb-6 text-ourBlue text-center ${poppins.className}`}
+      >
+        Frequently asked questions
+      </Typography>
+
+      <Accordion className="w-full py-2 ">
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography className={`${poppins.className}`}>
+            Why are u getting username wrong?
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography className={`pl-2 ${poppins.className}`}>
+            <li>
+              You don't have your phone number linked with your Twitter account.
+            </li>
+            <li>You have not tweeted recently.</li>
+            <li>Our API might be down, retry after sometime.</li>
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion className="w-full py-2">
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography className={`${poppins.className}`}>How does it work?</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography className={`${poppins.className}`}>
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi cum
+            laboriosam porro eius fugiat magnam, ab sint autem! Iusto nobis
+            minima facilis asperiores quidem dolorum officia recusandae pariatur
+            voluptate doloribus?
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion className="w-full py-2">
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography className={`${poppins.className}`}>Where can I see the source code</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography className={`${poppins.className}`}>
+            It's available right here in our{" "}
+            <Link
+              target="_blank"
+              className={`text-[#7214ff] ${poppins.className}`}
+              href="https://github.com/Aadarsh805/TweetSage.ai"
+            >
+              Github repository
+            </Link>
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion className="w-full  py-2 shadow-bottom">
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel2a-content"
+          id="panel2a-header"
+        >
+          <Typography className={`${poppins.className}`}>Can I contribute to the project?</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography className={`${poppins.className}`}>
+            Definitely yes, this project is completely open-source and open to
+            your valuable contributions.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      {/* <Accordion disabled>
+                <AccordionSummary
+                    expandIcon={<ExpandMoreIcon />}
+                    aria-controls="panel3a-content"
+                    id="panel3a-header"
+                >
+                    <Typography>Disabled Accordion</Typography>
+                </AccordionSummary>
+            </Accordion> */}
+    </div>
+  );
+}
diff --git a/app/components/DownloadCanvas.tsx b/app/components/DownloadCanvas.tsx
@@ -8,6 +8,7 @@ import Streak from "../dashboard/Streak";
 import ContributionGraph from "../dashboard/ContributionGraph";
 import Logo from "./Logo";
 import UserProfile from "./UserProfile";
+import { poppins } from "@/public/assets/fonts/fonts";
 
 type DownloadCanvasProps = {
   dates: any;
@@ -67,11 +68,11 @@ const DownloadCanvas: FC<DownloadCanvasProps> = ({
             </div>
           </div>
           <div>
-            <p className="text-lg font-bold text-gray-700 mb-4">Streaks</p>
+            <p className={`text-lg font-bold text-gray-700 mb-4 ${poppins.className}`}>Streaks</p>
             <Streak dates={dates} />
           </div>
           <div>
-            <p className="text-lg font-bold text-gray-700 mb-4">
+            <p className= {`text-lg font-bold text-gray-700 mb-4 ${poppins.className}`}>
               Contribution Graph
             </p>
             <ContributionGraph
@@ -89,7 +90,7 @@ const DownloadCanvas: FC<DownloadCanvasProps> = ({
         height={height}
       />
       <button
-        className="bg-red-400 p-4 mt-10 text-lg rounded-lg"
+        className={`bg-red-400 p-4 mt-10 text-lg rounded-lg ${poppins.className} `}
         onClick={onDownload}
       >
         download

diff --git a/app/components/Faqs.tsx b/app/components/Faqs.tsx
@@ -0,0 +1,61 @@
+import * as React from "react";
+import { useEffect } from "react";
+import Backdrop from "@mui/material/Backdrop";
+import Box from "@mui/material/Box";
+import Modal from "@mui/material/Modal";
+import Fade from "@mui/material/Fade";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import Accordian from "./Accordian";
+import { width } from "@mui/system";
+import { poppins } from "@/public/assets/fonts/fonts";
+
+const style = {
+  position: "absolute" as "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: "90%",
+  maxWidth: 700,
+  bgcolor: "background.paper",
+  // border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+};
+
+const Faqs = () => {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <div>
+      <Button
+        onClick={handleOpen}
+        className={`text-lg tracking-wide uppercase text-ourBlue font-semibold cursor-pointer ${poppins.className}`}
+      >
+        FAQs
+      </Button>
+      <Modal
+        // sx={{ borderRadius: '5rem' }}
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        open={open}
+        onClose={handleClose}
+        closeAfterTransition
+        BackdropComponent={Backdrop}
+        BackdropProps={{
+          timeout: 500,
+        }}
+      >
+        <Fade in={open}>
+          <Box sx={style} className={`rounded-md`}>
+            <Accordian />
+          </Box>
+        </Fade>
+      </Modal>
+    </div>
+  );
+};
+
+export default Faqs;
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -1,27 +1,32 @@
+import { poppins } from "@/public/assets/fonts/fonts";
 import Link from "next/link";
 import type { FC } from "react";
 import { AiFillGithub } from "react-icons/ai";
 import { AiOutlineTwitter } from "react-icons/ai";
+import Faqs from "./Faqs";
 
 type FooterProps = {};
 
-// bg-[#EAF3FE] 
+// bg-[#EAF3FE]
 const Footer: FC<FooterProps> = () => {
   return (
     <div className="flex items-center justify-between  w-full py-4 px-3 md:px-10 gap-4 sm:gap-4  bg-[#EAF3FE] rounded-lg">
-      <p className="text-lg tracking-wide uppercase text-ourBlue font-semibold cursor-pointer">
-        FAQ
-      </p>
-      <p className="font-semibold text-sm md:text-base text-ourBlack tracking-wider text-center ">
+      <Faqs />
+      <p
+        className={`font-semibold text-sm md:text-base text-ourBlack tracking-wider text-center ${poppins.className}`}
+      >
         Open source |{" "}
         <Link
           href="https://github.com/Aadarsh805/100daysofcode-tracker/blob/main/LICENSE"
-          className="underline"
+          className={`underline ${poppins.className}`}
           target="_blank"
         >
           MIT License 2023
-        </Link>{" "} <br className="  sm:hidden" />
-        <span className="text-ourBlue">100DaysOfCodeTracker</span>
+        </Link>{" "}
+        <br className="  sm:hidden" />
+        <span className={`text-ourBlue ${poppins.className}`}>
+          100DaysOfCodeTracker
+        </span>
       </p>
 
       <div className="flex items-center gap-2 sm:gap-4">

diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
@@ -6,7 +6,7 @@ type NavbarProps = {};
 
 const Navbar: FC<NavbarProps> = () => {
   return (
-    <nav className="flex w-full justify-between bg-transparent items-center py-8 text-black gap-20 md:gap-0">
+    <nav className="flex px-10 w-full justify-between bg-transparent items-center py-8 text-black gap-20 md:gap-0">
       <Logo />
       <StarUs />
     </nav>

diff --git a/app/components/StarUs.tsx b/app/components/StarUs.tsx
@@ -3,6 +3,7 @@ import type { FC } from "react";
 import { AiFillGithub } from "react-icons/ai";
 import mdiGithub from "public/assets/mdi_github.png";
 import Image from "next/image";
+import { poppins } from "@/public/assets/fonts/fonts";
 
 type StarUsProps = {};
 
@@ -17,7 +18,11 @@ const StarUs: FC<StarUsProps> = () => {
         <AiFillGithub className="text-2xl text-ourBlack p-[3px]" />
       </div>
       <span className="w-[1px] h-4 bg-ourBlack opacity-70"></span>
-      <p className="font-semibold text-ourBlack text-xs md:text-base">Star Us</p>
+      <p
+        className={`font-semibold text-ourBlack text-xs md:text-base ${poppins.className}`}
+      >
+        Star Us
+      </p>
     </Link>
   );
 };

diff --git a/app/components/UserProfile.tsx b/app/components/UserProfile.tsx
@@ -1,6 +1,9 @@
+"use client";
+
 import Image from "next/image";
 import { FC, useState } from "react";
 import fallbackImage from "public/assets/fallback.jpg";
+import { poppins } from "@/public/assets/fonts/fonts";
 
 type UserProfileProps = {
   userProfile: any;
@@ -19,15 +22,19 @@ const UserProfile: FC<UserProfileProps> = ({ userProfile }) => {
           height={200}
           className="rounded-full w-12 aspect-square object-cover"
         />
-        <span className="absolute -top-1 -right-1 w-5 h-5 flex items-center justify-center rounded-full bg-ourPink text-white text-xs font-medium">
+        <span
+          className={`absolute -top-1 -right-1 w-5 h-5 flex items-center justify-center rounded-full bg-ourPink text-white text-xs font-medium ${poppins.className}`}
+        >
           {count}
         </span>
       </div>
       <div className="flex flex-col">
-        <p className="text-ourDarkGray text-lg font-semibold">
+        <p
+          className={`text-ourDarkGray text-lg font-semibold ${poppins.className}`}
+        >
           {userProfile?.name}
         </p>
-        <p className="text-ourDarkGray opacity-90 text-sm">
+        <p className={`text-ourDarkGray opacity-90 text-sm ${poppins.className}`}>
           @{userProfile?.username}
         </p>
       </div>

diff --git a/app/context/MyContext.tsx b/app/context/MyContext.tsx
@@ -0,0 +1,37 @@
+import { createContext, FC, useContext, useState } from "react";
+import UserProfile from "../components/UserProfile";
+
+const StateContext = createContext<
+  { setProfile: (data: UserProfile) => void } | undefined
+>(undefined);
+
+
+interface UserProfile {
+  name: string;
+  username: string;
+  profile_img: string;
+}
+
+export const ContextProvider = ({ children }: any) => {
+  const [userProfile, setUserProfile] = useState<UserProfile>({
+    name: "",
+    username: "",
+    profile_img: "",
+  });
+
+  const setProfile = (data: UserProfile) => {
+    setUserProfile({
+      name: data.name,
+      username: data.username,
+      profile_img: data.profile_img,
+    });
+  };
+
+  return (
+    <StateContext.Provider value={{ setProfile }}>
+      {children}
+    </StateContext.Provider>
+  );
+};
+
+export const useStateContext = () => useContext(StateContext);
diff --git a/app/dashboard/ContributionGraph.tsx b/app/dashboard/ContributionGraph.tsx
@@ -8,6 +8,7 @@ import { FC, useState } from "react";
 import Tooltip from "react-tippy";
 import useTweetStore from "../store/tweetStore";
 import Image from "next/image";
+import { poppins } from "@/public/assets/fonts/fonts";
 interface ContributionGraphProps {
   tweets: any;
   dates: string[];
@@ -89,14 +90,16 @@ const ContributionGraph: FC<ContributionGraphProps> = ({
               className="rounded-full w-12 object-cover"
             />
             <div className="flex flex-col">
-              <p className="">{userProfile.name}</p>
-              <p className=" text-xs opacity-50">@{userProfile.username}</p>
+              <p className={`${poppins.className}`}>{userProfile.name}</p>
+              <p className={` text-xs opacity-50 ${poppins.className}`}>
+                @{userProfile.username}
+              </p>
             </div>
           </div>
-          <p className="my-2">
+          <p className={`my-2 ${poppins.className}`}>
             {tweets.find((tweet: any) => tweet.date === selectedDate).content}
           </p>
-          <p className=" text-sm text-gray-500 ">
+          <p className={` text-sm text-gray-500 ${poppins.className}`}>
             {new Date(selectedDate).toDateString()}
           </p>
         </div>

diff --git a/app/dashboard/Sidebar.tsx b/app/dashboard/Sidebar.tsx
@@ -8,6 +8,7 @@ import DonutLargeIcon from "@mui/icons-material/DonutLarge";
 import { usePathname } from "next/navigation";
 import { FC, useState } from "react";
 import UserProfile from "../components/UserProfile";
+import { poppins } from "@/public/assets/fonts/fonts";
 
 const links = [
   {
@@ -40,15 +41,17 @@ const Sidebar: FC<SidebarProps> = ({ userProfile }) => {
   const pathname = usePathname();
 
   return (
-    <div className="hidden md:block md:h-screen md:w-1/6 ">
+    <div
+    className="hidden md:block w-[15em] md:w-[20em] h-[calc(100vh-108px)] pl-10 "
+  >
       <div className="flex flex-col gap-10">
         <UserProfile userProfile={userProfile} />
         <div className="flex flex-col gap-2 w-full ">
           {links.map((link) => (
             <Link key={link.name} href={link.url} className="">
               <div className={pathname === link.url ? activeLink : normalLink}>
                 {link.icon}
-                <p className="text-xl font-medium">{link.name}</p>
+                <p className={`text-xl font-medium ${poppins.className}`}>{link.name}</p>
               </div>
             </Link>
           ))}