From f70585e9c1bf18e406350e007d9723479f78f664 Mon Sep 17 00:00:00 2001 From: Lucas Santana Date: Fri, 20 Dec 2024 18:01:12 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20adiciona=20p=C3=A1gina=20de=20conquista?= =?UTF-8?q?s=20do=20aluno?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Cria componente AchievementsPage para exibir conquistas do aluno - Implementa componentes Card e Badge para UI - Adiciona mock inicial de conquistas para demonstração - Corrige caminhos de importação relativos --- .../student/StudentDashboardNavbar.tsx | 41 +++++++++ src/components/ui/badge.tsx | 34 ++++++++ src/components/ui/card.tsx | 16 ++++ .../student/StudentDashboardLayout.tsx | 14 +++ .../student-dashboard/AchievementsPage.tsx | 86 +++++++++++++++++++ .../StudentSettingsPage_old.tsx} | 0 src/routes.tsx | 15 ++++ src/routes/{index.tsx => index_old.tsx} | 55 +++++++----- 8 files changed, 238 insertions(+), 23 deletions(-) create mode 100644 src/components/student/StudentDashboardNavbar.tsx create mode 100644 src/components/ui/badge.tsx create mode 100644 src/components/ui/card.tsx create mode 100644 src/layouts/student/StudentDashboardLayout.tsx create mode 100644 src/pages/student-dashboard/AchievementsPage.tsx rename src/pages/{student/SettingsPage.tsx => student-dashboard/StudentSettingsPage_old.tsx} (100%) rename src/routes/{index.tsx => index_old.tsx} (81%) diff --git a/src/components/student/StudentDashboardNavbar.tsx b/src/components/student/StudentDashboardNavbar.tsx new file mode 100644 index 0000000..36f79b1 --- /dev/null +++ b/src/components/student/StudentDashboardNavbar.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { Link, useLocation } from 'react-router-dom'; + +export function StudentDashboardNavbar() { + const location = useLocation(); + + return ( + + ); +} \ No newline at end of file diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx new file mode 100644 index 0000000..de0f32c --- /dev/null +++ b/src/components/ui/badge.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +interface BadgeProps extends React.HTMLAttributes { + variant?: 'default' | 'success' | 'warning' | 'error' | 'secondary'; + children: React.ReactNode; +} + +const variantStyles = { + default: 'bg-primary text-primary-foreground', + success: 'bg-green-100 text-green-800', + warning: 'bg-yellow-100 text-yellow-800', + error: 'bg-red-100 text-red-800', + secondary: 'bg-gray-100 text-gray-800' +}; + +export function Badge({ + variant = 'default', + className = '', + children, + ...props +}: BadgeProps): JSX.Element { + return ( +
+ {children} +
+ ); +} \ No newline at end of file diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx new file mode 100644 index 0000000..e857589 --- /dev/null +++ b/src/components/ui/card.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +interface CardProps extends React.HTMLAttributes { + children: React.ReactNode; +} + +export function Card({ className = '', children, ...props }: CardProps): JSX.Element { + return ( +
+ {children} +
+ ); +} \ No newline at end of file diff --git a/src/layouts/student/StudentDashboardLayout.tsx b/src/layouts/student/StudentDashboardLayout.tsx new file mode 100644 index 0000000..7b19bf3 --- /dev/null +++ b/src/layouts/student/StudentDashboardLayout.tsx @@ -0,0 +1,14 @@ +import { Outlet } from 'react-router-dom'; +import { StudentDashboardNavbar } from '@/components/student/StudentDashboardNavbar'; +import React from 'react'; + +export function StudentDashboardLayout() { + return ( +
+ +
+ +
+
+ ); +} \ No newline at end of file diff --git a/src/pages/student-dashboard/AchievementsPage.tsx b/src/pages/student-dashboard/AchievementsPage.tsx new file mode 100644 index 0000000..7aceb36 --- /dev/null +++ b/src/pages/student-dashboard/AchievementsPage.tsx @@ -0,0 +1,86 @@ +import React from 'react'; +import { Card } from '../../components/ui/card'; +import { Badge } from '../../components/ui/badge'; + +interface Achievement { + id: string; + titulo: string; + descricao: string; + icone: string; + conquistado: boolean; + dataConquista?: string; + progresso?: number; +} + +const conquistas: Achievement[] = [ + { + id: '1', + titulo: 'Primeira História', + descricao: 'Completou sua primeira história', + icone: '📚', + conquistado: true, + dataConquista: '2024-03-15', + }, + { + id: '2', + titulo: 'Leitor Dedicado', + descricao: 'Leu histórias por 5 dias seguidos', + icone: '🌟', + conquistado: false, + progresso: 3, + }, + { + id: '3', + titulo: 'Explorador de Mundos', + descricao: 'Leu histórias de 5 categorias diferentes', + icone: '🌍', + conquistado: false, + progresso: 2, + }, +]; + +export function AchievementsPage(): JSX.Element { + return ( +
+
+

Minhas Conquistas

+

+ Continue lendo e completando atividades para desbloquear mais conquistas! +

+
+ +
+ {conquistas.map((conquista) => ( + +
+ {conquista.icone} + {conquista.conquistado ? ( + Conquistado! + ) : ( + Em progresso + )} +
+ +

{conquista.titulo}

+

{conquista.descricao}

+ + {conquista.progresso !== undefined && ( +
+
+
+ )} + + {conquista.dataConquista && ( +

+ Conquistado em: {new Date(conquista.dataConquista).toLocaleDateString('pt-BR')} +

+ )} + + ))} +
+
+ ); +} \ No newline at end of file diff --git a/src/pages/student/SettingsPage.tsx b/src/pages/student-dashboard/StudentSettingsPage_old.tsx similarity index 100% rename from src/pages/student/SettingsPage.tsx rename to src/pages/student-dashboard/StudentSettingsPage_old.tsx diff --git a/src/routes.tsx b/src/routes.tsx index 7790987..646b1b2 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -17,10 +17,13 @@ import { SettingsPage } from './pages/dashboard/settings/SettingsPage'; import { StudentDashboardPage } from './pages/student-dashboard/StudentDashboardPage'; import { StudentDashboardLayout } from './pages/student-dashboard/StudentDashboardLayout'; import { StudentStoriesPage } from './pages/student-dashboard/StudentStoriesPage'; +import { StudentSettingsPage } from './pages/student-dashboard/StudentSettingsPage'; import { CreateStoryPage } from './pages/student-dashboard/CreateStoryPage'; import { StoryPage } from './pages/student-dashboard/StoryPage'; import { ProtectedRoute } from './components/auth/ProtectedRoute'; import { UserManagementPage } from './pages/admin/UserManagementPage'; +import { AchievementsPage } from './pages/student-dashboard/AchievementsPage'; +import { StudentClassPage } from './pages/student-dashboard/StudentClassPage'; export const router = createBrowserRouter([ { @@ -155,6 +158,18 @@ export const router = createBrowserRouter([ element: , } ] + }, + { + path: 'configuracoes', + element: , + }, + { + path: 'conquistas', + element: , + }, + { + path: 'turmas/:classId', + element: , } ] }, diff --git a/src/routes/index.tsx b/src/routes/index_old.tsx similarity index 81% rename from src/routes/index.tsx rename to src/routes/index_old.tsx index d8d3daa..0322848 100644 --- a/src/routes/index.tsx +++ b/src/routes/index_old.tsx @@ -19,6 +19,7 @@ import { StoryPage } from '../pages/story/StoryPage'; import { StudentSettingsPage } from '../pages/student-dashboard/StudentSettingsPage'; import { StudentDashboardLayout } from '../pages/student-dashboard/StudentDashboardLayout'; import { StudentDashboard, StudentClassPage } from '../pages/student-dashboard'; +import { AchievementsPage } from '../pages/student-dashboard/AchievementsPage'; import React from 'react'; export const router = createBrowserRouter([ @@ -35,7 +36,7 @@ export const router = createBrowserRouter([ element: }, { - path: '/login', + path: 'login', children: [ { path: 'school', @@ -52,7 +53,7 @@ export const router = createBrowserRouter([ ] }, { - path: '/register', + path: 'register', children: [ { path: 'school', @@ -70,7 +71,7 @@ export const router = createBrowserRouter([ ] }, { - path: '/dashboard', + path: 'dashboard', element: , children: [ { @@ -119,31 +120,39 @@ export const router = createBrowserRouter([ ] }, { - path: '/auth/callback', + path: 'auth/callback', element: }, { - path: '/story/:storyId', + path: 'story/:storyId', element: }, - ], - }, - { - path: '/aluno', - element: , - children: [ { - index: true, - element: , - }, - { - path: 'configuracoes', - element: - }, - { - path: 'turmas/:classId', - element: + path: 'aluno', + element: , + children: [ + { + index: true, + element: , + }, + { + path: 'configuracoes', + element: , + }, + { + path: 'conquistas', + element: , + }, + { + path: 'historias/:id', + element: , + }, + { + path: 'turmas/:classId', + element: , + } + ] } - ] + ], } -]); \ No newline at end of file +]); \ No newline at end of file