diff --git a/src/App.tsx b/src/App.tsx index 15975af..3140c3d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,6 +8,56 @@ import { AddShelf } from "./components/add-shelf/AddShelf"; import { CategoryDetails } from "./components/category-details/CategoryDetails"; import { ShelfDetails } from "./components/shelf-details/ShelfDetails"; +import { ReactComponent as BookMarkIcon } from './assets/icons/bookmark.svg'; +import { ReactComponent as PersonSpeakerIcon } from './assets/icons/user-speaker.svg'; +import { ReactComponent as BrainIcon } from './assets/icons/bx-brain.svg'; +import { ReactComponent as InternBadge } from './assets/icons/intern-badge.svg'; +import { ReactComponent as TimeIcon } from './assets/icons/time.svg'; + +import { IProfile } from "./structure/profile"; +import { ALL_WORDS } from "./data/all-words"; + + +export var userProfileData : IProfile = { + name: 'Neymar Jr', + image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSERA5Pm3aRBV7AaI8tvpZfzpD24ZgrU1_8NA&usqp=CAU', + medal: { + name: 'Intern badge', + minValue: 0, + maxValue: 100, + icon: + }, + categories: [{ + name: 'Vocabulary', + icon: , + shelves: [{ + name: 'All Words', + words: [ALL_WORDS[0], ALL_WORDS[1], ALL_WORDS[2], ALL_WORDS[3]], + revisedWords: [ALL_WORDS[1]], + description: 'All Words that I use on a daily basis', + viewPermission: 'PUBLIC' + }] + }, { + name: 'Books', + icon: , + shelves: [{ + name: 'Sapiens', + words: [ALL_WORDS[3]], + revisedWords: [ALL_WORDS[3]], + description: 'Sapiens book complex words', + viewPermission: 'PUBLIC' + }] + }, { + name: 'GRE', + icon: , + shelves: [] + }, { + name: 'ELTS', + icon: , + shelves: [] + }] +}; + function App() { return ( diff --git a/src/components/add-category/AddCategory.tsx b/src/components/add-category/AddCategory.tsx index bebf2fe..ac6da29 100644 --- a/src/components/add-category/AddCategory.tsx +++ b/src/components/add-category/AddCategory.tsx @@ -6,7 +6,7 @@ import { ReactComponent as TimeIcon } from '../../assets/icons/time.svg'; import { ReactComponent as TimerIcon } from '../../assets/icons/timer.svg'; import { ReactComponent as TextIcon } from '../../assets/icons/text.svg'; import { ICategory } from "../../structure/category"; -import { userProfileData } from "../home/Home"; +import { userProfileData } from "../../App"; type ownProps = { hidePopup: () => void diff --git a/src/components/add-shelf/AddShelf.module.scss b/src/components/add-shelf/AddShelf.module.scss index e26c08d..8cb6d0d 100644 --- a/src/components/add-shelf/AddShelf.module.scss +++ b/src/components/add-shelf/AddShelf.module.scss @@ -149,19 +149,19 @@ } } - &:nth-child(5n - 4) .icon { + &:nth-child(4n - 4) .icon { background-color: var(--orange); } - &:nth-child(5n - 3) .icon { + &:nth-child(4n - 3) .icon { background-color: var(--blue); } - &:nth-child(5n - 2) .icon { + &:nth-child(4n - 2) .icon { background-color: var(--red); } - &:nth-child(5n - 1) .icon { + &:nth-child(4n - 1) .icon { background-color: var(--teal); } } diff --git a/src/components/add-shelf/AddShelf.tsx b/src/components/add-shelf/AddShelf.tsx index 65b0c62..2ae5a18 100644 --- a/src/components/add-shelf/AddShelf.tsx +++ b/src/components/add-shelf/AddShelf.tsx @@ -3,8 +3,8 @@ import styles from './AddShelf.module.scss'; import { ReactComponent as CloseIcon } from '../../assets/icons/close.svg'; import { ReactComponent as PlusIcon } from '../../assets/icons/plus.svg'; import { ReactComponent as CheckCircle } from '../../assets/icons/check.svg'; -import { userProfileData } from "../home/Home"; import { IShelf } from "../../structure/shelf"; +import { userProfileData } from "../../App"; export const AddShelf: React.FC = () => { const [selectedCategoryIndex, setCategoryIndex] = useState(); diff --git a/src/components/add-word/AddWord.module.scss b/src/components/add-word/AddWord.module.scss index bedfb99..8cfda6d 100644 --- a/src/components/add-word/AddWord.module.scss +++ b/src/components/add-word/AddWord.module.scss @@ -233,19 +233,19 @@ align-items: center; margin: 0 0 2rem; - &:nth-child(5n - 4) .icon { + &:nth-child(4n - 4) .icon { background-color: var(--red); } - &:nth-child(5n - 3) .icon { + &:nth-child(4n - 3) .icon { background-color: var(--orange); } - &:nth-child(5n - 2) .icon { + &:nth-child(4n - 2) .icon { background-color: var(--blue); } - &:nth-child(5n - 1) .icon { + &:nth-child(4n - 1) .icon { background-color: var(--teal); } } diff --git a/src/components/add-word/AddWord.tsx b/src/components/add-word/AddWord.tsx index 45b0d86..d7a8687 100644 --- a/src/components/add-word/AddWord.tsx +++ b/src/components/add-word/AddWord.tsx @@ -7,8 +7,8 @@ import { ReactComponent as AddIcon } from '../../assets/icons/plus.svg'; import { IWord } from "../../structure/word"; import { ALL_WORDS } from "../../data/all-words"; -import { userProfileData } from "../home/Home"; import { NavLink } from "react-router-dom"; +import { userProfileData } from "../../App"; export const AddWord: React.FC = () => { const [searchWordResult, setSearchResult] = useState>([]); diff --git a/src/components/categories/Categories.module.scss b/src/components/categories/Categories.module.scss index 684287d..c61b183 100644 --- a/src/components/categories/Categories.module.scss +++ b/src/components/categories/Categories.module.scss @@ -145,19 +145,19 @@ $block-padding: 2.5rem 2rem; justify-content: space-between; align-items: center; - &:nth-child(5n - 4) .icon { + &:nth-child(4n - 4) .icon { background-color: var(--orange); } - &:nth-child(5n - 3) .icon { + &:nth-child(4n - 3) .icon { background-color: var(--blue); } - &:nth-child(5n - 2) .icon { + &:nth-child(4n - 2) .icon { background-color: var(--red); } - &:nth-child(5n - 1) .icon { + &:nth-child(4n - 1) .icon { background-color: var(--teal); } } diff --git a/src/components/categories/Categories.tsx b/src/components/categories/Categories.tsx index e9d20ab..e806d28 100644 --- a/src/components/categories/Categories.tsx +++ b/src/components/categories/Categories.tsx @@ -3,11 +3,10 @@ import styles from './Categories.module.scss'; import { ReactComponent as LogoIcon } from '../../assets/icons/anamnesis.svg'; import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg'; import { ReactComponent as PlusCircledIcon } from '../../assets/icons/plus-circle.svg'; - -import { userProfileData } from "../home/Home"; import { NavLink } from "react-router-dom"; import { ICategory } from "../../structure/category"; import { AddCategory } from "../add-category/AddCategory"; +import { userProfileData } from "../../App"; export const Categories: React.FC = () => { const [categoryResult, setCategories] = useState>(userProfileData.categories); @@ -36,7 +35,7 @@ export const Categories: React.FC = () => {

Categories

-

4 Types

+

{ userProfileData.categories.length } Types

diff --git a/src/components/category-details/CategoryDetails.module.scss b/src/components/category-details/CategoryDetails.module.scss index a8793e5..d65166e 100644 --- a/src/components/category-details/CategoryDetails.module.scss +++ b/src/components/category-details/CategoryDetails.module.scss @@ -80,19 +80,19 @@ border-radius: 3rem; padding: 1.5rem; - &:nth-child(5n - 1) { + &:nth-child(4n - 1) { background-color: var(--orange); } - &:nth-child(5n - 2) { + &:nth-child(4n - 2) { background-color: var(--blue); } - &:nth-child(5n - 3) { + &:nth-child(4n - 3) { background-color: var(--teal); } - &:nth-child(5n - 4) { + &:nth-child(4n - 4) { background-color: var(--red); } } diff --git a/src/components/category-details/CategoryDetails.tsx b/src/components/category-details/CategoryDetails.tsx index aa8af4e..16d9e92 100644 --- a/src/components/category-details/CategoryDetails.tsx +++ b/src/components/category-details/CategoryDetails.tsx @@ -7,11 +7,11 @@ import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.s import { ReactComponent as MoreIcon } from '../../assets/icons/more-alt.svg'; import { ReactComponent as PlusCircledIcon } from '../../assets/icons/plus-circle.svg'; -import { userProfileData } from "../home/Home"; import { CircularProgressbar } from "react-circular-progressbar"; import { NavLink } from "react-router-dom"; import { IShelf } from "../../structure/shelf"; import { useHistory } from "react-router-dom"; +import { userProfileData } from "../../App"; export const CategoryDetails: React.FC = () => { const location = useLocation(); diff --git a/src/components/home/Home.module.scss b/src/components/home/Home.module.scss index 4d87e0c..a678df6 100644 --- a/src/components/home/Home.module.scss +++ b/src/components/home/Home.module.scss @@ -161,19 +161,19 @@ $block-padding: 0 2rem; align-items: center; margin: 2rem 0; - &:nth-child(5n - 4) .icon { + &:nth-child(4n - 4) .icon { background-color: var(--red); } - &:nth-child(5n - 3) .icon { + &:nth-child(4n - 3) .icon { background-color: var(--orange); } - &:nth-child(5n - 2) .icon { + &:nth-child(4n - 2) .icon { background-color: var(--blue); } - &:nth-child(5n - 1) .icon { + &:nth-child(4n - 1) .icon { background-color: var(--teal); } } @@ -255,19 +255,19 @@ $block-padding: 0 2rem; border-radius: 3rem; padding: 1.5rem; - &:nth-child(5n - 4) { + &:nth-child(4n - 4) { background-color: var(--orange); } - &:nth-child(5n - 3) { + &:nth-child(4n - 3) { background-color: var(--blue); } - &:nth-child(5n - 2) { + &:nth-child(4n - 2) { background-color: var(--red); } - &:nth-child(5n - 1) { + &:nth-child(4n - 1) { background-color: var(--teal); } } @@ -305,19 +305,19 @@ $block-padding: 0 2rem; align-items: center; margin: 2rem 0; - &:nth-child(5n - 4) .icon { + &:nth-child(4n - 4) .icon { background-color: var(--orange); } - &:nth-child(5n - 3) .icon { + &:nth-child(4n - 3) .icon { background-color: var(--blue); } - &:nth-child(5n - 2) .icon { + &:nth-child(4n - 2) .icon { background-color: var(--red); } - &:nth-child(5n - 1) .icon { + &:nth-child(4n - 1) .icon { background-color: var(--teal); } } diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx index d5ec020..25dd812 100644 --- a/src/components/home/Home.tsx +++ b/src/components/home/Home.tsx @@ -3,7 +3,6 @@ import styles from './Home.module.scss'; import { ReactComponent as LogoIcon } from '../../assets/icons/anamnesis.svg'; import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg'; import { ReactComponent as BookIcon } from '../../assets/icons/readme.svg'; -import { ReactComponent as BookMarkIcon } from '../../assets/icons/bookmark.svg'; import { ReactComponent as BookShelfIcon } from '../../assets/icons/bookshelf.svg'; import { ReactComponent as CalendarIcon } from '../../assets/icons/bx-calendar.svg'; import { ReactComponent as TimeIcon } from '../../assets/icons/time.svg'; @@ -12,54 +11,11 @@ import { ReactComponent as CheckCircleIcon } from '../../assets/icons/check-circ import { ReactComponent as ExpandIcon } from '../../assets/icons/expand.svg'; import { ReactComponent as PlusIcon } from '../../assets/icons/plus.svg'; import { ReactComponent as GridIcon } from '../../assets/icons/circled.svg'; -import { ReactComponent as PersonSpeakerIcon } from '../../assets/icons/user-speaker.svg'; -import { ReactComponent as BrainIcon } from '../../assets/icons/bx-brain.svg'; -import { ReactComponent as InternBadge } from '../../assets/icons/intern-badge.svg'; import { CircularProgressbar } from 'react-circular-progressbar'; -import { IProfile } from "../../structure/profile"; import { NavLink } from "react-router-dom"; import { AddCategory } from "../add-category/AddCategory"; import { useHistory } from "react-router-dom"; - -export var userProfileData : IProfile = { - name: 'Neymar Jr', - image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSERA5Pm3aRBV7AaI8tvpZfzpD24ZgrU1_8NA&usqp=CAU', - medal: { - name: 'Intern badge', - minValue: 0, - maxValue: 100, - icon: - }, - categories: [{ - name: 'Vocabulary', - icon: , - shelves: [{ - name: 'All Words', - words: [], - revisedWords: [], - description: 'All Words that I use on a daily basis', - viewPermission: 'PUBLIC' - }] - }, { - name: 'Books', - icon: , - shelves: [{ - name: 'Sapiens', - words: [], - revisedWords: [], - description: 'Sapiens book complex words', - viewPermission: 'PUBLIC' - }] - }, { - name: 'GRE', - icon: , - shelves: [] - }, { - name: 'ELTS', - icon: , - shelves: [] - }] -}; +import { userProfileData } from "../../App"; export const Home: React.FC = () => { const [isAddCategoryPopupOpen, setAddCategoryPopupState] = useState(false); diff --git a/src/components/shelf-details/ShelfDetails.tsx b/src/components/shelf-details/ShelfDetails.tsx index 906d4a2..f301198 100644 --- a/src/components/shelf-details/ShelfDetails.tsx +++ b/src/components/shelf-details/ShelfDetails.tsx @@ -1,14 +1,18 @@ import React from "react"; import styles from './ShelfDetails.module.scss'; import { ReactComponent as ChevronLeft } from '../../assets/icons/chevron-left.svg'; -import { userProfileData } from "../home/Home"; import { useLocation } from "react-router-dom"; import queryString from 'query-string'; +import { ICategory } from "../../structure/category"; +import { IShelf } from "../../structure/shelf"; +import { userProfileData } from "../../App"; export const ShelfDetails: React.FC = () => { const location = useLocation(); - const category_id: any = queryString.parse(location.pathname)['/category-details/category_id']; + const category_id: any = queryString.parse(location.pathname)['/shelf-details/category_id']; const shelf_id: any = queryString.parse(location.pathname)['shelf_id']; + const category: ICategory = userProfileData.categories[category_id]; + const shelf: IShelf = category.shelves[shelf_id]; return
@@ -16,12 +20,18 @@ export const ShelfDetails: React.FC = () => { -
Shelves
+
{ category.name }
{/* eslint-disable-next-line */} profile-image
+ +
+

{ shelf.name }

+

{ shelf.words.length }

+
+
} \ No newline at end of file diff --git a/src/data/all-words.ts b/src/data/all-words.ts index 833f075..576a77b 100644 --- a/src/data/all-words.ts +++ b/src/data/all-words.ts @@ -24,4 +24,28 @@ export const ALL_WORDS: Array = [{ description: 'used in polite requests or questions.' }], similarWords: ['Nice', 'Agreeable', 'Pleasant', 'Satisfying', 'Gratifying'], +}, { + name: 'Prudent', + pronounciation: '/ˈpruːd(ə)nt/', + audioPronounciationURL: '', + grammaticalDetails: [{ + typeName: 'ADJECTIVE', + description: 'acting with or showing care and thought for the future.' + }], + similarWords: ['Wise', 'Well judged', 'Judicious', 'Sage', 'Shrewd'], +}, { + name: 'Ping', + pronounciation: '/pɪŋ/', + audioPronounciationURL: '', + grammaticalDetails: [{ + typeName: 'NOUN', + description: 'a short, high-pitched ringing sound.' + }, { + typeName: 'VERB', + description: 'query (another computer on a network) to determine whether there is a connection to it.' + }, { + typeName: 'VERB', + description: 'make or cause to make a short, high-pitched ringing sound.' + }], + similarWords: [''], }] \ No newline at end of file