From 68a1d9aa26a59bbbb691b4eba4f7cbe298108093 Mon Sep 17 00:00:00 2001 From: varuogm Date: Fri, 17 May 2024 15:54:40 +0530 Subject: [PATCH] Redesign/Refacoting go brr --- src/{ => Assests/Images}/Cats.png | Bin src/{ => Assests/Images}/Kitty.gif | Bin src/{ => Assests/Images}/logo.svg | 0 src/common/Constants.js | 0 src/components/Accordion.js | 57 ++++ src/components/Footer.js | 77 +++++ src/components/Header.js | 45 +++ src/components/Profile.js | 473 +++++++++++++------------- src/components/Search.js | 49 +++ src/components/Winner.js | 33 ++ src/components/atoms/CatClicker.js | 27 ++ src/components/atoms/Toast.js | 24 ++ src/components/atoms/WelcomeHeader.js | 27 ++ 13 files changed, 577 insertions(+), 235 deletions(-) rename src/{ => Assests/Images}/Cats.png (100%) rename src/{ => Assests/Images}/Kitty.gif (100%) rename src/{ => Assests/Images}/logo.svg (100%) create mode 100644 src/common/Constants.js create mode 100644 src/components/Accordion.js create mode 100644 src/components/Footer.js create mode 100644 src/components/Header.js create mode 100644 src/components/Search.js create mode 100644 src/components/Winner.js create mode 100644 src/components/atoms/CatClicker.js create mode 100644 src/components/atoms/Toast.js create mode 100644 src/components/atoms/WelcomeHeader.js diff --git a/src/Cats.png b/src/Assests/Images/Cats.png similarity index 100% rename from src/Cats.png rename to src/Assests/Images/Cats.png diff --git a/src/Kitty.gif b/src/Assests/Images/Kitty.gif similarity index 100% rename from src/Kitty.gif rename to src/Assests/Images/Kitty.gif diff --git a/src/logo.svg b/src/Assests/Images/logo.svg similarity index 100% rename from src/logo.svg rename to src/Assests/Images/logo.svg diff --git a/src/common/Constants.js b/src/common/Constants.js new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Accordion.js b/src/components/Accordion.js new file mode 100644 index 0000000..471206c --- /dev/null +++ b/src/components/Accordion.js @@ -0,0 +1,57 @@ +import React from "react"; +import { + Accordion, + AccordionItem, + AccordionButton, + AccordionPanel, + AccordionIcon, + Box, + Heading, +} from "@chakra-ui/react"; + +const AccordionComponent = () => { + return ( + + + FAQ + + +

+ + + Why it's useful + + + +

+ + It gives you an overall insight of a person's GitHub profile in one + place + + + +

+ + + How are the points being calculated + + + +

+ + There are various parameters keeping in mind calculating the most + accurate result. We are still working on more parameters. + + + + ); +}; + +export default AccordionComponent; diff --git a/src/components/Footer.js b/src/components/Footer.js new file mode 100644 index 0000000..459f80b --- /dev/null +++ b/src/components/Footer.js @@ -0,0 +1,77 @@ +import React from "react"; +import { + Box, + Stack, + Center, + Image, + IconButton, + Text, + ButtonGroup, +} from "@chakra-ui/react"; +import { FaTwitter, FaGithub, FaLinkedin, FaLink } from "react-icons/fa"; + +const Footer = () => { + return ( + + +
+ gourav image +
+ + + + window.open("https://twitter.com/Varougm", "_blank") + } + icon={} + /> + + window.open("https://github.com/varuogm", "_blank") + } + icon={} + /> + + window.open( + "https://in.linkedin.com/in/gourav-majee-724b37188", + "_blank" + ) + } + icon={} + /> + window.open("https://varuog.xyz/", "_blank")} + icon={} + /> + + + + Β© 2024 Gourav Maje. All Rights Reserved. + + + + ); +}; + +export default Footer; diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..e548f08 --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,45 @@ +import React from "react"; +import { + VStack, + IconButton, + Heading, + Text, + Skeleton, + useColorMode, +} from "@chakra-ui/react"; + +import { FaMoon } from "react-icons/fa"; +import { FiZap } from "react-icons/fi"; +import WelcomeHeaderComponent from "./atoms/WelcomeHeader"; + +const HeaderComponent = ({ toggleColorMode, colorMode }) => { + return ( + <> + + : } + isRound="true" + size="lg" + alignSelf="flex-end" + onClick={toggleColorMode} + boxShadow="inner" + p="6" + /> + + + Welcome to Git-CAT +
+ + Tells you about your github stats + + + +
+ + + + + ); +}; + +export default HeaderComponent; diff --git a/src/components/Profile.js b/src/components/Profile.js index 5bd438a..b56d8b7 100644 --- a/src/components/Profile.js +++ b/src/components/Profile.js @@ -1,32 +1,51 @@ import React, { useState } from "react"; import { - useMediaQuery, Tooltip - , Alert, AlertIcon, Flex, Center, Stack, Skeleton, VStack, useColorMode, Spacer, useToast, Heading, Box, Text, chakra, Image, ButtonGroup, IconButton, Input, InputGroup, InputRightAddon, InputLeftAddon + Box, + Flex, + Input, + Tooltip, + Center, + Spacer, + Text, + chakra, + Image, + Heading, + useToast, + IconButton, + InputGroup, + useColorMode, + InputLeftAddon, + useMediaQuery, } from "@chakra-ui/react"; -import { FaMoon, FaLinkedin, FaGithub, FaTwitter, FaLink } from 'react-icons/fa'; -import { FiZap, FiSearch } from "react-icons/fi"; -import CAT from '../../src/Kitty.gif'; -import CATS from '../../src/Cats.png'; +//Assests +import { FaGithub, FaLink } from "react-icons/fa"; +import { FiSearch } from "react-icons/fi"; +import CATS from "../Assests/Images/Cats.png"; +import CAT from "../Assests/Images/Kitty.gif"; -import { - Accordion, - AccordionItem, - AccordionButton, - AccordionPanel, - AccordionIcon, -} from "@chakra-ui/react" +//Coponents +import AccordionComponent from "./Accordion"; +import Footer from "./Footer"; +import HeaderComponent from "./Header"; -const Profile = () => { +import CatClicker from "./atoms/CatClicker"; +import WinnerText from "./Winner"; +const Profile = () => { let GouravImage = "https://i.ibb.co/b29dG1G/JEo6-Jh-S1-400x400.jpg"; + //TODO: 1. Add a new state variable called `friendUsername` and set it to an empty string + //make object for similar data + //use layout to set deafult items const [username, setUsername] = useState(""); const [loc, setLoc] = useState("?"); const [Bloglink, setBloglink] = useState("?"); const [Bio, setBio] = useState(""); - const [userImg, setuserImg] = useState("https://thumbs.dreamstime.com/b/happy-bear-family-characters-teddy-bear-family-happy-bear-family-characters-teddy-bear-family-vector-123893392.jpg"); + const [userImg, setuserImg] = useState( + "https://thumbs.dreamstime.com/b/happy-bear-family-characters-teddy-bear-family-happy-bear-family-characters-teddy-bear-family-vector-123893392.jpg" + ); const [followers, setFollowers] = useState(""); const [following, setFollowing] = useState(""); const [Totalrepo, setTotalrepo] = useState(""); @@ -35,40 +54,39 @@ const Profile = () => { const [show, setShow] = useState(false); const { colorMode, toggleColorMode } = useColorMode(); - const [check] = useMediaQuery("(min-width: 1025px)") - const toast = useToast() + const [check] = useMediaQuery("(min-width: 1025px)"); + const toast = useToast(); const [friendUsername, setFriendUsername] = useState(""); - const [frienduserImg, setFrienduserImg] = useState("https://images.saymedia-content.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto:eco%2Cw_1200/MTc2MjkxNzg1NDQwNTY4NTEw/cats-with-down-syndrome-reasons-why-your-cat-cant-have-down-syndrome.jpg"); - + const [frienduserImg, setFrienduserImg] = useState( + "https://images.saymedia-content.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto:eco%2Cw_1200/MTc2MjkxNzg1NDQwNTY4NTEw/cats-with-down-syndrome-reasons-why-your-cat-cant-have-down-syndrome.jpg" + ); const [TotalFriendRepo, setfriendTotalrepo] = useState(""); - - - const onChangeHandler = e => { + const onChangeHandler = (e) => { setUsername(e.target.value); }; - const onFriendChangeHandler = e => { + const onFriendChangeHandler = (e) => { setFriendUsername(e.target.value); }; - const submitfriendHandler = async e => { - const Friendprofile = await fetch(`https://api.github.com/users/${friendUsername}`); + const submitfriendHandler = async (e) => { + const Friendprofile = await fetch( + `https://api.github.com/users/${friendUsername}` + ); const friendProfileJson = await Friendprofile.json(); - if (friendProfileJson) - setFriendUsername(friendProfileJson.name); + if (friendProfileJson) setFriendUsername(friendProfileJson.name); setFrienduserImg(friendProfileJson.avatar_url); var TotalFriendRepo = Object.keys(friendProfileJson.repos_url || {}).length; setfriendTotalrepo(TotalFriendRepo); + }; - } - - const submitHandler = async e => { + const submitHandler = async (e) => { setShow(true); const profile = await fetch(`https://api.github.com/users/${username}`); @@ -86,126 +104,170 @@ const Profile = () => { setTotalrepo(TotalRepo); setName(profileJson.name); setBloglink(profileJson.blog); - } if (username === "") { - setuserImg("https://thumbs.dreamstime.com/b/happy-bear-family-characters-teddy-bear-family-happy-bear-family-characters-teddy-bear-family-vector-123893392.jpg") + setuserImg( + "https://thumbs.dreamstime.com/b/happy-bear-family-characters-teddy-bear-family-happy-bear-family-characters-teddy-bear-family-vector-123893392.jpg" + ); setBio("I think you didint entered anything in the box ⁉️ ANYWAY"); setName("HI !! Im pyara Bear of gourav"); setFollowers("bear dont have followers"); setFollowing("bears follows what he love "); setTotalrepo("Bears dont know about repo.OK .they know only eating"); } - }; return ( <> - <> - - : } - isRound='true' - size='lg' - alignSelf='flex-end' - onClick={toggleColorMode} - boxShadow="inner" p="6" - /> - - - - Welcome to Git-CAT - - - - Tells you about your github stats - - -
- +
+ {/* SearchComponent start */} - - + + onChange={onChangeHandler} + variant="filled" + placeholder="Enter your username here" + /> -
- + onClick={submitHandler} + > lets Find Out } /> - - {//horizontal card remaining + {/* SearchComponent end */} + { + //horizontal card remaining } - {show === true && + {show === true && ( <> -
- +
- - - + + {Bio} - {Name !== "" && Name !== null && {"Hi πŸ‘‹, i am " + Name + " !"}} - πŸ‘¨β€πŸš€ Followers - {followers} - πŸ‘¨β€πŸ’» Following - {following} - πŸŽ’ Total Repos - {Totalrepo} - {loc !== "" && {"πŸ“ Location -" + loc}} - {Bloglink !== "" && {"πŸ“š Look on my blogs here- " + Bloglink} - window.open(Bloglink, "_blank")} icon={} />} + {Name !== "" && Name !== null && ( + + {" "} + {"Hi πŸ‘‹, i am " + Name + " !"} + + )} + + πŸ‘¨β€πŸš€ Followers - {followers}{" "} + + + πŸ‘¨β€πŸ’» Following - {following}{" "} + + + πŸŽ’ Total Repos - {Totalrepo} + + {loc !== "" && ( + + {" "} + {"πŸ“ Location -" + loc} + + )} + {Bloglink !== "" && ( + + {" "} + {"πŸ“š Look on my blogs here- " + Bloglink} + window.open(Bloglink, "_blank")} + icon={} + /> + + )}
- } + )} - - Cats-pic + + Cats-pic - What a cute cat likes.Maybe some cat-food but im special i want your opinion on how much rating you would give this + + {" "} + What a cute cat likes.Maybe some cat-food but im special i + want your opinion on how much rating you would give this{" "} + Also share and stars⭐ are appreciated !! MEOWW - - + + } isRound="true"> + icon={} + isRound="true" + > + @@ -216,188 +278,129 @@ const Profile = () => { {/* comparison of frinds */} - + Compare friends stats - + A Mock compare with your friend stats - - + + - VS - + {" "} + VS + + + onChange={onFriendChangeHandler} + variant="filled" + placeholder="Enter your fridn name here" + /> + onClick={submitfriendHandler} + > Compare } />
- - + - + #4b026f 20px)" + > + - VS - - + + - + #4b026f 20px)" + > +
- {show === true && - {TotalFriendRepo >= Totalrepo ? -

{friendUsername + " is winner with " + TotalFriendRepo + " repos"}

: -

{username + " is winner " + Totalrepo + " repos"}

} - - } - - - - - This comaprison is only based on Repo count and nothing else πŸ˜…. - You both are gem πŸ’Ž - - + {show === true && ( + + )} + {/* cat clicker start */} - - - toast({ - title: `heyy ${Name} `, - description: "Have a great day.", - duration: 1000, - isClosable: true, - }) - } - show Toast src={CAT} alt="Cat gif" /> - - - You've reached the end πŸ’– BTW click me 🐾!! - - + + {/* cat clicker end */} - - - {/* accordian */} - - -

- - - Why its useful - - - -

- - It gives you a overall insight of a person github profile in one place - - - - -

- - - How are the points being calculated - - - -

- - There are various parameters keeping in mind calcualting the most accurate result. - there are still more parameters we re working on. - - - - - {/* accordiin end */} - - - - -
- gourav image -
- - - - window.open("https://twitter.com/Varougm", "_blank")} icon={} /> - window.open("https://github.com/varuogm", "_blank")} icon={} /> - window.open("https://in.linkedin.com/in/gourav-majee-724b37188", "_blank")} icon={} /> - window.open("https://gouravmajee.me/", "_blank")} icon={} /> - - - - - Made with love by gourav. - - - - - - + +
- {console.log("muje laga hi tha tum yaaha kuch masti karne aaoyge")} - ); }; export default Profile; - - diff --git a/src/components/Search.js b/src/components/Search.js new file mode 100644 index 0000000..7d35b8d --- /dev/null +++ b/src/components/Search.js @@ -0,0 +1,49 @@ +import React from "react"; +import { + Spacer, + chakra, + IconButton, + Input, + InputGroup, + InputLeftAddon, +} from "@chakra-ui/react"; + +import { FiSearch } from "react-icons/fi"; + +const SearchComponent = () => { + return ( + <> + + + + +
+ + lets Find Out + } /> + + + + ); +}; + +export default SearchComponent; diff --git a/src/components/Winner.js b/src/components/Winner.js new file mode 100644 index 0000000..2f48155 --- /dev/null +++ b/src/components/Winner.js @@ -0,0 +1,33 @@ +import React from "react"; +import { Spacer, Alert, Text, AlertIcon } from "@chakra-ui/react"; + +const WinnerText = ({ + username, + friendUsername, + Totalrepo, + TotalFriendRepo, +}) => { + const isWinner = TotalFriendRepo >= Totalrepo; + + return ( + <> + + {isWinner ? ( +

{`${friendUsername} is the winner with ${TotalFriendRepo} repos`}

+ ) : ( +

{`${username} is the winner with ${Totalrepo} repos`}

+ )} + + + + + + + This comparison is only based on Repo count and nothing else . You both + are gem πŸ’Ž + + + + ); +}; +export default WinnerText; diff --git a/src/components/atoms/CatClicker.js b/src/components/atoms/CatClicker.js new file mode 100644 index 0000000..aad559b --- /dev/null +++ b/src/components/atoms/CatClicker.js @@ -0,0 +1,27 @@ +import React from "react"; +import { Box, Text } from "@chakra-ui/react"; +import { useToast } from "@chakra-ui/react"; + +const CatClicker = ({ Name, CAT }) => { + const toast = useToast(); + + const handleImageClick = () => { + toast({ + title: `heyy ${Name}`, + description: "Have a great day.", + duration: 1000, + isClosable: true, + }); + }; + + return ( + + + Cat gif + + You've reached the end πŸ’– BTW click me 🐾!! + + ); +}; + +export default CatClicker; diff --git a/src/components/atoms/Toast.js b/src/components/atoms/Toast.js new file mode 100644 index 0000000..e395dcd --- /dev/null +++ b/src/components/atoms/Toast.js @@ -0,0 +1,24 @@ +import React from "react"; +import { useToast } from "@chakra-ui/react"; + +const Toast = ({ toastMessage, title }) => { + const toast = useToast(); + + const showToast = () => { + toast({ + title, + description: toastMessage, + duration: 1000, + isClosable: true, + }); + }; + + return ( + + Cat gif + You've reached the end BTW click me !! + + ); +}; + +export default Toast; diff --git a/src/components/atoms/WelcomeHeader.js b/src/components/atoms/WelcomeHeader.js new file mode 100644 index 0000000..bb8d995 --- /dev/null +++ b/src/components/atoms/WelcomeHeader.js @@ -0,0 +1,27 @@ +import { Skeleton, Heading, Text } from "@chakra-ui/react"; + +const WelcomeHeaderComponent = () => { + return ( + <> + + Welcome to Git-CAT + + + + Tells you about your github stats + + +
+ + + ); +}; + +export default WelcomeHeaderComponent;