-
Notifications
You must be signed in to change notification settings - Fork 816
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e8d3560
commit fb16b0e
Showing
9 changed files
with
197 additions
and
72 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { useState } from 'react'; | ||
| import { Books } from './components/Books'; | ||
| import { Header } from './components/Header'; | ||
| import { Tabs } from './components/Tabs'; | ||
| import { useFilters } from './hooks/useFilters'; | ||
| import { useReadingList } from './hooks/useReadingList'; | ||
| import { library as initialBooks } from './mocks/books.json'; | ||
|
|
||
| export function Home() { | ||
| const { filterBooks } = useFilters(); | ||
| const [isReadingListActive, setIsReadingListActive] = useState(false); | ||
| const { readingList, clearReadingList } = useReadingList(); | ||
|
|
||
| const filteredBooks = filterBooks(initialBooks); | ||
| const filteredBooksMapped = filteredBooks.map(({ book }) => book); | ||
|
|
||
| return ( | ||
| <> | ||
| <Header /> | ||
| <Tabs | ||
| {...{ | ||
| isReadingListActive, | ||
| setIsReadingListActive, | ||
| readingList, | ||
| clearReadingList, | ||
| filteredBooksMapped | ||
| }} | ||
| /> | ||
| <main className="grid"> | ||
| <div className={`${isReadingListActive ? 'hidden' : ''}`}> | ||
| <Books | ||
| books={filteredBooksMapped} | ||
| isReadingListActive={isReadingListActive} | ||
| /> | ||
| </div> | ||
| <div className={`${isReadingListActive ? '' : 'hidden'}`}> | ||
| <Books | ||
| books={readingList} | ||
| isReadingListActive={isReadingListActive} | ||
| /> | ||
| </div> | ||
| </main> | ||
| </> | ||
| ); | ||
| } |
41 changes: 41 additions & 0 deletions
41
pruebas/01-reading-list/juanpabotero/src/components/Book.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { useParams } from 'react-router-dom'; | ||
|
|
||
| export function Book({ books }) { | ||
| const { id } = useParams(); | ||
| const book = books.find((book) => String(book.id) === id); | ||
| return ( | ||
| <article className="flex flex-col gap-4 items-center border rounded-lg shadow md:flex-row md:max-w-2xl border-gray-700 bg-gray-800 mx-auto p-4"> | ||
| <img | ||
| className="object-contain w-full rounded-t-lg h-96 md:h-auto md:w-48 md:rounded-none" | ||
| src={book.cover} | ||
| alt={book.title} | ||
| /> | ||
| <div className="flex flex-col justify-between leading-normal"> | ||
| <h5 className="mb-1 text-2xl md:text-3xl font-bold tracking-tight text-white"> | ||
| {book.title} | ||
| </h5> | ||
| <p className="mb-6 text-gray-400"> | ||
| <span className="font-bold">Por:</span> {book.author.name} | ||
| </p> | ||
| <p className="mb-6 text-white text-lg leading-snug">{book.synopsis}</p> | ||
| <p className="text-gray-400"> | ||
| <span className="font-bold">Género:</span> {book.genre} | ||
| </p> | ||
| <p className="text-gray-400"> | ||
| <span className="font-bold">No. de páginas:</span> {book.pages} | ||
| </p> | ||
| <p className="mb-6 text-gray-400"> | ||
| <span className="font-bold">Año:</span> {book.year} | ||
| </p> | ||
| <p className="text-gray-400"> | ||
| <span className="font-bold">Más libros de {book.author.name}:</span> | ||
| </p> | ||
| <p className="text-gray-400"> | ||
| {book.author.otherBooks.map((otherBook) => ( | ||
| <span key={book.id}>{otherBook}, </span> | ||
| ))} | ||
| </p> | ||
| </div> | ||
| </article> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,16 @@ | ||
| import ReactDOM from 'react-dom/client'; | ||
| import { BrowserRouter } from 'react-router-dom'; | ||
| import App from './App.jsx'; | ||
| import { FiltersProvider } from './context/filters.jsx'; | ||
| import './index.css'; | ||
| import { ReadingListProvider } from './context/reading-list.jsx'; | ||
| import './index.css'; | ||
|
|
||
| ReactDOM.createRoot(document.getElementById('root')).render( | ||
| <FiltersProvider> | ||
| <ReadingListProvider> | ||
| <App /> | ||
| </ReadingListProvider> | ||
| </FiltersProvider> | ||
| <BrowserRouter> | ||
| <FiltersProvider> | ||
| <ReadingListProvider> | ||
| <App /> | ||
| </ReadingListProvider> | ||
| </FiltersProvider> | ||
| </BrowserRouter> | ||
| ); |