PRA#01_React_AntoniCarrascoVilar-ComponentsFrontendDevelopment-2

frontend/pronunciationAppFront/package.json

@@ -10,6 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@fontsource/roboto": "^5.1.1",
+    "@mui/icons-material": "^6.4.0",
+    "@mui/material": "^6.4.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "axios": "^1.7.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -23,6 +30,6 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
-    "vite": "^6.0.5"
+    "vite": "^6.0.11"
   }
 }

frontend/pronunciationAppFront/src/App.css

@@ -5,38 +5,7 @@
   text-align: center;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
 
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
+ul {
+  list-style-type: none;
+}

frontend/pronunciationAppFront/src/App.jsx

@@ -1,35 +1,26 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
 import './App.css'
+import Cards from "./Cards.jsx"
+import UsersList from './users.jsx';
+import Header from "./Header.jsx";
+import About from './about.jsx'
+import layout from './Layout.jsx';
+import nopage from './noPage.jsx';
+import Practice from './Practice.jsx';
+import { Route } from '@mui/icons-material';
 
-function App() {
-  const [count, setCount] = useState(0)
+export default function App() {
 
-  return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
-}
+return(
+  <BrowserRouter>
+  <Routes>
+    <Route path="/" element= {<Layout/>}>
+    <Route index element={<Home/>} />
+    <Route path="practice" element= {<Practive />} />
+    <Route path = "about" element = {<About />} />
+    <Route path= "*" element= {<noPage/>}/>
+    </Route>
+    </Routes>
+    </BrowserRouter>
+);
 
-export default App
+};

frontend/pronunciationAppFront/src/BoxAnimation.css

@@ -0,0 +1,23 @@
+@keyframes backgroundAnimation {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+
+  .animated-box {
+    background: linear-gradient(90deg, #ff7e5f, #feb47b, #86e3ce, #d4a5a5);
+    background-size: 300% 300%;
+    animation: backgroundAnimation 6s ease infinite;
+  }
+  .animated-box:hover {
+    background: linear-gradient(90deg, #ff7e5f, #feb47b, #86e3ce, #d4a5a5);
+    background-size: 300% 300%;
+    animation: backgroundAnimation 0.5s ease infinite;
+    transform: scale(1.1);
+  }

frontend/pronunciationAppFront/src/Cards.css

@@ -0,0 +1,8 @@
+.card {
+    transition: transform 0.3s ease-in-out;
+  }
+
+  .card:hover {
+    transform: scale(1.05);
+  }
+

frontend/pronunciationAppFront/src/Cards.jsx

@@ -0,0 +1,154 @@
+import { useState, useEffect } from "react";
+import {
+  Box,
+  Card,
+  CardContent,
+  Typography,
+  Container,
+  Grid,
+  Button,
+  Tabs,
+  Tab,
+} from "@mui/material";
+
+import { fetchWords } from "./data-api.js";
+
+// Componente de la pestaña
+function TabPanel(props) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+}
+
+export default function WordList() {
+  const [words, setWords] = useState([]);
+  const [filteredWords, setFilteredWords] = useState([]);
+  const [level, setLevel] = useState("ALL");
+  const [tabValue, setTabValue] = useState(0); // Estado para manejar las pestañas
+
+  useEffect(() => {
+    const getWords = async () => {
+      try {
+        const data = await fetchWords();
+        setWords(data);
+        setFilteredWords(data); 
+      } catch (error) {
+        console.error("Failed to fetch words:", error);
+      }
+    };
+
+    getWords();
+  }, []);
+
+  // filtro de la dificultad 
+  const handleFilter = (level) => {
+    setLevel(level);
+    if (level === "ALL") {
+      setFilteredWords(words);
+    } else {
+      const filtered = words.filter((word) => word.level === level);
+      setFilteredWords(filtered);
+    }
+  };
+
+  // cambio de pestaña
+  const handleTabChange = (event, newValue) => {
+    setTabValue(newValue);
+  };
+
+  return (
+    <Container maxWidth="md">
+      <Box sx={{ my: 4 }}>
+        <Typography
+          variant="h4"
+          component="h1"
+          gutterBottom
+          sx={{ color: "#fffff" }}
+        >
+          Word Filter
+        </Typography>
+
+        {/* Botones para filtrar */}
+        <div className="flex gap-2 mb-4">
+          <Button onClick={() => handleFilter("ALL")} variant="outline">
+            All
+          </Button>
+          <Button onClick={() => handleFilter("🟢 EASY")} variant="outline">
+            Easy 🟢
+          </Button>
+          <Button onClick={() => handleFilter("🟠 MEDIUM")} variant="outline">
+            Medium 🟠
+          </Button>
+          <Button onClick={() => handleFilter("🔴 HARD")} variant="outline">
+            Hard 🔴
+          </Button>
+        </div>
+
+        {/* Lista de palabras */}
+        <Grid container spacing={2}>
+          {filteredWords.map((word) => (
+            <Grid item xs={12} sm={6} md={4} key={word.id}>
+              <Card
+                sx={{
+                  backgroundColor: "rgba(240, 244, 248, 0.1)",
+                  backdropFilter: "blur(10px)",
+                  boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+                  transition: "0.3s",
+                  "&:hover": {
+                    transform: "translateY(-5px)",
+                    boxShadow: "0 6px 8px rgba(0, 0, 0, 0.15)",
+                  },
+                }}
+              >
+                <CardContent>
+                  <Typography
+                    variant="h6"
+                    component="div"
+                    sx={{ color: "#fffff" }}
+                  >
+                    {word.word}
+                  </Typography>
+                  <Tabs
+                    value={tabValue}
+                    onChange={handleTabChange}
+                    aria-label="word details tabs"
+                  >
+                    <Tab label="Details" />
+                    <Tab label="Synonyms" />
+                  </Tabs>
+                  <TabPanel value={tabValue} index={0}>
+                    <Typography variant="body2" sx={{ color: "#fffff" }}>
+                      Pronunciation: {word.pronunciation} <br />
+                      Phonetic: {word.phonetic} <br />
+                      Theme: {word.theme} <br />
+                      Level: {word.level}
+                    </Typography>
+                  </TabPanel>
+                  <TabPanel value={tabValue} index={1}>
+                    <Typography variant="body2" sx={{ color: "#FFFFF" }}>
+                      Synonyms: {word.synonym}
+                    </Typography>
+                  </TabPanel>
+                </CardContent>
+              </Card>
+            </Grid>
+          ))}
+        </Grid>
+      </Box>
+    </Container>
+  );
+}