diff --git a/app/src/components/LoginPage.module.css b/app/src/components/LoginPage.module.css
index 95f4e04..92e6515 100644
--- a/app/src/components/LoginPage.module.css
+++ b/app/src/components/LoginPage.module.css
@@ -93,6 +93,16 @@
}
}
+.error {
+ color: var(--vermelho);
+ font-family: Raleway;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ width: fit-content;
+ margin: 0;
+}
+
.forgotPassword {
color: var(--r7);
font-family: Raleway;
@@ -109,6 +119,8 @@
font-style: normal;
font-weight: 400;
border-radius: 8px;
+ background: var(--r7);
+ color: var(--c1);
&.disabled {
background: var(--c7);
diff --git a/app/src/components/app/Listas.jsx b/app/src/components/app/Listas.jsx
deleted file mode 100644
index 5efd538..0000000
--- a/app/src/components/app/Listas.jsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { useState } from 'react'
-
-export default function useListas() {
- const [listas, setListas] = useState([
- {
- id: 1,
- nome: "Francês",
- emoji: "croissant",
- cor: null,
- tarefas: [
- {
- id: 1,
- nome: "Estudar francês",
- data: "26/03",
- concluido: false,
- },
- {
- id: 2,
- nome: "Praticar francês",
- data: "26/03",
- concluido: false,
- },
- ],
- },
- {
- id: 2,
- nome: "Inglês",
- emoji: null,
- cor: "var(--azul-royal)",
- tarefas: [
- {
- id: 1,
- nome: "Estudar inglês",
- data: "26/03",
- concluido: false,
- },
- {
- id: 2,
- nome: "Praticar inglês",
- data: "26/03",
- concluido: false,
- },
- ],
- },
- ]);
-
- const addLista = (nome, decoracao, modo) => {
- let novaLista = [];
- if (modo === "emoji") {
- novaLista = [
- ...listas,
- {
- id: listas.length + 1,
- nome: nome,
- emoji: decoracao,
- cor: null,
- tarefas: [],
- },
- ];
- } else {
- novaLista = [
- ...listas,
- {
- id: listas.length + 1,
- nome: nome,
- emoji: null,
- cor: decoracao,
- tarefas: [],
- },
- ];
- }
-
- setListas(novaLista);
- };
-
- return { listas, setListas, addLista };
-}
\ No newline at end of file
diff --git a/app/src/components/app/PageCard.module.css b/app/src/components/app/PageCard.module.css
index 9fedc32..2e8e843 100644
--- a/app/src/components/app/PageCard.module.css
+++ b/app/src/components/app/PageCard.module.css
@@ -249,6 +249,421 @@
border: 1px solid var(--r12);
}
+.tarefaTitle {
+ color: var(--r12);
+ font-family: Raleway;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+}
+
+.deckTitle {
+ width: 90%;
+
+ color: var(--r12);
+ font-family: 'Raleway',sans-serif;
+ font-size: 15px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+ margin: 0;
+
+
+}
+
+.add-cards-button {
+ font-size: 16px;
+ cursor: pointer;
+ font-weight: bold;
+ color: #3751ad;
+ width: 30%;
+}
+
+.editDeck {
+ width: 90%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 24px;
+}
+
+.editDeckName{
+ width: 90%;
+}
+
+.remove-deck-button {
+ cursor: pointer;
+}
+
+.view-deck-button {
+ cursor: pointer;
+}
+
+.deck-buttons {
+ width: 90%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.wrapperNiveis {
+ display: flex;
+ justify-content: center;
+ margin-top: 20px;
+}
+
+.nivel {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 4px;
+ padding: 0 8px;
+}
+
+.nivel span {
+ color: var(--c12);
+ font-family: Lato;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+}
+
+
+.secHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ padding: 16px 8px;
+}
+
+.cardSecTitle {
+ color: var(--c12);
+ font-family: 'Raleway',sans-serif;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ margin-left: 80px;
+}
+
+.qtdCards {
+ font-family: Lato;
+ font-weight: 700;
+}
+
+.addCard {
+ padding: 8px 16px;
+ border-radius: 8px;
+ color: var(--r1);
+ background-color: var(--r12);
+ font-family: 'Raleway',sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+ border: #F2E5FF;
+ margin-right: 15px;
+}
+
+.wrapperEstudar {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ padding: 16px 8px;
+ width: 100%;
+ align-items: center;
+}
+
+.qtdEstudar {
+ color: var(--r12);
+ font-family: Lato;
+ font-size: 32px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+}
+
+.btnEstudar {
+ padding: 8px 16px;
+ border-radius: 8px;
+ background-color: var(--r7);
+ color: var(--r1);
+ font-family: 'Raleway',sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+ border: none;
+}
+
+.saveDeck {
+ background-color: var(--r7);
+ color: var(--r1);
+ border: none;
+ border-radius: 8px;
+}
+
+.selectedDeck {
+ background-color: #07001B;
+}
+
+.caixasBody {
+ padding: 16px;
+ display: flex;
+ gap: 16px;
+ flex-wrap: wrap;
+ width: 100%;
+ box-shadow: 1px 0px 0px 0px var(--c3);
+}
+
+.caixa {
+ display: flex;
+ width: 224px;
+ height: fit-content;
+ padding: 16px;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ gap: 8px;
+
+ border-radius: 8px;
+ border: 1px solid var(--c7);
+
+ &.active {
+ border-top: 1px solid var(--r7);
+ border-right: 2px solid var(--r7);
+ border-bottom: 2px solid var(--r7);
+ border-left: 1px solid var(--r7);
+ }
+}
+
+.tituloCaixa {
+ color: var(--r12);
+ font-family: Raleway;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+ margin: 0;
+}
+
+.descCaixa {
+ color: var(--c10);
+ font-family: Lato;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+}
+
+.listaCaixas {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.noCardSelected {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 16px;
+ padding: 16px;
+ width: 36%;
+ min-width: 320px;
+}
+
+.img {
+ width: 100px;
+ height: 100px;
+}
+
+.infoText {
+ color: var(--c7);
+ font-family: Raleway;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+}
+
+.cardInfo {
+ display: flex;
+ flex-direction: column;
+
+ align-items: center;
+ width: 36%;
+ min-width: 320px;
+ padding: 16px;
+ height: 500px;
+ display: inline-block;
+}
+
+.cardHeader {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ padding: 8px 16px;
+}
+
+.cardTitle {
+ color: var(--c12);
+ font-family: Raleway;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+}
+
+.wrapperNiveis {
+ display: flex;
+ justify-content: center;
+}
+
+.nivel {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 4px;
+ padding: 0 8px;
+}
+
+.nivel span {
+ color: var(--c12);
+ font-family: Lato;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+}
+
+.secHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ padding: 16px 8px;
+}
+
+.cardSecTitle {
+ color: var(--c12);
+ font-family: Raleway;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+}
+
+.qtdCards {
+ font-family: Lato;
+ font-weight: 700;
+}
+
+.addCard {
+ padding: 8px 16px;
+ border-radius: 8px;
+ color: var(--r1);
+ background-color: var(--r12);
+ font-family: Raleway;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+}
+
+.wrapperEstudar {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ padding: 16px 8px;
+ width: 100%;
+ align-items: center;
+}
+
+.qtdEstudar {
+ color: var(--r12);
+ font-family: Lato;
+ font-size: 32px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+}
+
+.btnEstudar {
+ padding: 8px 16px;
+ border-radius: 8px;
+ background-color: var(--r7);
+ color: var(--r1);
+ font-family: Raleway;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+}
+
+.wrapperTabs {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ align-items: flex-start;
+ padding: 8px;
+ background-color: var(--r1);
+ border-radius: 8px;
+ width: 100%;
+}
+
+.nav {
+ display: flex;
+ background-color: var(--r12);
+ border-radius: 8px;
+ padding: 4px;
+}
+
+.tab {
+ color: var(--r1);
+ font-family: Lato;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+ background-color: transparent;
+ border-radius: 4px;
+ padding: 4px 8px;
+}
+
+.tab.active {
+ background-color: var(--r1);
+ color: var(--r12);
+}
+
+.tarefas {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ width: 100%;
+}
+
+.tarefa {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 8px;
+ padding: 16px;
+ border-radius: 8px;
+ background-color: transparent;
+ width: 100%;
+ border: 1px solid var(--r12);
+}
+
.tarefaTitle {
color: var(--r12);
font-family: Raleway;
diff --git a/app/src/components/app/PageCards.jsx b/app/src/components/app/PageCards.jsx
index 7da9b8f..2cf1fea 100644
--- a/app/src/components/app/PageCards.jsx
+++ b/app/src/components/app/PageCards.jsx
@@ -2,115 +2,22 @@ import React, { useState } from "react";
import style from "./PageCard.module.css";
import { UilBox, UilEdit } from "@iconscout/react-unicons";
import logo from "../../assets/logo-cinza.png";
+import Deck from "./flashcards/components/Deck";
+import { DeckContext } from "./flashcards/components/contexts/DeckContext";
+import { DeckProvider } from "./flashcards/components/contexts/DeckContext";
function PageCard() {
const [selectedCard, setSelectedCard] = useState(1);
return (
<>
-
-
+
-
+
{({ isActive }) => (
)}
@@ -33,37 +39,37 @@ const Sidebar = () => {
{({ isActive }) => (
-
+
)}
{({ isActive }) => (
-
+
)}
{({ isActive }) => (
-
+
)}
-
+
-
+
diff --git a/app/src/components/app/Sidebar.module.css b/app/src/components/app/Sidebar.module.css
index a01fb1c..68e4110 100644
--- a/app/src/components/app/Sidebar.module.css
+++ b/app/src/components/app/Sidebar.module.css
@@ -4,7 +4,7 @@
justify-content: space-between;
align-items: center;
height: 100vh;
- padding: 16px 8px;
+ padding: 1rem 0.5rem;
width: fit-content;
background-color: var(--r7);
box-shadow: 1px 0px 0px 0px var(--c3);
@@ -13,13 +13,13 @@
.mainItems {
display: flex;
flex-direction: column;
- gap: 16px;
+ gap: 1rem;
align-items: center;
}
.img {
- width: 32px;
- height: 32px;
+ width: 2rem;
+ height: 2rem;
border-radius: 50%;
}
@@ -30,14 +30,14 @@
.secondaryItems {
display: flex;
flex-direction: column;
- gap: 16px;
+ gap: 1rem;
align-items: center;
}
.link svg {
- fill: var(--r1);
+ fill: var(--c1);
}
.link svg.active {
- fill: var(--a3);
+ fill: var(--a4);
}
diff --git a/app/src/components/app/alert/Alert.jsx b/app/src/components/app/alert/Alert.jsx
new file mode 100644
index 0000000..a40570b
--- /dev/null
+++ b/app/src/components/app/alert/Alert.jsx
@@ -0,0 +1,35 @@
+import { UilExclamationTriangle, UilCheck } from "@iconscout/react-unicons";
+import { useEffect, useState } from "react";
+import style from "./Alert.module.css";
+
+const Alert = ({ tipo, conteudo }) => {
+ const [icone, setIcone] = useState(null);
+ const [classList, setClassList] = useState([style.alert]);
+
+ useEffect(() => {
+ switch (tipo) {
+ case "erro":
+ setIcone(
);
+ setClassList([...classList, style.erro]);
+ break;
+ case "sucesso":
+ setIcone(
);
+ setClassList([...classList, style.sucesso]);
+ break;
+ default:
+ setClassList([...classList, style.erro]);
+ setIcone(
);
+ }
+ }, [tipo]);
+
+ return (
+
+
+ {icone}
+ {conteudo}
+
+
+ );
+};
+
+export default Alert;
diff --git a/app/src/components/app/alert/Alert.module.css b/app/src/components/app/alert/Alert.module.css
new file mode 100644
index 0000000..666cb1f
--- /dev/null
+++ b/app/src/components/app/alert/Alert.module.css
@@ -0,0 +1,27 @@
+.wrapper {
+ position: absolute;
+ width: 100%;
+ padding: 2em;
+ max-width: 700px;
+}
+
+.alert {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ gap: 0.5em;
+ border-radius: 0.5em;
+ padding: 0.5em;
+ font-weight: 600;
+ cursor: pointer;
+}
+
+.alert.erro {
+ background-color: var(--vermelho);
+ color: var(--c1);
+}
+
+.alert.sucesso {
+ background-color: var(--verde-floresta);
+ color: var(--c1);
+}
\ No newline at end of file
diff --git a/app/src/components/app/flashcards/components.rar b/app/src/components/app/flashcards/components.rar
new file mode 100644
index 0000000..0aa78e1
Binary files /dev/null and b/app/src/components/app/flashcards/components.rar differ
diff --git a/app/src/components/app/flashcards/components.zip b/app/src/components/app/flashcards/components.zip
new file mode 100644
index 0000000..b9e1504
Binary files /dev/null and b/app/src/components/app/flashcards/components.zip differ
diff --git a/app/src/components/app/flashcards/components/Deck.jsx b/app/src/components/app/flashcards/components/Deck.jsx
new file mode 100644
index 0000000..ba7c66e
--- /dev/null
+++ b/app/src/components/app/flashcards/components/Deck.jsx
@@ -0,0 +1,179 @@
+import React, { useContext, useState, useEffect } from 'react';
+import { DeckContext } from './contexts/DeckContext';
+import FlashcardForm from './FlashCardForm';
+import Modal from 'react-modal';
+import style from './Deck.module.css';
+import { UilBox, UilEdit, UilPlus } from '@iconscout/react-unicons';
+import StudyFlashcardsModal from './StudyModal';
+import DeckForm from './DeckForm'
+
+// Definindo estilos customizados para o modal
+const customStyles = {
+ content: {
+ top: '50%',
+ left: '50%',
+ right: 'auto',
+ bottom: 'auto',
+ marginRight: '-50%',
+ transform: 'translate(-50%, -50%)',
+ width: '400px', // Largura do modal
+ height: '300px', // Altura do modal
+ padding: '20px', // Padding interno
+ backgroundColor: '#f0f0f0', // Cor de fundo do modal
+ borderRadius: '10px', // Bordas arredondadas
+ boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)', // Sombra
+ },
+ overlay: {
+ backgroundColor: 'rgba(0, 0, 0, 0.5)', // Fundo semitransparente
+ },
+};
+
+const Deck = () => {
+ const {
+ decks,
+ selectedDeck,
+ flashcardToEdit,
+ isModalOpen,
+ isCreatingDeck,
+ openModal,
+ closeModal,
+ saveFlashcard,
+ saveDeck,
+ selectDeck,
+ setIsCreatingDeck,
+ totalcards,
+ deck,
+ flashcards,
+ } = useContext(DeckContext);
+
+ const [isStudyModalOpen, setIsStudyModalOpen] = useState(false);
+ const [currentCardIndex, setCurrentCardIndex] = useState(0);
+ const [showAnswer, setShowAnswer] = useState(false);
+
+ const handleStudyClick = () => {
+ setIsStudyModalOpen(true);
+ };
+
+ const closeStudyModal = () => {
+ setIsStudyModalOpen(false);
+ setCurrentCardIndex(0);
+ setShowAnswer(false);
+ };
+
+ const handleNextCard = () => {
+ setCurrentCardIndex((prevIndex) => (prevIndex + 1) % selectedDeck.flashcards.length);
+ setShowAnswer(false);
+ };
+
+ const handleShowAnswer = () => {
+ setShowAnswer(true);
+ };
+
+ // Funções para filtrar os flashcards
+ const filterFlashcards = () => {
+ if (!selectedDeck) return [];
+
+ switch (activeTab) {
+ case 'hoje':
+ return selectedDeck.flashcards.filter(flashcard => flashcard.dueDate === new Date().toISOString().split('T')[0]);
+ case 'atuais':
+ return selectedDeck.flashcards.filter(flashcard => flashcard.status === 'current');
+ case 'concluidas':
+ return selectedDeck.flashcards.filter(flashcard => flashcard.status === 'completed');
+ default:
+ return selectedDeck.flashcards;
+ }
+ };
+
+ return (
+
+
+ {decks.map((deck) => (
+
+
+
selectDeck(deck.id)}>
+ {deck.name}
+
+ cartões, 2 para hoje
+
+
+ {deck.flashcards.map((flashcard) => (
+
+ {flashcard.deckId === deck.id &&
{flashcard.question}
}
+
+ ))}
+
+ ))}
+
+
+
+
+ {
+ setIsCreatingDeck(true);
+ openModal(null);
+ }}
+ >
+
+
+
+
+
+
+
+
+ {selectedDeck && (
+
+
+
{selectedDeck.name}
+
+
+
+
Total de cartões: {selectedDeck.flashcards.length}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {isStudyModalOpen && selectedDeck && (
+
+ )}
+
+ )}
+
+
+ {isCreatingDeck ? (
+ {
+ saveDeck(deck);
+ closeModal();
+ }}
+ />
+ ) : (
+
+ )}
+
+
+ );
+};
+
+export default Deck;
\ No newline at end of file
diff --git a/app/src/components/app/flashcards/components/Deck.module.css b/app/src/components/app/flashcards/components/Deck.module.css
new file mode 100644
index 0000000..c55de84
--- /dev/null
+++ b/app/src/components/app/flashcards/components/Deck.module.css
@@ -0,0 +1,453 @@
+
+
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");
+
+
+:root {
+
+ --r12:#07001B;
+ --r1:#F2E5FF;
+ --r7:#511ABE;
+ --c6:#8B888F;
+ --c1:#F3EDFA
+}
+
+.deckTitle {
+ width: 90%;
+
+ color: var(--r12);
+ font-family: 'Raleway',sans-serif;
+ font-size: 15px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+ margin: 0;
+
+
+}
+
+.add-cards-button {
+ font-size: 16px;
+ cursor: pointer;
+ font-weight: bold;
+ color: #3751ad;
+ width: 30%;
+}
+
+.editDeck {
+ width: 90%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 24px;
+}
+
+.editDeckName{
+ width: 90%;
+}
+
+.remove-deck-button {
+ cursor: pointer;
+}
+
+.view-deck-button {
+ cursor: pointer;
+}
+
+.deck-buttons {
+ width: 90%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.wrapperNiveis {
+ display: flex;
+ justify-content: center;
+ margin-top: 20px;
+}
+
+.nivel {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 4px;
+ padding: 0 8px;
+}
+
+.nivel span {
+ color: var(--c12);
+ font-family: Lato;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+}
+
+
+.secHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ padding: 16px 8px;
+}
+
+.cardSecTitle {
+ color: var(--c12);
+ font-family: 'Raleway',sans-serif;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+
+}
+
+.qtdCards {
+ font-family: Lato;
+ font-weight: 700;
+}
+
+.addCard {
+ padding: 8px 16px;
+ border-radius: 8px;
+ color: var(--r1);
+ background-color: var(--r12);
+ font-family: 'Raleway',sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+ border: #F2E5FF;
+ margin-right: 15px;
+}
+
+.wrapperEstudar {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ padding: 16px 8px;
+ width: 100%;
+ align-items: center;
+}
+
+.qtdEstudar {
+ color: var(--r12);
+ font-family: Lato;
+ font-size: 32px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+}
+
+.btnEstudar {
+ padding: 8px 16px;
+ border-radius: 8px;
+ background-color: var(--r7);
+ color: var(--r1);
+ font-family: 'Raleway',sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+ border: none;
+}
+
+.saveDeck {
+ background-color: var(--r7);
+ color: var(--r1);
+ border: none;
+ border-radius: 8px;
+}
+
+.selectedDeck {
+ background-color: #07001B;
+}
+
+.caixasBody {
+ padding: 16px;
+ display: flex;
+ gap: 16px;
+ flex-wrap: wrap;
+ width: 100%;
+ box-shadow: 1px 0px 0px 0px var(--c3);
+}
+
+.caixa {
+ display: flex;
+ width: 224px;
+ height: fit-content;
+ padding: 16px;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ gap: 8px;
+
+ border-radius: 8px;
+ border: 1px solid var(--c7);
+
+ &.active {
+ border-top: 1px solid var(--r7);
+ border-right: 2px solid var(--r7);
+ border-bottom: 2px solid var(--r7);
+ border-left: 1px solid var(--r7);
+ }
+}
+
+.tituloCaixa {
+ color: var(--r12);
+ font-family: Raleway;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+ margin: 0;
+}
+
+.descCaixa {
+ color: var(--c10);
+ font-family: Lato;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+}
+
+.listaCaixas {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.noCardSelected {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 16px;
+ padding: 16px;
+ width: 36%;
+ min-width: 320px;
+}
+
+.img {
+ width: 100px;
+ height: 100px;
+}
+
+.infoText {
+ color: var(--c7);
+ font-family: Raleway;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+}
+
+.cardInfo {
+
+ flex-direction: column;
+
+ align-items: center;
+ width: 36%;
+ min-width: 320px;
+
+ height: 500px;
+ display: inline-block;
+
+}
+
+.wrapper {
+ height: 100%;
+ margin: 0 auto;
+ background-color: #5f5e5e;
+ width: 1px;
+}
+
+.cardHeader {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ padding: 8px 16px;
+}
+
+.cardTitle {
+ color: var(--c12);
+ font-family: Raleway;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+}
+
+.wrapperNiveis {
+ display: flex;
+ justify-content: center;
+}
+
+.nivel {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 4px;
+ padding: 0 8px;
+}
+
+.nivel span {
+ color: var(--c12);
+ font-family: Lato;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+}
+
+.secHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ padding: 16px 8px;
+}
+
+.cardSecTitle {
+ color: var(--c12);
+ font-family: Raleway;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+}
+
+.qtdCards {
+ font-family: Lato;
+ font-weight: 700;
+}
+
+.addCard {
+ padding: 8px 16px;
+ border-radius: 8px;
+ color: var(--r1);
+ background-color: var(--r12);
+ font-family: Raleway;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+}
+
+.wrapperEstudar {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ padding: 16px 8px;
+ width: 100%;
+ align-items: center;
+}
+
+.qtdEstudar {
+ color: var(--r12);
+ font-family: Lato;
+ font-size: 32px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+}
+
+.btnEstudar {
+ padding: 8px 16px;
+ border-radius: 8px;
+ background-color: var(--r7);
+ color: var(--r1);
+ font-family: Raleway;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+}
+
+.wrapperTabs {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ align-items: flex-start;
+ padding: 8px;
+ background-color: var(--r1);
+ border-radius: 8px;
+ width: 100%;
+}
+
+.nav {
+ display: flex;
+ background-color: var(--r12);
+ border-radius: 8px;
+ padding: 4px;
+}
+
+.tab {
+ color: var(--r1);
+ font-family: Lato;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+ background-color: transparent;
+ border-radius: 4px;
+ padding: 4px 8px;
+}
+
+.tab.active {
+ background-color: var(--r1);
+ color: var(--r12);
+}
+
+.tarefas {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ width: 100%;
+}
+
+.tarefa {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 8px;
+ padding: 16px;
+ border-radius: 8px;
+ background-color: transparent;
+ width: 100%;
+ border: 1px solid var(--r12);
+}
+
+.tarefaTitle {
+ color: var(--r12);
+ font-family: Raleway;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+}
+
+.newDeck {
+ justify-content: center;
+ display: flex;
+ align-items: center;
+
+ width: 224px;
+ height: 72px;
+
+
+
+ border-radius: 8px;
+ border: 1px solid var(--c7);
+
+
+ }
+
diff --git a/app/src/components/app/flashcards/components/DeckForm.jsx b/app/src/components/app/flashcards/components/DeckForm.jsx
new file mode 100644
index 0000000..9cb962f
--- /dev/null
+++ b/app/src/components/app/flashcards/components/DeckForm.jsx
@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import style from './DeckForm.module.css'
+import { UilTimes } from '@iconscout/react-unicons'
+import { UilCheck } from '@iconscout/react-unicons'
+
+const DeckForm = ({ deck, onSave }) => {
+ const [name, setName] = useState(deck?.name || '');
+
+ const handleSubmit = (e) => {
+ if (name.trim() !== '') {
+ e.preventDefault();
+ onSave({ ...deck, name });
+ }
+ else{
+ alert("informe um valor valido")
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default DeckForm;
\ No newline at end of file
diff --git a/app/src/components/app/flashcards/components/DeckForm.module.css b/app/src/components/app/flashcards/components/DeckForm.module.css
new file mode 100644
index 0000000..e9ba09a
--- /dev/null
+++ b/app/src/components/app/flashcards/components/DeckForm.module.css
@@ -0,0 +1,232 @@
+:root{
+
+ --r1:#F2E5FF;
+ --r3:#B469FF;
+ --r12:#07001B;
+ --r7:#511ABE;
+ --c1:#F3EDFA;
+
+}
+
+.small-card {
+ background:var(--c1);
+ font-family: "Roboto", sans-serif;
+ font-weight: bold;
+ font-size: 16px;
+ width: 300px;
+ height: 250px;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 8px;
+ border-radius: 8px;
+ box-shadow: 2px 1px 1px rgb(209, 209, 209);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+}
+
+.edit-card-center {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.edit-card-separator {
+ height: 1px;
+ width: 40%;
+ background-color: black;
+ display: flex;
+}
+
+.swap-button {
+ cursor: pointer;
+ font-size: 24px;
+ border: 1px solid black;
+}
+
+.edit-card-side-choice {
+
+ color: var(--r12);
+ font-family: 'Raleway',sans-serif;
+font-size: 14px;
+font-weight: 600;
+line-height: 16.44px;
+text-align: left;
+
+}
+
+.small-card-buttons {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ justify-content: flex-start;
+}
+
+.edit-button {
+ width: 1.5em;
+ height: 1.5em;
+
+ border-radius: 100%;
+ padding: 0.5em;
+ cursor: pointer;
+ margin: 0.5em;
+}
+
+.delete-button {
+ width: 1.5em;
+ height: 1.5em;
+ background-color: rgb(193, 205, 216);
+ border-radius: 100%;
+ padding: 0.5em;
+ cursor: pointer;
+ margin: 0.5em;
+}
+
+.quiz-card {
+ display: flex;
+ flex-direction: column;
+ width: 600px;
+ height: 400px;
+ background-color: rgb(233, 233, 233);
+ margin: 1em;
+ border-radius: 24px;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.quiz-card-top {
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 1em;
+ margin-right: 2em;
+ margin-bottom: -4em;
+}
+
+.quiz-card-content {
+ font-size: 36px;
+}
+
+.flip-card-button {
+ height: 2em;
+ width: 2em;
+ cursor: pointer;
+}
+
+.edit-card-buttons {
+ display: flex;
+ margin-bottom: 0.5em;
+ font-family: "Roboto", sans-serif;
+
+ justify-content: center;
+}
+
+.edit-card-input {
+ width: 200px;
+ text-align: center;
+ margin-bottom: 2em;
+ background: var(--r1);
+ border-radius: 8px;
+
+}
+
+.result-icon {
+ margin: auto;
+ margin-bottom: 20px;
+ width: 20%;
+ background-size: cover;
+}
+
+input {
+ font-family: "Roboto", sans-serif;
+ margin: auto;
+ width: 250px;
+ border-radius: 20px;
+ padding: 10px;
+ border: none;
+ outline: none;
+
+}
+
+
+.buttonCards {
+ font-family: "Roboto", sans-serif;
+ font-weight: bolder;
+ margin: auto;
+ width: 230px;
+ padding: 10px;
+ border: none;
+ border-radius: 20px;
+ cursor: pointer;
+}
+
+.buttonCards:hover {
+ background-color: lightsteelblue;
+}
+
+.Salvar {
+ background: var(--r7);
+ border: none;
+ border-radius: 8px;
+ float: right;
+
+}
+
+.Fechar {
+
+ background: var(--r12);
+ border: none;
+ border-radius: 8px;
+
+ float: left;
+
+
+
+}
+
+.newCard {
+ font-family: 'Raleway',sans-serif;
+font-size: 14px;
+font-weight: 500;
+line-height: 16.44px;
+text-align: center;
+color: var(--r12);
+
+}
+
+.icon {
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+}
+
+.deleteButton {
+ background-color: #DF1515;
+ border-radius:8px ;
+ border: none;
+ width: 112px;
+ height: 30px;
+ color: white;
+margin-top: 90px;
+float: right;
+}
+
+.deckTitle {
+
+display: flex;
+justify-content: center;
+font-family: 'Raleway',sans-serif;
+font-weight: 500;
+}
+
+.input {
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+ background-color: var(--r1);
+ border-radius: 8px;
+ margin-top: 35px;
+}
\ No newline at end of file
diff --git a/app/src/components/app/flashcards/components/FlashCardForm.jsx b/app/src/components/app/flashcards/components/FlashCardForm.jsx
new file mode 100644
index 0000000..a4e46a8
--- /dev/null
+++ b/app/src/components/app/flashcards/components/FlashCardForm.jsx
@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import style from './FlashCardForm.module.css'
+import { UilTimes } from '@iconscout/react-unicons'
+import { UilCheck } from '@iconscout/react-unicons'
+
+const FlashcardForm = ({ flashcard, onSave }) => {
+ const [question, setQuestion] = useState(flashcard?.question || '');
+ const [answer, setAnswer] = useState(flashcard?.answer || '');
+
+ const handleSubmit = (e) => {
+ if(question.trim() !== '' && answer.trim() !== ''){
+ e.preventDefault();
+ onSave({ ...flashcard, question, answer });
+ }
+ else{
+ alert("Preencha o formulário")
+ }
+
+ };
+
+ const handleSave = () => {
+ if (question && answer) {
+ onSave({ ...flashcard, question, answer });
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default FlashcardForm;
\ No newline at end of file
diff --git a/app/src/components/app/flashcards/components/FlashCardForm.module.css b/app/src/components/app/flashcards/components/FlashCardForm.module.css
new file mode 100644
index 0000000..d3df3a8
--- /dev/null
+++ b/app/src/components/app/flashcards/components/FlashCardForm.module.css
@@ -0,0 +1,256 @@
+:root{
+
+ --r1:#F2E5FF;
+ --r3:#B469FF;
+ --r12:#07001B;
+ --r7:#511ABE;
+ --c1:#F3EDFA;
+
+ }
+
+ .small-card {
+ background:var(--c1);
+ font-family: "Roboto", sans-serif;
+ font-weight: bold;
+ font-size: 16px;
+ width: 300px;
+ height: 250px;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 8px;
+ border-radius: 8px;
+ box-shadow: 2px 1px 1px rgb(209, 209, 209);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ }
+
+ .edit-card-center {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .edit-card-separator {
+ height: 1px;
+ width: 40%;
+ background-color: black;
+ display: flex;
+ }
+
+ .swap-button {
+ cursor: pointer;
+ font-size: 24px;
+ border: 1px solid black;
+ }
+
+ .editCardSideChoice {
+
+ color: var(--r12);
+ font-family: 'Raleway',sans-serif;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 16.44px;
+ text-align: left;
+ margin-left: 0;
+
+ }
+
+ .small-card-buttons {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ justify-content: flex-start;
+ }
+
+ .edit-button {
+ width: 1.5em;
+ height: 1.5em;
+
+ border-radius: 100%;
+ padding: 0.5em;
+ cursor: pointer;
+ margin: 0.5em;
+ }
+
+ .delete-button {
+ width: 1.5em;
+ height: 1.5em;
+ background-color: rgb(193, 205, 216);
+ border-radius: 100%;
+ padding: 0.5em;
+ cursor: pointer;
+ margin: 0.5em;
+ }
+
+ .quiz-card {
+ display: flex;
+ flex-direction: column;
+ width: 600px;
+ height: 400px;
+ background-color: rgb(233, 233, 233);
+ margin: 1em;
+ border-radius: 24px;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .quiz-card-top {
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 1em;
+ margin-right: 2em;
+ margin-bottom: -4em;
+ }
+
+ .quiz-card-content {
+ font-size: 36px;
+ }
+
+ .flip-card-button {
+ height: 2em;
+ width: 2em;
+ cursor: pointer;
+ }
+
+ .edit-card-buttons {
+ display: flex;
+ margin-bottom: 0.5em;
+ font-family: "Roboto", sans-serif;
+
+ justify-content: center;
+ }
+
+ .editCardInput {
+ min-width: 340px;
+ text-align: center;
+ margin-bottom: 2em;
+ background: var(--r1);
+ border-radius: 8px;
+
+ }
+
+ .result-icon {
+ margin: auto;
+ margin-bottom: 20px;
+ width: 20%;
+ background-size: cover;
+ }
+
+ input {
+ font-family: "Roboto", sans-serif;
+ margin: auto;
+ width: 250px;
+ border-radius: 8px;
+ padding: 10px;
+ border: none;
+ outline: none;
+
+ }
+
+
+ .buttonCards {
+ font-family: "Roboto", sans-serif;
+ font-weight: bolder;
+ margin: auto;
+ width: 230px;
+ padding: 10px;
+ border: none;
+ border-radius: 20px;
+ cursor: pointer;
+ }
+
+ .buttonCards:hover {
+ background-color: lightsteelblue;
+ }
+
+ .btnSalvar {
+ background: var(--r7);
+ border: none;
+ border-radius: 8px;
+ width: 35px;
+ height: 30px;
+ float: right;
+ margin-left: 50px;
+ }
+
+ .btnFechar {
+
+ background: var(--r12);
+ border: none;
+ border-radius: 8px;
+ width: 35px;
+ height: 30px;
+ float: left;
+ margin-right: 50px;
+ justify-content: center;
+ align-items: center;
+ display: flex;
+
+
+ }
+
+ .newCard {
+ font-family: 'Raleway',sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 16.44px;
+ text-align: center;
+ color: var(--r12);
+
+ }
+
+ .icon {
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+ }
+
+ .deleteButton {
+ background-color: #DF1515;
+ border-radius:8px ;
+ border: none;
+ width: 112px;
+ height: 30px;
+ color: white;
+ margin-top: 90px;
+ float: right;
+ }
+
+ .deckTitle {
+
+ display: flex;
+ justify-content: center;
+ font-family: 'Raleway',sans-serif;
+ font-weight: 500px;
+ }
+
+ .input {
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+ }
+
+ .Salvar {
+ background: var(--r7);
+ border: none;
+ border-radius: 8px;
+ float: right;
+
+ }
+
+ .Fechar {
+
+ background: var(--r12);
+ border: none;
+ border-radius: 8px;
+
+ float: left;
+
+
+
+ }
\ No newline at end of file
diff --git a/app/src/components/app/flashcards/components/Flashcardss.jsx b/app/src/components/app/flashcards/components/Flashcardss.jsx
new file mode 100644
index 0000000..acb8c17
--- /dev/null
+++ b/app/src/components/app/flashcards/components/Flashcardss.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Flashcard = ({ flashcard, onEdit }) => {
+ return (
+
+
{flashcard.question}
+
{flashcard.answer}
+
+
+ );
+};
+
+export default Flashcard;
\ No newline at end of file
diff --git a/app/src/components/app/flashcards/components/Modal.jsx b/app/src/components/app/flashcards/components/Modal.jsx
new file mode 100644
index 0000000..b1c87d0
--- /dev/null
+++ b/app/src/components/app/flashcards/components/Modal.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactModal from 'react-modal';
+
+ReactModal.setAppElement('#root');
+
+const Modal = ({ isOpen, onRequestClose, children }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export default Modal;
\ No newline at end of file
diff --git a/app/src/components/app/flashcards/components/StudyModal.jsx b/app/src/components/app/flashcards/components/StudyModal.jsx
new file mode 100644
index 0000000..d1dd604
--- /dev/null
+++ b/app/src/components/app/flashcards/components/StudyModal.jsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import Modal from 'react-modal';
+import style from './StudyModal.module.css'
+import {UilTimes} from '@iconscout/react-unicons'
+import {UilCheck} from '@iconscout/react-unicons'
+import { UilStepForward } from '@iconscout/react-unicons'
+import { UilStepBackwardAlt } from '@iconscout/react-unicons'
+import { UilSkipForwardAlt } from '@iconscout/react-unicons'
+
+const customStyles = {
+ content: {
+ top: '50%',
+ left: '50%',
+ right: 'auto',
+ bottom: 'auto',
+ marginRight: '-50%',
+ transform: 'translate(-50%, -50%)',
+ width: '500px', // Largura do modal
+ height: 'fitcontent', // Altura do modal
+ padding: '20px', // Padding interno
+ backgroundColor: '#f0f0f0', // Cor de fundo do modal
+ borderRadius: '10px', //
+ boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)', //
+ },
+ overlay: {
+ backgroundColor: 'rgba(0, 0, 0, 0.5)', // Fundo semitransparente
+ },
+};
+
+const StudyFlashcardsModal = ({
+ flashcards,
+ onClose,
+ currentCardIndex,
+ showAnswer,
+ handleNextCard,
+ handleShowAnswer,
+ closeStudyModal
+}) => {
+ const currentCard = flashcards[currentCardIndex];
+
+
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{currentCard.question}
+ {showAnswer &&
{currentCard.answer}
}
+
+
+
+ < UilStepBackwardAlt className={style.skip} onClick={handleNextCard} size='30px' color='var(--r7)'>
+
+
+
+
+
+
+
+ );
+};
+
+export default StudyFlashcardsModal;
\ No newline at end of file
diff --git a/app/src/components/app/flashcards/components/StudyModal.module.css b/app/src/components/app/flashcards/components/StudyModal.module.css
new file mode 100644
index 0000000..7d33358
--- /dev/null
+++ b/app/src/components/app/flashcards/components/StudyModal.module.css
@@ -0,0 +1,145 @@
+:root{
+
+ --r1:#F2E5FF;
+ --r3:#B469FF;
+ --r12:#07001B;
+ --r7:#511ABE;
+ --c1:#F3EDFA;
+
+ }
+
+ .smallcard {
+ background:var(--c1);
+ font-family: "Roboto", sans-serif;
+ font-weight: bold;
+ font-size: 16px;
+ width: 300px;
+ height: 250px;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 8px;
+ border-radius: 8px;
+ box-shadow: 2px 1px 1px rgb(209, 209, 209);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ }
+
+
+ .editCardSideChoice {
+
+ color: var(--r12);
+ font-family: 'Raleway',sans-serif;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 16.44px;
+ text-align: left;
+ margin-left: 0;
+
+ }
+
+
+ .pergunta {
+ text-align: center;
+ font-size: 22px;
+ font-weight: 400;
+ }
+
+ .resposta {
+ text-align: center;
+ justify-content: center;
+ align-items: center;
+ font-size: 30px;
+ font-weight: 600;
+ margin-top: 70px;
+ }
+ .editCardInput {
+ min-width: 340px;
+ text-align: center;
+ margin-bottom: 2em;
+ background: var(--r1);
+ border-radius: 8px;
+
+ }
+
+ .result-icon {
+ margin: auto;
+ margin-bottom: 20px;
+ width: 20%;
+ background-size: cover;
+ }
+
+ input {
+ font-family: "Roboto", sans-serif;
+ margin: auto;
+ width: 250px;
+ border-radius: 8px;
+ padding: 10px;
+ border: none;
+ outline: none;
+
+ }
+
+
+
+ .icon {
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+
+ }
+
+ .skip {
+ float: right;
+ align-items: center;
+
+
+ }
+
+ .deckTitle {
+
+ display: flex;
+ justify-content: center;
+ font-family: 'Raleway',sans-serif;
+ font-weight: 500px;
+ }
+
+ .input {
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+ }
+
+ .Salvar {
+ background: var(--r7);
+ border: none;
+ border-radius: 8px;
+ float: right;
+
+ }
+
+ .Fechar {
+
+ background: var(--vermelho);
+ border: none;
+ border-radius: 8px;
+
+ float: left;
+
+
+
+ }
+
+ .controls {
+ margin-top: 100px;
+
+ display: flex;
+
+ }
+
+.mostrarRespostaBtn {
+ margin-left: auto;
+ margin-right: auto;
+
+}
\ No newline at end of file
diff --git a/app/src/components/app/flashcards/components/contexts/DeckContext.jsx b/app/src/components/app/flashcards/components/contexts/DeckContext.jsx
new file mode 100644
index 0000000..44f5e17
--- /dev/null
+++ b/app/src/components/app/flashcards/components/contexts/DeckContext.jsx
@@ -0,0 +1,87 @@
+import React, { createContext, useState } from 'react';
+
+const DeckContext = createContext();
+
+const DeckProvider = ({ children }) => {
+ const [decks, setDecks] = useState([
+ { id: 1, name: 'Deck 1', flashcards: [] },
+
+ ]);
+ const [selectedDeck, setSelectedDeck] = useState(null);
+ const [flashcardToEdit, setFlashcardToEdit] = useState(null);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [isCreatingDeck, setIsCreatingDeck] = useState(false);
+
+ const openModal = (deck, flashcard = null) => {
+ setSelectedDeck(deck);
+ setFlashcardToEdit(flashcard);
+ setIsModalOpen(true);
+ };
+
+ const closeModal = () => {
+ setIsModalOpen(false);
+ setSelectedDeck(null);
+ setFlashcardToEdit(null);
+ setIsCreatingDeck(false);
+ };
+
+ const saveFlashcard = (flashcard) => {
+ const updatedDecks = decks.map(deck => {
+ if (deck.id === selectedDeck.id) {
+ const flashcards = flashcard.id
+ ? deck.flashcards.map(fc => (fc.id === flashcard.id ? flashcard : fc))
+ : [...deck.flashcards, { ...flashcard, id: Date.now() }];
+ return { ...deck, flashcards };
+ }
+ return deck;
+ });
+ setDecks(updatedDecks);
+ closeModal();
+ };
+
+ const saveDeck = (deck) => {
+ const updatedDecks = deck.id
+ ? decks.map(d => (d.id === deck.id ? deck : d))
+ : [...decks, { ...deck, id: Date.now(), flashcards: [] }];
+ setDecks(updatedDecks);
+ closeModal();
+ };
+
+ const addDeck = (deckName) => {
+ const newDeck = {
+ id: Math.random().toString(36).substr(2, 9), // Gera um ID único para o deck
+ name: deckName,
+ flashcards: [] // Inicializa com uma lista vazia de flashcards
+ };
+
+ setDecks([...decks, newDeck]);
+ };
+
+ const selectDeck = (deckId) => {
+ const selected = decks.find(deck => deck.id === deckId);
+ setSelectedDeck(selected);
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+export { DeckProvider, DeckContext };
\ No newline at end of file
diff --git a/app/src/components/app/listas/BtnListas.jsx b/app/src/components/app/listas/BtnListas.jsx
new file mode 100644
index 0000000..c1d6585
--- /dev/null
+++ b/app/src/components/app/listas/BtnListas.jsx
@@ -0,0 +1,59 @@
+import PropTypes from "prop-types";
+import { useState } from "react";
+import { UilSquareShape, UilPen, UilTrash } from "@iconscout/react-unicons";
+import ModalExcluir from "../modal/ModalExcluir";
+import { NavLink } from "react-router-dom";
+
+const BtnListas = ({ lista, style }) => {
+ const [modalExcluirAberto, setModalExcluirAberto] = useState(false);
+
+ const handleOpenModalExcluir = () => {
+ setModalExcluirAberto(true);
+ };
+
+ const handleCloseModalExcluir = () => {
+ setModalExcluirAberto(false);
+ };
+
+ return (
+ <>
+
+ isActive ? `${style.active} ${style.item}` : `${style.item}`
+ }
+ >
+ {lista.emoji ? (
+
+ ) : (
+
+ )}
+ {lista.nome}
+
+
+
+
+
+
+ {modalExcluirAberto && (
+
+ )}
+
+ );
+};
+
+BtnListas.propTypes = {
+ lista: PropTypes.object.isRequired,
+ style: PropTypes.object.isRequired,
+};
+
+export default BtnListas;
diff --git a/app/src/components/app/markdown/Markdown.jsx b/app/src/components/app/markdown/Markdown.jsx
index b187f80..70f39b8 100644
--- a/app/src/components/app/markdown/Markdown.jsx
+++ b/app/src/components/app/markdown/Markdown.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
import style from "./Markdown.module.css";
import {
UilBold,
@@ -9,6 +9,7 @@ import {
UilCheckSquare,
UilCommentAlt,
UilArrow,
+ UilFileDownload,
} from "@iconscout/react-unicons";
import MdEditor from "./MdEditor";
import MdPreview from "./MdPreview";
@@ -17,27 +18,80 @@ const Markdown = () => {
const storedMarkdown = localStorage.getItem("MARKDOWN");
const [markdown, setMarkdown] = useState(storedMarkdown ? storedMarkdown : "# Olá, mundo!");
+ const textAreaRef = useRef(null);
const callback = (markdown) => {
setMarkdown(markdown);
localStorage.setItem("MARKDOWN", markdown);
}
+ const insertTag = (start, end) => {
+ const textArea = textAreaRef.current;
+ const startPos = textArea.selectionStart;
+ const endPos = textArea.selectionEnd;
+ const text = textArea.value;
+
+ const newText = text.substring(0, startPos) + start + text.substring(startPos, endPos) + end + text.substring(endPos);
+
+ setMarkdown(newText);
+
+ textArea.selectionStart = startPos + start.length;
+ textArea.selectionEnd = endPos + start.length;
+ }
+
+ const bold = () => {
+ insertTag("**", "**");
+ }
+ const italic = () => {
+ insertTag("_", "_");
+ }
+ const size = () => {
+ insertTag("# ", "");
+ }
+ const listUl = () => {
+ insertTag("- ", "");
+ }
+ const listOl = () => {
+ insertTag("1. ", "");
+ }
+ const checkSquare = () => {
+ insertTag("- [ ] ", "");
+ }
+ const quoteBlock = () => {
+ insertTag("\n> ", "");
+ }
+ const codeBlock = () => {
+ insertTag('\n```\n', '\n```\n');
+ }
+
+ const gerarArquivo = () => {
+ const blob = new Blob([markdown], { type: "text/markdown" });
+ const url = URL.createObjectURL(blob);
+ const link = document.createElement("a");
+ link.href = url;
+ link.download = "arquivo.md";
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ URL.revokeObjectURL(url);
+ }
+
return (
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
+
);
diff --git a/app/src/components/app/markdown/MdEditor.jsx b/app/src/components/app/markdown/MdEditor.jsx
index 2d67544..22b11dd 100644
--- a/app/src/components/app/markdown/MdEditor.jsx
+++ b/app/src/components/app/markdown/MdEditor.jsx
@@ -1,10 +1,10 @@
-import React from 'react'
+import { useRef } from 'react'
import PropTypes from 'prop-types'
-const MdEditor = ({style, markdown, setMarkdown}) => {
+const MdEditor = ({style, markdown, setMarkdown, textAreaRef}) => {
return (
-
+
+
+ Já possui uma conta? Login
+
+