added react router dom

sharunspi · Dec 1, 2023 · b29e994 · b29e994
1 parent 3dfa22a
commit b29e994
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 51 deletions.
diff --git a/english_to_ipa_translator/src/Components/Header.js b/english_to_ipa_translator/src/Components/Header.js
@@ -7,6 +7,7 @@ import {
   Button,
 } from "@material-ui/core";
 import MenuIcon from "@material-ui/icons/Menu";
+import { Link } from "react-router-dom";
 export default class Header extends Component {
   render() {
     return (
@@ -33,8 +34,9 @@ export default class Header extends Component {
             </Typography>
           </div>
           {/* <Button color="inherit">Login</Button> */}
-
-          <Typography>About us</Typography>
+          <Link to={"/about"}>
+            <Typography>About us</Typography>
+          </Link>
         </Toolbar>
       </AppBar>
     );

diff --git a/english_to_ipa_translator/src/Components/ResultBox.js b/english_to_ipa_translator/src/Components/ResultBox.js
@@ -0,0 +1,24 @@
+import * as React from "react";
+import Card from "@material-ui/core/Card";
+import CardActions from "@material-ui/core/CardActions";
+import CardContent from "@material-ui/core/CardContent";
+import Typography from "@material-ui/core/Typography";
+import Button from "@material-ui/core/Button";
+import CardHeader from "@material-ui/core/CardHeader";
+import { NoWordsFound } from "./Notification";
+
+export default function ResultBox({ result, englishWord }) {
+  return (
+    <Card sx={{ width: 275 }}>
+      <CardHeader title={"Result"} />
+      <CardContent>
+        <Typography variant="h5" component="div">
+          {result ?? <NoWordsFound word={englishWord} />}
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <Button size="small">Learn More</Button>
+      </CardActions>
+    </Card>
+  );
+}
diff --git a/english_to_ipa_translator/src/Pages/Index.js b/english_to_ipa_translator/src/Pages/Index.js
@@ -7,6 +7,7 @@ import { getIPAData } from "../API/index";
 import { useState } from "react";
 import { Searching, NoWordsFound } from "../Components/Notification";
 import { makeStyles } from "@material-ui/core/styles";
+import ResultBox from "../Components/ResultBox";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -47,52 +48,47 @@ const Index = () => {
   };
 
   return (
-    <Container>
-      <Grid
-        container
-        spacing={0}
-        direction="column"
-        alignItems="center"
-        justify="center"
-        style={{ minHeight: "100vh" }}
+    <div
+      style={{
+        padding: "12px",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          width: "100%",
+          marginTop: "2%",
+        }}
       >
-        <div
-          style={{
-            display: "flex",
+        <Input
+          placeholder="English word"
+          label="English word"
+          id="standard-start-adornment"
+          onChange={(e) => {
+            setEnglishWord(e.target.value);
+            if (e.target.value) {
+              setIPAValue("");
+            }
           }}
+        />
+        <IconButton
+          type="submit"
+          className={classes.iconButton}
+          aria-label="search"
+          onClick={() => {
+            inputValue();
+          }}
+          onSubmit={inputValue}
         >
-          <Input
-            placeholder="English word"
-            label="English word"
-            id="standard-start-adornment"
-            onChange={(e) => {
-              setEnglishWord(e.target.value);
-              if (e.target.value) {
-                setIPAValue("");
-              }
-            }}
-          />
-          <IconButton
-            type="submit"
-            className={classes.iconButton}
-            aria-label="search"
-            onClick={() => {
-              inputValue();
-            }}
-            onSubmit={inputValue}
-          >
-            <SearchIcon />
-          </IconButton>
-        </div>
-
+          <SearchIcon />
+        </IconButton>
+      </div>
+      <div>
         {searchStatus && <Searching />}
-        {englishWord && (
-          <Typography variant="h3" gutterBottom>
-            {ipaValue === "" ? <NoWordsFound /> : ipaValue}
-          </Typography>
-        )}
-      </Grid>
-    </Container>
+        {ipaValue && <ResultBox result={ipaValue} englishWord={englishWord} />}
+      </div>
+    </div>
   );
 };
 

diff --git a/english_to_ipa_translator/src/index.js b/english_to_ipa_translator/src/index.js
@@ -1,14 +1,22 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+  },
+]);
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
 
 // If you want to start measuring performance in your app, pass a function