From 93a45764a41e8df0ec621e7beff830fc9ab0bb17 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Tue, 20 Jul 2021 17:30:22 +0530 Subject: [PATCH] Add word to shelf UI --- src/components/add-word/AddWord.module.scss | 114 ++++++++++- src/components/add-word/AddWord.tsx | 32 +++- src/components/home/Home.tsx | 198 ++++++++------------ src/data/all-medals.ts | 8 - src/structure/category.ts | 2 +- src/structure/medals.ts | 2 +- src/structure/shelf.ts | 1 + 7 files changed, 222 insertions(+), 135 deletions(-) delete mode 100644 src/data/all-medals.ts diff --git a/src/components/add-word/AddWord.module.scss b/src/components/add-word/AddWord.module.scss index 003bf01..b3f35d0 100644 --- a/src/components/add-word/AddWord.module.scss +++ b/src/components/add-word/AddWord.module.scss @@ -107,8 +107,9 @@ position: relative; overflow: hidden; border-radius: 2rem; - padding: 1rem 1.5rem; + padding: 1rem 1.5rem 1.7rem; margin-bottom: 1.5rem; + background-color: white; &:nth-child(2n) { &::before { @@ -121,6 +122,10 @@ color: var(--teal); } } + + button { + background-color: var(--teal); + } } .description { @@ -128,6 +133,10 @@ color: var(--teal); } } + + .addButton { + background-color: var(--teal); + } } &::before { @@ -138,7 +147,7 @@ width: 100%; height: 100%; background-color: var(--orange); - opacity: 0.3; + opacity: 0.4; } &>* { @@ -205,7 +214,7 @@ margin-left: auto; border: none; border-radius: 3rem; - height: 3rem; + height: 2.7rem; cursor: pointer; display: flex; align-items: center; @@ -221,4 +230,103 @@ } } } +} + +.shelfList { + list-style: none; + padding: 1rem 2rem; + + header { + margin: 0 auto 1rem; + h5 { + font-weight: 300; + font-size: 1.2rem; + color: var(--black); + } + } + + li { + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 0 2rem; + + &:nth-child(3n) .icon { + background-color: var(--red); + } + + &:nth-child(3n - 1) .icon { + background-color: var(--orange); + } + + &:nth-child(3n - 2) .icon { + background-color: var(--blue); + } + } + + .icon { + width: 4rem; + height: 4rem; + background-color: var(--grey); + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + + svg { + fill: white; + width: 3rem; + } + } + + .info { + width: calc(100% - 5rem); + + label, span { + display: block; + } + + label { + font-size: 1.2rem; + color: var(--black); + font-weight: 700; + } + + span { + font-size: 1rem; + color: var(--grey); + } + } +} + +.AddShelfButton { + position: fixed; + bottom: 0; + left: 0; + padding: 2rem 3rem; + display: flex; + align-items: center; + justify-content: flex-start; + width: 100%; + background-color: var(--creamy-white); + border: none; + box-shadow: 0px 0px 5px var(--creamy-white); + font-weight: 600; + color: var(--black); + + span { + width: 3rem; + height: 3rem; + background-color: var(--teal); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-right: 1.5rem; + + svg { + fill: white; + width: 1.2rem; + } + } } \ No newline at end of file diff --git a/src/components/add-word/AddWord.tsx b/src/components/add-word/AddWord.tsx index 40770c8..5d41122 100644 --- a/src/components/add-word/AddWord.tsx +++ b/src/components/add-word/AddWord.tsx @@ -7,13 +7,16 @@ 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"; + type OwnProps = { - hideModal: () => void; + hideModal: () => void }; export const AddWord: React.FC = (props: OwnProps) => { const [searchResult, setSearchResult] = useState>([]); + const [selectedWord, setSelectedWord] = useState(); const searchWords = (searchWord: string) => { if (searchWord.length > 0) { @@ -48,7 +51,7 @@ export const AddWord: React.FC = (props: OwnProps) => {
    - { searchResult.map((word) => { + { !selectedWord && searchResult.map((word) => { return

  • { word.name } { word.pronounciation }

    @@ -60,9 +63,32 @@ export const AddWord: React.FC = (props: OwnProps) => { { word.grammaticalDetails[0].typeName }

    { word.grammaticalDetails[0].description }

    - +
    • }) }
+ + { selectedWord &&
    +
    +
    All Shelves
    +
    + { userProfileData.categories.map((category, categoryIndex) => { + return category.shelves.map((shelf, shelfIndex) => { + return
  • { + userProfileData.categories[categoryIndex].shelves[shelfIndex].words.push(selectedWord); + }}> +
    + { category.icon } +
    +
    + + { category.name } +
    +
    • + }) + }) } + + +
} } \ No newline at end of file diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx index da557aa..54bfde6 100644 --- a/src/components/home/Home.tsx +++ b/src/components/home/Home.tsx @@ -17,11 +17,52 @@ 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 { AddWord } from "../add-word/AddWord"; +import { IProfile } from "../../structure/profile"; +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: [] + }] +}; + export const Home: React.FC = () => { const [isAddWordModalOpen, setAddWordModalState] = useState(false); - + return
@@ -42,8 +83,8 @@ export const Home: React.FC = () => { }} } /> {/* eslint-disable-next-line */} - profile-image - + profile-image + { userProfileData.medal.icon }

Neymar Junior

@@ -118,86 +159,30 @@ export const Home: React.FC = () => {
    -
  • -
    - - - 30% -
    -
    All Words
    -

    Vocabulary

    -

    1.2K Words

    -
    • -
  • -
    - - - 50% -
    -
    IELTS Fundamentals
    -

    IELTS

    -

    250 Words

    -
    • -
  • -
    - - - 10% -
    -
    GRE Fundamentals
    -

    GRE

    -

    456 Words

    -
    • -
  • -
    - - - 25% -
    -
    Sapiens
    -

    Book

    -

    125 Words

    -
    • + { userProfileData.categories.map(category => { + return category.shelves.map(shelf => { + return
  • +
    + 0 ? (shelf.revisedWords.length * 100/ shelf.words.length) : 0} strokeWidth={7} + styles={{ + path: { + stroke: 'white', + strokeLinecap: 'round', + }, + trail: { + stroke: 'rgba(255, 255, 255, 0.25)', + strokeLinecap: 'round', + }} + } /> + + { shelf.words.length > 0 ? (shelf.revisedWords.length * 100/ shelf.words.length) : 0 }% +
    +
    { category.name }
    +

    { shelf.name }

    +

    { shelf.words.length } words

    +
    • + }) + }) }
@@ -215,42 +200,17 @@ export const Home: React.FC = () => {
    -
  • -
    - -
    -
    - - 5 Shelves -
    -
    • -
  • -
    - -
    -
    - - 3 Shelves -
    -
    • -
  • -
    - -
    -
    - - 5 Shelves -
    -
    • -
  • -
    - -
    -
    - - 2 Shelves -
    -
    • + { userProfileData.categories.map(category => { + return
  • +
    + { category.icon } +
    +
    + + { category.shelves.length } Shelves +
    +
    • + })}
diff --git a/src/data/all-medals.ts b/src/data/all-medals.ts deleted file mode 100644 index bf37f44..0000000 --- a/src/data/all-medals.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { IMedal } from "../structure/medals"; - -export const ALL_MEDALS: Array = [{ - name: 'Intern', - minValue: 0, - maxValue: 100, - icon: '' -}] \ No newline at end of file diff --git a/src/structure/category.ts b/src/structure/category.ts index 8ffcd2f..b7ed70e 100644 --- a/src/structure/category.ts +++ b/src/structure/category.ts @@ -2,6 +2,6 @@ import { IShelf } from "./shelf"; export type ICategory = { name: string, - icon: string, + icon: JSX.Element, shelves: Array }; \ No newline at end of file diff --git a/src/structure/medals.ts b/src/structure/medals.ts index dbc81a7..2043a3e 100644 --- a/src/structure/medals.ts +++ b/src/structure/medals.ts @@ -2,5 +2,5 @@ export type IMedal = { name: string, minValue: number, maxValue: number, - icon: string, + icon: JSX.Element, }; \ No newline at end of file diff --git a/src/structure/shelf.ts b/src/structure/shelf.ts index 37c6697..74a264a 100644 --- a/src/structure/shelf.ts +++ b/src/structure/shelf.ts @@ -1,6 +1,7 @@ import { IWord } from "./word"; export type IShelf = { + name: string, words: Array, revisedWords: Array, description: string,