diff --git a/website/components/UserDetailedCard.tsx b/website/components/UserDetailedCard.tsx new file mode 100644 index 00000000..9d89bedc --- /dev/null +++ b/website/components/UserDetailedCard.tsx @@ -0,0 +1,163 @@ +import { + Flex, + Box, + Icon, + chakra, + Image, + HStack, + IconButton, + Link, + CircularProgress, +} from "@chakra-ui/react"; +import { MdEmail, MdLocationOn } from "react-icons/md"; +import { BsFillBriefcaseFill } from "react-icons/bs"; +import { FC } from "react"; +import { FaGithub } from "react-icons/fa"; +import { FiTwitter } from "react-icons/fi"; +import { octokit } from "configurations/ocotokit"; +import useSWR from "swr"; + +interface UserDetailedCardProps { + username: string; +} + +const UserDetailedCard: FC = ({ username }) => { + const { data } = useSWR(`user-${username}}`, () => + octokit.users.getByUsername({ username }) + ); + + if (!data) { + return ; + } + + return ( + + avatar + + + ⚡ + + Swinging + + + + + + {data.data.name ?? data.data.login} + + + + {data.data.bio} + + + {data.data.company && ( + + + + + {data.data.company} + + + )} + + {data.data.location && ( + + + + + {data.data.location} + + + )} + {data.data.email && ( + + + + {data.data.email} + + + )} + + } + variant="link" + /> + {data.data.twitter_username && ( + } + variant="link" + /> + )} + + + + ); +}; + +export default UserDetailedCard; diff --git a/website/configurations/ocotokit.ts b/website/configurations/ocotokit.ts new file mode 100644 index 00000000..b50fb197 --- /dev/null +++ b/website/configurations/ocotokit.ts @@ -0,0 +1,3 @@ +import { Octokit } from "@octokit/rest"; + +export const octokit: Octokit = new Octokit(); \ No newline at end of file diff --git a/website/package.json b/website/package.json index 24cf1331..8be246af 100644 --- a/website/package.json +++ b/website/package.json @@ -9,18 +9,23 @@ "lint": "next lint" }, "dependencies": { + "@babel/core": "^7.18.6", "@chakra-ui/react": "^2.2.4", + "@chakra-ui/system": "^2.2.2", "@chakra-ui/theme-tools": "^2.0.5", "@emotion/react": "^11", "@emotion/styled": "^11", "@octokit/rest": "^19.0.3", + "@types/progress": "^2.0.5", "framer-motion": "^6", "next": "12.2.2", + "nextjs-progressbar": "^0.0.14", "react": "18.2.0", "react-dom": "18.2.0", "react-icons": "^4.4.0", "react-markdown": "^8.0.3", - "remark-gfm": "^3.0.1" + "remark-gfm": "^3.0.1", + "swr": "^1.3.0" }, "devDependencies": { "@types/node": "18.0.5", diff --git a/website/pages/_app.tsx b/website/pages/_app.tsx index 9d89b37b..5c94938b 100755 --- a/website/pages/_app.tsx +++ b/website/pages/_app.tsx @@ -14,6 +14,7 @@ import { useRouter } from "next/router"; import { useEffect } from "react"; import AdDetector from "components/AdDetector"; import Footer from "components/Footer"; +import NextNProgress from "nextjs-progressbar"; const customTheme = extendTheme( { @@ -115,6 +116,7 @@ function MyApp({ Component, pageProps }: AppProps) { Spotube +