diff --git a/src/components/Compare.js b/src/components/Compare.js new file mode 100644 index 0000000..014a173 --- /dev/null +++ b/src/components/Compare.js @@ -0,0 +1,134 @@ +import React from "react"; +import { + Box, + Flex, + Input, + Center, + Spacer, + Text, + chakra, + Image, + Heading, + IconButton, + InputGroup, + InputLeftAddon, +} from "@chakra-ui/react"; +import { FiSearch } from "react-icons/fi"; + +const Compare = ({ + check, + Name, + friendUsername, + onFriendChangeHandler, + submitfriendHandler, + userImg, + frienduserImg, +}) => { + return ( + <> + + Compare friends stats + + + + A Mock compare with your friend stats + + + + + + + {" "} + VS + + + + + + Compare + } /> + + + +
+ + + + + + {" "} + VS + + + + + + +
+ + + + ); +}; +export default Compare; diff --git a/src/components/Middle.js b/src/components/Middle.js new file mode 100644 index 0000000..23e16cd --- /dev/null +++ b/src/components/Middle.js @@ -0,0 +1,49 @@ +import React from "react"; +import { Box, Flex, IconButton, Tooltip, Text, Spacer } from "@chakra-ui/react"; +import { FaGithub } from "react-icons/fa"; +import CATS from "../Assests/Images/Cats.png"; + +const Middle = ({ check }) => { + return ( + <> + + 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{" "} + + + Also share and stars⭐ are appreciated !! MEOWW + + + } + isRound="true" + > + + + + + + + + + + ); +}; + +export default Middle; diff --git a/src/components/Profile.js b/src/components/Profile.js index b56d8b7..afdaf46 100644 --- a/src/components/Profile.js +++ b/src/components/Profile.js @@ -1,36 +1,26 @@ import React, { useState } from "react"; import { Box, - Flex, - Input, - Tooltip, - Center, Spacer, - Text, - chakra, - Image, - Heading, useToast, - IconButton, - InputGroup, useColorMode, - InputLeftAddon, useMediaQuery, } from "@chakra-ui/react"; //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"; //Coponents -import AccordionComponent from "./Accordion"; +import AccordionComponent from "./atoms/Accordion"; import Footer from "./Footer"; import HeaderComponent from "./Header"; +import SearchInput from "./Search"; +import Compare from "./Compare"; +import Middle from "./Middle"; import CatClicker from "./atoms/CatClicker"; import WinnerText from "./Winner"; +import UserModel from "./atoms/UserModel"; const Profile = () => { let GouravImage = "https://i.ibb.co/b29dG1G/JEo6-Jh-S1-400x400.jpg"; @@ -38,6 +28,8 @@ const Profile = () => { //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 toast = useToast(); + const [username, setUsername] = useState(""); const [loc, setLoc] = useState("?"); const [Bloglink, setBloglink] = useState("?"); @@ -55,7 +47,6 @@ const Profile = () => { const { colorMode, toggleColorMode } = useColorMode(); const [check] = useMediaQuery("(min-width: 1025px)"); - const toast = useToast(); const [friendUsername, setFriendUsername] = useState(""); const [frienduserImg, setFrienduserImg] = useState( @@ -91,6 +82,7 @@ const Profile = () => { const profile = await fetch(`https://api.github.com/users/${username}`); const profileJson = await profile.json(); + console.log(profileJson); if (profileJson) { setLoc(profileJson.location); @@ -127,258 +119,37 @@ const Profile = () => {
- {/* SearchComponent start */} - - - - -
- - lets Find Out - } /> - - - {/* SearchComponent end */} - { - //horizontal card remaining - } - {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={} - /> - - )} - -
- - )} - - - - 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{" "} - - - Also share and stars⭐ are appreciated !! MEOWW - - - } - isRound="true" - > - - - - - - - - - - {/* comparison of frinds */} - - - Compare friends stats - - - - A Mock compare with your friend stats - - - - - - - {" "} - VS - - - - - - Compare - } /> - - - -
- - - - - - {" "} - VS - + - - - - -
- + {show === true && ( { /> )} - {/* cat clicker start */} - {/* cat clicker end */}