webster/wokapp-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

vocabularies

Browse source
This commit is contained in:
Kirill Ivlev 2024-12-20 13:36:13 +04:00
parent 5a1b7cf17e
commit 38cb6ad36a
5 changed files with 86 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
package-lock.json generated
View file

@ -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",

1
package.json
View file

@ -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"

4
src/components/UI/HeaderMenu.tsx
View file

@ -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>

17
src/routes/AddNewVocabulary.tsx
View file

@ -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>

2
src/routes/Home.tsx
View file

@ -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>