vocabularies

package-lock.json

@@ -8,6 +8,9 @@
       "name": "wokapp-ui",
       "version": "0.0.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "axios": "^1.7.9",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -2156,6 +2159,52 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
+      "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz",
+      "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -6251,7 +6300,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -6713,6 +6761,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -6821,6 +6880,12 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",

package.json

@@ -11,6 +11,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "axios": "^1.7.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/components/NoVocabularies.tsx

@@ -0,0 +1,8 @@
+export const NoVocabularies = () => {
+  return <>
+    <h1 className={"text-2xl"}>
+      Oh, no!
+    </h1>
+    <p>Looks like you don't have any vocabularies in you account. Add a new one?</p>
+  </>
+}

src/components/UI/HeaderMenu.tsx

@@ -1,5 +1,8 @@
 import {useAuth} from "../../context/AuthContext.tsx";
 import {useNavigate} from "react-router-dom";
+import mainLogo from "../../assets/logo.png";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faSignOut} from "@fortawesome/free-solid-svg-icons";
 
 const HeaderMenu = () => {
     const auth = useAuth()
@@ -9,12 +12,18 @@ const HeaderMenu = () => {
         navigate('/');
     }
     return <>
-        <div className={"flex p-1"}>
+        <div className={"flex p-1 justify-between"}>
-            <div className={"grow"}>
+            <div className={"flex items-center"}>
-                Menu will be placed here
+                <div className={"w-16 h-16 lg:w-32 lg:h-32"}>
+                    <img className={""} src={mainLogo} alt={"logo"}/>
+                </div>
+
+            </div>
+            <div className={"grow hidden lg:flex items-center sm:hidden md:hidden"}>
+                <p>Menu will be placed here</p>
             </div>
             <div>
-                <a onClick={logout} className={"underline cursor-pointer"}>Logout</a>
+                <a onClick={logout} className={"cursor-pointer no-underline"}><FontAwesomeIcon icon={ faSignOut }/></a>
             </div>
         </div>
     </>

src/routes/Home.tsx

@@ -1,18 +1,25 @@
 import HeaderMenu from "../components/UI/HeaderMenu.tsx";
 import {useEffect, useState} from "react";
 import api from "../api.tsx";
+import {LanguageEntity} from "../types/LanguageEntity.ts";
+import {NoVocabularies} from "../components/NoVocabularies.tsx";
 
 function Home() {
-  const [message,setMessage] = useState('');
+  const [languageEntity, setLanguageEntity] = useState<LanguageEntity[]>([]);
   useEffect(() => {
-    api.get('test/hello').then((response) => {
+    api.get<LanguageEntity[]>('vocabulary').then((response) => {
-      setMessage(response.data.message);
+      console.log(response.data);
+      setLanguageEntity(response.data);
     })
-  }, [message])
+  }, [])
   return <>
     <HeaderMenu />
-    { message }
+
-    <h1 className="font-bold underline">Home</h1>
+    <div className={"container m-1 lg:m-5"}>
+      <h1 className="font-bold text-5xl">Welcome</h1>
+      {languageEntity.length === 0 && <NoVocabularies />}
+    </div>
+
   </>
 }
 

src/types/LanguageEntity.ts

@@ -0,0 +1,5 @@
+export interface LanguageEntity {
+  id: string;
+  name: string;
+  isoCode: string;
+}