diff --git a/src/App.tsx b/src/App.tsx index 3140c3d..6508533 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,6 +16,7 @@ import { ReactComponent as TimeIcon } from './assets/icons/time.svg'; import { IProfile } from "./structure/profile"; import { ALL_WORDS } from "./data/all-words"; +import { WordDetails } from "./components/word-details/WordDetails"; export var userProfileData : IProfile = { @@ -32,7 +33,14 @@ export var userProfileData : IProfile = { icon: , shelves: [{ name: 'All Words', - words: [ALL_WORDS[0], ALL_WORDS[1], ALL_WORDS[2], ALL_WORDS[3]], + words: [{ + ...ALL_WORDS[0], + tag: 'New Word', + notes: ['Weird words but understandable for a newb'] + }, { + ...ALL_WORDS[1], + tag: 'Learning' + }, ALL_WORDS[2], ALL_WORDS[3]], revisedWords: [ALL_WORDS[1]], description: 'All Words that I use on a daily basis', viewPermission: 'PUBLIC' @@ -68,6 +76,7 @@ function App() { + diff --git a/src/components/shelf-details/ShelfDetails.module.scss b/src/components/shelf-details/ShelfDetails.module.scss index fe5d320..777352b 100644 --- a/src/components/shelf-details/ShelfDetails.module.scss +++ b/src/components/shelf-details/ShelfDetails.module.scss @@ -254,6 +254,12 @@ color: var(--orange); } } + + .tag { + &::before { + background-color: var(--orange); + } + } } &:nth-child(4n - 3) { @@ -278,6 +284,12 @@ color: var(--teal); } } + + .tag { + &::before { + background-color: var(--teal); + } + } } &:nth-child(4n - 2) { @@ -302,6 +314,12 @@ color: var(--blue); } } + + .tag { + &::before { + background-color: var(--blue); + } + } } @@ -327,6 +345,12 @@ color: var(--red); } } + + .tag { + &::before { + background-color: var(--red); + } + } } &::before { @@ -344,6 +368,28 @@ position: relative; } + .tag { + background-color: transparent; + padding: 0.2rem 0.5rem; + color: var(--grey); + font-size: 1.4rem; + font-weight: 300; + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: var(--orange); + opacity: 0.2; + border-radius: 0.8rem; + } + } + header { display: flex; align-items: flex-start; diff --git a/src/components/shelf-details/ShelfDetails.tsx b/src/components/shelf-details/ShelfDetails.tsx index 279772c..c42cd7b 100644 --- a/src/components/shelf-details/ShelfDetails.tsx +++ b/src/components/shelf-details/ShelfDetails.tsx @@ -1,7 +1,6 @@ import React, { useState } from "react"; import styles from './ShelfDetails.module.scss'; -import { ReactComponent as ChevronLeft } from '../../assets/icons/chevron-left.svg'; -import { NavLink, useLocation } from "react-router-dom"; +import { NavLink, useHistory, useLocation } from "react-router-dom"; import queryString from 'query-string'; import { ICategory } from "../../structure/category"; import { IShelf } from "../../structure/shelf"; @@ -10,6 +9,7 @@ import { ReactComponent as BookIcon } from '../../assets/icons/book-sharp.svg'; import { ReactComponent as MoreIcon } from '../../assets/icons/more-alt.svg'; import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg'; import { ReactComponent as SpeakerIcon } from '../../assets/icons/speaker.svg'; +import { ReactComponent as ChevronLeft } from '../../assets/icons/chevron-left.svg'; import { IWord } from "../../structure/word"; export const ShelfDetails: React.FC = () => { @@ -20,6 +20,7 @@ export const ShelfDetails: React.FC = () => { const shelf: IShelf = category.shelves[shelf_id]; const [searchWordResult, setSearchResult] = useState>(shelf.words); const [selectedSegment, setSelectedSegment] = useState<'WORDS' | 'ABOUT'>('WORDS'); + const history = useHistory(); const searchWords = (searchWord: string) => { if (searchWord.length > 0) { @@ -86,8 +87,11 @@ export const ShelfDetails: React.FC = () => { { selectedSegment === 'WORDS' &&
    - { searchWordResult.map((word) => { - return
  • + { searchWordResult.map((word, index) => { + return
  • { + history.push('/word-details/category_id=' + category_id + '&&shelf_id=' + shelf_id + '&&word_id=' + index); + }}> + { word.tag && {word.tag} }

    { word.name } { word.pronounciation }

    + +
    { shelf.name }
    + +
    + {/* eslint-disable-next-line */} + profile-image +
    +
    + +
    + { word.tag && { word.tag } } +
    + +

    { word.name } { word.pronounciation }

    + +
    + +
      + { word.grammaticalDetails.map((detail, index) => { + return
    • +
      { detail.typeName }
      +

      { detail.description }

      + { detail.sentence &&

      "{ detail.sentence }"

      } +
      • + }) } + { word.similarWords.length > 0 &&
    • +
      Similar:
      +
      + { word.similarWords.map((similarWord, index) => ) } +
      +
      • } +
    +
    + +
    +
    +
    My Notes:
    + +
    + { word.notes &&
      + { word.notes.map((note, index) =>
    1. {note}
      2. ) } +
    } +
    + + + { showAddWord &&
    +
    setShowAddWord(false)}>
    +
    +
    + +
    Add Category
    +
    +
    + + + +
    +
    +
    } + + +} \ No newline at end of file diff --git a/src/data/all-words.ts b/src/data/all-words.ts index 576a77b..db59619 100644 --- a/src/data/all-words.ts +++ b/src/data/all-words.ts @@ -9,7 +9,8 @@ export const ALL_WORDS: Array = [{ description: 'a feeling of happy satisfaction and enjoyment.' }, { typeName: 'ADJECTIVE', - description: 'used or intended for entertainment rather than business.' + description: 'used or intended for entertainment rather than business.', + sentence: 'She smiled with pleasure at being praised' }], similarWords: ['Happiness', 'Delight', 'Joy', 'Rapture', 'Glee'], }, { @@ -47,5 +48,5 @@ export const ALL_WORDS: Array = [{ typeName: 'VERB', description: 'make or cause to make a short, high-pitched ringing sound.' }], - similarWords: [''], + similarWords: [], }] \ No newline at end of file diff --git a/src/index.css b/src/index.css index 0f36757..1b2ceb6 100644 --- a/src/index.css +++ b/src/index.css @@ -9,6 +9,11 @@ font-family: 'Poppins', sans-serif; } +*:disabled { + opacity: 0.5; + pointer-events: none; +} + h1, h2, h3, h4, h5, h6 { font-weight: 600; } diff --git a/src/structure/word.ts b/src/structure/word.ts index 7e7c634..354c1eb 100644 --- a/src/structure/word.ts +++ b/src/structure/word.ts @@ -2,9 +2,12 @@ export type IWord = { name: string, pronounciation: string, audioPronounciationURL: string, + tag? : string, + notes? : Array, grammaticalDetails: Array<{ typeName: 'NOUN' | 'ADJECTIVE' | 'VERB' | 'ADVERB', description: string, + sentence?: string, }>, similarWords: Array } \ No newline at end of file