From f3f15f2b2382256211f4c14104785f96a2b9bdd7 Mon Sep 17 00:00:00 2001 From: Alfredo Sanzo Date: Wed, 25 Oct 2023 18:37:41 -0300 Subject: [PATCH] New Book View alive --- public/imagenes/book-background.svg | 1173 +++++++++++++++++++++++++++ src/components/book/BookView.tsx | 82 +- 2 files changed, 1233 insertions(+), 22 deletions(-) create mode 100644 public/imagenes/book-background.svg diff --git a/public/imagenes/book-background.svg b/public/imagenes/book-background.svg new file mode 100644 index 00000000..d3cb6448 --- /dev/null +++ b/public/imagenes/book-background.svg @@ -0,0 +1,1173 @@ + + + +image/svg+xml + +Elementos-Scroll-App + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/book/BookView.tsx b/src/components/book/BookView.tsx index ac5b9911..50ec9851 100644 --- a/src/components/book/BookView.tsx +++ b/src/components/book/BookView.tsx @@ -1,4 +1,4 @@ -import { Stack, Typography } from "@mui/material"; +import { Divider, Stack, Typography } from "@mui/material"; import { useParams } from "react-router-dom"; import { Book, getBook } from "../../staticData/books"; import { Header } from "../header/Header"; @@ -7,6 +7,10 @@ import { Link } from "react-router-dom"; import { useTranslation } from "react-i18next"; import { PBreadcrumbs } from "../PBreadcrumbs"; import { Challenge } from "../../staticData/challenges"; +import { Chapter } from "../../staticData/chapters"; +import { Group } from "../../staticData/groups"; +import { PBCard } from "../PBCard"; +import { useThemeContext } from "../../theme/ThemeContext"; const Breadcrumb = (book: Book) => { const {t} = useTranslation("books") @@ -26,35 +30,69 @@ const Breadcrumb = (book: Book) => { export const BookView = () => { const {id} = useParams() const book: Book = getBook(Number(id)) + const {t} = useTranslation("books") + const {theme} = useThemeContext() return <>
- + + + + {t(`${book.id}.title`)} + {book.chapters.map( chapter => )} + + + } -const ChallengeList = ({book}: {book: Book}) => { - const {t} = useTranslation("books") - return - {t(`${book.id}.title`)} - {book.chapters.map( chapter => - {t(`chapters.${chapter.id}.title`)} - {chapter.groups.map( group => { - var groupTitle = t(`groups.${group.id}.title`) - return - {groupTitle && {groupTitle}} - - {group.challenges.map( challenge => - - )} - - - })} - )} - +const ChapterView = ({chapter}: {chapter: Chapter}) => { + const {t} = useTranslation("chapters") + const {theme} = useThemeContext() + const Groups = () => <>{chapter.groups.map( group => )} + return <> + + {t(`${chapter.id}.title`)} + { // We stack in a row unitary groups (for intermediate and advanced books) + chapter.groups[0].hasOnlyOneChallenge() ? + : + + } + } +const GroupView = ({group}: {group: Group}) => { + const {t} = useTranslation("groups") + return <> + { // We don't show the title for unitary groups (for intermediate and advanced books) + !group.hasOnlyOneChallenge() && {t(`${group.id}.title`)} + } + + {group.challenges.map( challenge => ) } + + +} + const ChallengeCard = ({challenge}:{challenge: Challenge}) => { const {t} = useTranslation("challenges") - return {t(`${challenge.id}.title`)} + const {theme} = useThemeContext() + return + + + + {t(`${challenge.id}.title`)} + + + +} + +const ChallengeCover = ({challenge}: {challenge: Challenge}) => { + const {theme} = useThemeContext() + return challenge } \ No newline at end of file