feat: icon working

corlys · Oct 15, 2021 · d0574d7 · d0574d7
1 parent cbd4898
commit d0574d7
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 13 deletions.
diff --git a/src/components/Bio.tsx b/src/components/Bio.tsx
@@ -0,0 +1,29 @@
+import { HStack, Flex, Text, Icon } from "@chakra-ui/react";
+import { FaMale, FaFemale } from "react-icons/fa";
+
+import { GenderType } from "types";
+
+const Bio = ({ gender }: { gender: GenderType }) => {
+  return (
+    <Flex align="center" justify="center">
+      {gender.gender !== "" ? (
+        <HStack spacing={2}>
+          {gender.gender === "male" ? (
+            <Icon boxSize="200" as={FaMale} />
+          ) : (
+            <Icon boxSize="200" as={FaFemale} />
+          )}
+          <Text>
+            You&apos;re Probably{" "}
+            {gender.probability ? gender.probability * 100 : null} a ...{" "}
+            {gender.gender}
+          </Text>
+        </HStack>
+      ) : (
+        <></>
+      )}
+    </Flex>
+  );
+};
+
+export default Bio;
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -5,8 +5,8 @@ const Footer = () => {
     <Flex as="footer" width="full" align="center">
       <Text>
         {new Date().getFullYear()} -{" "}
-        <Link href="https://sznm.dev" isExternal>
-          sznm.dev
+        <Link href="https://genderize.io" isExternal>
+          pwrd b genderize.io
         </Link>
       </Text>
     </Flex>

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -7,7 +7,7 @@ const Header = () => {
   return (
     <Flex as="header" width="full" align="center">
       <Heading as="h1" size="md">
-        <Link href="/">nextarter-chakra</Link>
+        <Link href="/">guess-gender</Link>
       </Heading>
 
       <Box marginLeft="auto">

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -2,12 +2,12 @@
 import { ChakraProvider } from "@chakra-ui/react";
 import { EmotionCache } from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
-import { DefaultSeo } from "next-seo";
+// import { DefaultSeo } from "next-seo";
 import { AppProps } from "next/app";
 import Head from "next/head";
 import "@fontsource/lexend/latin.css";
 
-import defaultSEOConfig from "../../next-seo.config";
+// import defaultSEOConfig from "../../next-seo.config";
 import Layout from "components/layout";
 import createEmotionCache from "styles/createEmotionCache";
 import customTheme from "styles/customTheme";
@@ -33,7 +33,7 @@ const MyApp = ({
             content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover"
           />
         </Head>
-        <DefaultSeo {...defaultSEOConfig} />
+        {/* <DefaultSeo {...defaultSEOConfig} /> */}
         <Layout>
           <Component {...pageProps} />
         </Layout>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,15 +1,53 @@
-import { Box } from "@chakra-ui/react";
+import {
+  Box,
+  FormControl,
+  FormLabel,
+  FormHelperText,
+  Input,
+  Button,
+} from "@chakra-ui/react";
+import Head from "next/head";
+import { useState } from "react";
 
-import CTASection from "components/CTASection";
-import SomeImage from "components/SomeImage";
-import SomeText from "components/SomeText";
+import Bio from "components/Bio";
+import { GenderType } from "types";
 
 const Home = () => {
+  const [gender, setGender] = useState<GenderType>({
+    name: "",
+    gender: "",
+    probability: 0,
+    count: 0,
+  });
+  const [input, setInput] = useState("");
+
+  const handleSubmit = async () => {
+    if (input !== "" && input !== null) {
+      const res = await fetch(`https://api.genderize.io/?name=${input}`);
+      const resp: GenderType = await res.json();
+      setGender(resp);
+    }
+  };
+
   return (
     <Box mb={8} w="full">
-      <SomeText />
-      <SomeImage />
-      <CTASection />
+      <Head>
+        <title>Gender Guess</title>
+      </Head>
+      <FormControl id="person_name">
+        <FormLabel>Name</FormLabel>
+        <Input
+          type="text"
+          onChange={(e) => {
+            setInput(e.target.value);
+          }}
+        />
+        <FormHelperText>Enter Your First/Last Name Here</FormHelperText>
+        <Button mt={4} type="submit" variant="solid" onClick={handleSubmit}>
+          Check!
+        </Button>
+      </FormControl>
+      <Bio gender={gender} />
     </Box>
   );
 };

diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -0,0 +1,6 @@
+export interface GenderType {
+  name?: string;
+  gender?: string;
+  probability?: number;
+  count?: number;
+}