From 38cb6ad36a0d4571270a1959821c210de910ae23 Mon Sep 17 00:00:00 2001
From: Kirill Ivlev <kirill@ngweb.io>
Date: Fri, 20 Dec 2024 13:36:13 +0400
Subject: [PATCH] vocabularies

---
 package-lock.json                | 72 ++++++++++++++++++++++++++++++++
 package.json                     |  1 +
 src/components/UI/HeaderMenu.tsx |  4 +-
 src/routes/AddNewVocabulary.tsx  | 17 ++++----
 src/routes/Home.tsx              |  2 +-
 5 files changed, 86 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 32653b8..57036ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.7.2",
         "@fortawesome/react-fontawesome": "^0.2.2",
         "axios": "^1.7.9",
+        "motion": "^11.15.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-router-dom": "^7.0.2"
@@ -4889,6 +4890,33 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.15.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.15.0.tgz",
+      "integrity": "sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^11.14.3",
+        "motion-utils": "^11.14.3",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -6201,6 +6229,44 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion": {
+      "version": "11.15.0",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-11.15.0.tgz",
+      "integrity": "sha512-iZ7dwADQJWGsqsSkBhNHdI2LyYWU+hA1Nhy357wCLZq1yHxGImgt3l7Yv0HT/WOskcYDq9nxdedyl4zUv7UFFw==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^11.15.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "11.14.3",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.14.3.tgz",
+      "integrity": "sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA==",
+      "license": "MIT"
+    },
+    "node_modules/motion-utils": {
+      "version": "11.14.3",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.14.3.tgz",
+      "integrity": "sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -8158,6 +8224,12 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/turbo-stream": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
diff --git a/package.json b/package.json
index 3371c57..f83f2df 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "axios": "^1.7.9",
+    "motion": "^11.15.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.0.2"
diff --git a/src/components/UI/HeaderMenu.tsx b/src/components/UI/HeaderMenu.tsx
index 70a7d8b..cb42c53 100644
--- a/src/components/UI/HeaderMenu.tsx
+++ b/src/components/UI/HeaderMenu.tsx
@@ -15,9 +15,9 @@ const HeaderMenu = () => {
         navigate('/');
     }
     return <>
-        <div className={"flex p-1 justify-between"}>
+        <div className={"flex p-1 justify-between bg-gray-200 dark:bg-sky-900"}>
             <div className={"flex items-center"}>
-                <div className={"w-16 h-16 lg:w-32 lg:h-32"}>
+                <div className={"w-8 h-8 lg:w-16 lg:h-16"}>
                     <img className={""} src={mainLogo} alt={"logo"}/>
                 </div>
 
diff --git a/src/routes/AddNewVocabulary.tsx b/src/routes/AddNewVocabulary.tsx
index 5a82c6c..11a1eca 100644
--- a/src/routes/AddNewVocabulary.tsx
+++ b/src/routes/AddNewVocabulary.tsx
@@ -2,6 +2,7 @@ import HeaderMenu from "../components/UI/HeaderMenu.tsx";
 import {useEffect, useState} from "react";
 import {LanguageEntity} from "../types/LanguageEntity.ts";
 import api from "../api.tsx";
+import { motion } from "motion/react";
 
 const AddNewVocabulary = () => {
   type SelectableLanguageEntity = LanguageEntity & { selectedAsPrimary: boolean, selectedAsSecondary: boolean };
@@ -33,29 +34,31 @@ const AddNewVocabulary = () => {
       })
     })
   }
+  const btnClasses = "w-full text-left p-2 m-2 hover:bg-slate-300 rounded disabled disabled:cursor-not-allowed disabled:opacity-40 cursor-pointer ";
 
   return <>
     <HeaderMenu />
-    <div className={"container m-1 flex"}>
+    <div className={"container mx-auto flex flex-wrap sm:m-2"}>
+
       <div className={"basis-1/3"}>
         I know:
           { languages.map(language => (
-          <button key={language.id} onClick={() => selectLanguage('primary', language.id)}
+          <motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.9 }} key={language.id} onClick={() => selectLanguage('primary', language.id)}
                   disabled={language.selectedAsSecondary}
-              className={"w-full text-left p-2 m-2 hover:bg-slate-500 rounded cursor-pointer " + (language.selectedAsPrimary ? 'bg-indigo-600' : '')}>
+              className={btnClasses + (language.selectedAsPrimary ? 'bg-indigo-600 text-white' : '')}>
             { language.name}
-          </button>
+          </motion.button>
         ))}
       </div>
       <div className={"basis-1/3"}>
         I'm learning
         <div className={"block"}>
           { languages.map(language => (
-            <button key={language.id}
+            <motion.button whileHover={{ scale: 1.05 }} key={language.id}
                     onClick={() => selectLanguage('secondary', language.id)}
                     disabled={language.selectedAsPrimary}
-                    className={"w-full text-left p-2 m-2 hover:bg-slate-500 rounded disabled:cursor-not-allowed disabled:text-gray-50 " +
-                      (language.selectedAsSecondary ? 'bg-indigo-600' : '')}>{ language.name}</button>
+                    className={btnClasses +
+                      (language.selectedAsSecondary ? 'bg-indigo-600' : '')}>{ language.name}</motion.button>
           ))}
         </div>
       </div>
diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx
index 9afb7eb..9b638cc 100644
--- a/src/routes/Home.tsx
+++ b/src/routes/Home.tsx
@@ -15,7 +15,7 @@ function Home() {
   return <>
     <HeaderMenu />
 
-    <div className={"container m-1 lg:m-5"}>
+    <div className={"container mx-auto"}>
       <h1 className="font-bold text-5xl">Welcome</h1>
       {languageEntity.length === 0 && <NoVocabularies />}
     </div>