Profile UI created with ChakraUI framework :D

Author: Thiagoow

package.json

@@ -8,8 +8,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@chakra-ui/react": "^1.8.6",
+    "@emotion/react": "11",
+    "@emotion/styled": "11",
+    "axios": "^0.26.1",
+    "framer-motion": "6",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1"
   },
   "devDependencies": {
     "@types/react": "^17.0.33",
@@ -18,4 +24,4 @@
     "typescript": "^4.5.4",
     "vite": "^2.8.0"
   }
-}
+}

src/App.tsx

@@ -1,11 +1,20 @@
 import React from "react";
-import HelloWorld from "./components/HelloWorld";
+import { ChakraProvider, extendTheme } from "@chakra-ui/react";
+
+import Home from "./pages/Home";
 
 const App = () => {
+  const config = {
+    initialColorMode: "dark",
+    useSystemColorMode: false
+  };
+
+  const theme = extendTheme({ config });
+
   return (
-    <>
-      <HelloWorld />
-    </>
+    <ChakraProvider theme={theme}>
+      <Home />
+    </ChakraProvider>
   );
 };
 

src/pages/Home.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+
+import api from "../services/api";
+import { Flex, Input, Grid, Image, Text, Button } from "@chakra-ui/react";
+import { FaGithub } from "react-icons/fa";
+
+export default function Home() {
+  const [user, setUser] = React.useState({});
+
+  React.useEffect(() => {
+    async function getUser() {
+      try {
+        const response = await api.get("/users/thiagoow");
+        setUser(response.data);
+      } catch (error) {
+        console.log(error);
+      }
+    }
+
+    //Executa a função acima:
+    getUser();
+  }, []);
+
+  return (
+    <Flex direction="column" alignItems="center" paddingTop="2rem">
+      <Input width="14rem" size="sm" placeholder="Digite seu nome de usuário" />
+
+      <Flex direction="row" alignItems="center">
+        <Image
+          src={(user as any)?.avatar_url}
+          alt="avatar"
+          width="6rem"
+          height="6rem"
+          marginTop="2rem"
+          borderRadius="full"
+        />
+
+        <Flex direction="column" marginLeft="1rem" alignItems="center">
+          <Text fontWeight="bold" fontSize="1.5rem" marginTop="0.8rem">
+            <a href={(user as any).url} target="_blank">
+              {(user as any)?.name}
+            </a>
+          </Text>
+
+          <Button
+            variant="link"
+            _focus={{ boxShadow: "none" }}
+            leftIcon={<FaGithub />}
+            fontSize="0.8rem"
+            alignSelf="start"
+            marginTop="0.6rem"
+            marginLeft="0.2rem"
+            color="#ccc"
+          >
+            <a href={(user as any).html_url} target="_blank">
+              {(user as any)?.login}
+            </a>
+          </Button>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+}

src/services/api.ts

@@ -0,0 +1,7 @@
+import axios from "axios";
+
+const api = axios.create({
+  baseURL: "https://api.github.com"
+});
+
+export default api;