Convert to ChakraUI

package.json

@@ -4,13 +4,17 @@
   "homepage": "https://aha.pineapple.lol/",
   "dependencies": {
     "@ant-design/icons": "^4.3.0",
+    "@chakra-ui/react": "^1.8.8",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
     "antd": "^4.6.2",
     "axios": "^0.20.0",
+    "framer-motion": "^6",
     "prop-types": "^15.7.2",
     "qs": "^6.9.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.3"
+    "react-scripts": "5.0.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.6.2",
@@ -36,9 +40,6 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": {
     "production": [
       ">0.2%",

src/components/Header.js

@@ -1,17 +1,19 @@
 // @flow
 import React from 'react';
 import type { Node } from 'react';
-import '../css/Header.css';
+import { Box, Center, Heading, Text, VStack } from '@chakra-ui/react';
 
 function Header(): Node {
   return (
-    <div className="header">
-      <h1>aha</h1>
-      <p>
+    <VStack maxWidth="400px" mt={3} margin="0 auto" textAlign="center">
+      <Heading fontSize="2xl" as="h1">
+        aha
+      </Heading>
+      <Text marginTop={2}>
         Find the perfect name for your next project. Take inspiration from
         synonyms and translations.
-      </p>
-    </div>
+      </Text>
+    </VStack>
   );
 }
 

src/components/Nav.js

@@ -1,15 +1,20 @@
 // @flow
 import React from 'react';
 import type { Node } from 'react';
-import '../css/Nav.css';
+import { chakra, Image, Link } from '@chakra-ui/react';
 
 function Nav(): Node {
   return (
-    <div className="nav">
-      <a href="https://pineapple.lol">
-        <img src="/pineapplelol.png" alt="pineapplelol logo" />
-      </a>
-    </div>
+    <chakra.nav margin="0 auto" width="90%">
+      <Link href="https://pineapple.lol">
+        <Image
+          width="200px"
+          paddingTop="20px"
+          src="/pineapplelol.png"
+          alt="pineapplelol logo"
+        />
+      </Link>
+    </chakra.nav>
   );
 }
 

src/components/Searchbar.js

@@ -4,6 +4,7 @@ import type { Node } from 'react';
 import { Button, Dropdown, Input, Menu, Row } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
 import '../css/Searchbar.css';
+import { Center, InputGroup, InputLeftAddon, Select } from '@chakra-ui/react';
 
 const { Search } = Input;
 
@@ -20,28 +21,41 @@ function Searchbar(props: Props): Node {
     setFind(key);
   };
 
-  const menu = (
-    <Menu onClick={onClick}>
-      <Menu.Item key="Synonyms">Synonyms</Menu.Item>
-      <Menu.Item key="Translations">Translations</Menu.Item>
-    </Menu>
-  );
-
   return (
-    <Row type="flex" align="center" className="search">
-      <Search
+    <Center marginTop={5}>
+      <InputGroup w="60%" h="35px">
+        <InputLeftAddon
+          border="none"
+          h="35px"
+          background="white"
+          children={
+            <Select placeholder="Select Option" h="35px" size="sm">
+              <option value="Synonyms">Synonyms</option>
+              <option value="Translations">Translations</option>
+            </Select>
+          }
+        />
+        <Input
+          type="text"
+          placeholder="Enter a word that describes your idea"
+          onSubmit={() => console.log('hi')}
+        />
+      </InputGroup>
+      {/* <Search
         addonBefore={
-          <Dropdown overlay={menu}>
-            <Button>
-              {find} <DownOutlined />
-            </Button>
-          </Dropdown>
+
+            // <Dropdown overlay={menu}>
+            //   <Button>
+            //     {find} <DownOutlined />
+            //   </Button>
+            // </Dropdown>
+
         }
         placeholder="A word that describes your idea"
         onSearch={value => setWord(value)}
         style={{ width: 400 }}
-      />
-    </Row>
+      /> */}
+    </Center>
   );
 }
 

src/components/WordCard.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import type { Node } from 'react';
-import { Card } from 'antd';
+import { Box, Center, Heading } from '@chakra-ui/react';
 
 type Props = {
   heading: string,
@@ -13,12 +13,21 @@ function WordCard(props: Props): Node {
   const { heading, identifier, description } = props;
 
   return (
-    <Card hoverable style={{ width: '90%', textAlign: 'left' }}>
-      <h2>{heading}</h2>
-      <p>
+    <Box
+      border="1px solid"
+      borderColor="gray.100"
+      borderRadius="sm"
+      overflow="hidden"
+      padding={8}
+      _hover={{ boxShadow: 'lg', transition: 'box-shadow 150ms ease-in-out' }}
+    >
+      <Heading as="h5" size="md">
+        {heading}
+      </Heading>
+      {/* <Text>
         <em>{identifier}</em> {description}
-      </p>
-    </Card>
+      </Text> */}
+    </Box>
   );
 }
 

src/index.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import 'antd/dist/antd.css';
-
+import { ChakraProvider } from '@chakra-ui/react'
 import Home from './pages/Home';
 
 ReactDOM.render(
   <React.StrictMode>
-    <Home />
+    <ChakraProvider>
+      <Home />
+    </ChakraProvider>
   </React.StrictMode>,
   document.getElementById('root'),
 );