Skip to content

Commit ac3cbfb

Browse files
Andra-sunAndra-sun
committed
ajuste na lista de tema
1 parent d176a5c commit ac3cbfb

1 file changed

Lines changed: 152 additions & 125 deletions

File tree

‎frontend/src/app/(home)/play/page.tsx‎

Lines changed: 152 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -70,148 +70,175 @@ export default function PlayPage() {
7070
};
7171

7272
if (loading) {
73-
return (
74-
<LoadingScreen />
75-
);
76-
}
77-
78-
if (error && !selectedTheme) {
79-
return (
80-
<div className="p-6">
81-
<div >
82-
<p >Erro: {error}</p>
83-
</div>
84-
</div>
85-
);
73+
return <LoadingScreen />;
8674
}
8775

8876
return (
89-
<div className="flex min-h-full">
90-
{/* Lista de Temas */}
91-
<div className="flex-1 overflow-hidden">
92-
<div className="p-6 h-full overflow-auto">
93-
<div className="mb-6">
94-
<h1 className="text-3xl font-bold">Jogar Quiz</h1>
95-
<p className="mt-3">
96-
Selecione um tema para começar
97-
</p>
98-
</div>
99-
100-
{themes.length === 0 ? (
101-
<div >
102-
<p >
103-
Nenhum tema disponível.
104-
</p>
105-
</div>
106-
) : (
107-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
108-
{themes.map((theme) => (
109-
<button
110-
key={theme.id}
111-
aria-label={theme.title + " - " + theme.description}
112-
onClick={() => handleSelectTheme(theme)}
113-
className={`p-6 rounded-lg border-2 transition-all text-left hover:shadow-lg ${
114-
selectedTheme?.id === theme.id
115-
? "bg-layout-card"
116-
: "border-category-play bg-layout-card hover:border-qblue-default"
117-
}`}
118-
>
119-
<h3 className="font-bold text-lg mb-2">
120-
{theme.title}
121-
</h3>
122-
<p className="text-sm line-clamp-3">
123-
{theme.description}
124-
</p>
125-
</button>
126-
))}
127-
</div>
128-
)}
77+
<div className="min-h-screen">
78+
<div className="max-w-7xl">
79+
{/* Header */}
80+
<div className="mb-8">
81+
<h1 className="text-3xl lg:text-4xl font-bold text-foreground">
82+
Jogar Quiz
83+
</h1>
84+
<p className="mt-2 text-muted-foreground">
85+
Selecione um tema para começar a jogar
86+
</p>
12987
</div>
130-
</div>
13188

132-
{/* Painel Lateral de Subtópicos */}
133-
{selectedTheme && (
134-
<div className="w-96 bg-layout-card border-l border flex flex-col shadow-lg rounded-2xl absolute right-4">
135-
{/* Header do Painel */}
136-
<div className="p-6 border-b flex items-start justify-between">
137-
<div className="flex-1 pr-4">
138-
<h2 className="text-xl font-bold">
139-
{selectedTheme.title}
140-
</h2>
141-
<p className="text-sm mt-1">
142-
{selectedTheme.description}
143-
</p>
144-
</div>
145-
<button
146-
onClick={handleClosePanel}
147-
className="text-gray-400 hover:text-gray-600 text-xl font-bold"
89+
{error && !selectedTheme ? (
90+
<div className="bg-destructive/10 border border-destructive/20 rounded-lg p-4 mb-6">
91+
<p className="text-destructive">Erro: {error}</p>
92+
<Button
93+
onClick={() => window.location.reload()}
94+
variant="subtle"
95+
className="mt-2"
14896
>
149-
✕
150-
</button>
97+
Tentar Novamente
98+
</Button>
15199
</div>
100+
) : null}
152101

153-
{/* Lista de Subtópicos */}
154-
<div className="flex-1 overflow-auto p-6">
155-
{loadingSubTopics ? (
156-
<div className="flex items-center justify-center h-full">
157-
<div className="text-center">
158-
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-3"></div>
159-
<p className="text-sm">
160-
Carregando subtópicos...
161-
</p>
162-
</div>
163-
</div>
164-
) : subTopics.length === 0 ? (
165-
<div className="border rounded-lg p-4">
166-
<p className="text-sm ">
167-
Nenhum subtópico disponível para este tema.
102+
<div className="flex flex-col lg:flex-row gap-6">
103+
{/* Lista de Temas - Conteúdo Principal */}
104+
<div className="flex-1">
105+
{themes.length === 0 ? (
106+
<div className="text-center py-12 border-2 border-dashed rounded-lg">
107+
<p className="text-muted-foreground">
108+
Nenhum tema disponível no momento.
168109
</p>
169110
</div>
170111
) : (
171-
<div className="space-y-3">
172-
{subTopics.map((subTopic) => (
173-
<div
174-
key={subTopic.id}
175-
className="border rounded-lg p-4 hover:border-qblue-default transition-colors"
112+
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
113+
{themes.map((theme) => (
114+
<button
115+
key={theme.id}
116+
onClick={() => handleSelectTheme(theme)}
117+
className={`p-6 rounded-xl border-2 transition-all duration-200 text-left hover:shadow-md hover:scale-[1.02] group ${
118+
selectedTheme?.id === theme.id
119+
? "border-primary bg-primary/5 shadow-md"
120+
: "border-border bg-card hover:border-primary/50"
121+
}`}
176122
>
177-
<h3 className="font-semibold mb-2">
178-
{subTopic.sub_topic}
179-
</h3>
180-
<p className="text-xs mb-4 line-clamp-2">
181-
{subTopic.description}
182-
</p>
183-
<div className="flex gap-2">
184-
<Link
185-
href={`/quiz-lab/play/${subTopic.id}`}
186-
className="flex-1"
187-
>
188-
<Button
189-
size="sm"
190-
className="w-full text-xs"
191-
>
192-
Jogar
193-
</Button>
194-
</Link>
195-
<Link
196-
href={`/quiz-lab/teste/question?subTopic=${subTopic.id}`}
197-
className="flex-1"
198-
>
199-
<Button
200-
size="sm"
201-
variant="subtle"
202-
className="w-full text-xs"
203-
>
204-
Ver Questões
205-
</Button>
206-
</Link>
123+
<div className="flex flex-col h-full">
124+
<h3 className="font-bold text-lg mb-2 text-foreground group-hover:text-primary transition-colors">
125+
{theme.title}
126+
</h3>
127+
<p className="text-sm text-muted-foreground line-clamp-3 flex-1">
128+
{theme.description}
129+
</p>
130+
<div className="mt-4 flex justify-between items-center">
131+
<span className="text-xs text-primary font-medium">
132+
Ver subtópicos
133+
</span>
134+
<div className={`w-2 h-2 rounded-full transition-colors ${
135+
selectedTheme?.id === theme.id
136+
? "bg-primary"
137+
: "bg-muted group-hover:bg-primary/50"
138+
}`} />
139+
</div>
207140
</div>
208-
</div>
141+
</button>
209142
))}
210143
</div>
211144
)}
212145
</div>
146+
147+
{/* Painel Lateral de Subtópicos */}
148+
{selectedTheme && (
149+
<div className="lg:w-96 w-full bg-card border rounded-xl shadow-lg flex flex-col max-h-[calc(100vh-200px)] lg:max-h-[80vh] lg:absolute lg:right-6 lg:top-24">
150+
{/* Header do Painel */}
151+
<div className="p-6 border-b flex items-start justify-between bg-muted/10 rounded-t-xl">
152+
<div className="flex-1 pr-4">
153+
<div className="flex items-center gap-2 mb-2">
154+
<div className="w-3 h-3 rounded-full bg-primary" />
155+
<h2 className="text-xl font-bold text-foreground">
156+
{selectedTheme.title}
157+
</h2>
158+
</div>
159+
<p className="text-sm text-muted-foreground">
160+
{selectedTheme.description}
161+
</p>
162+
</div>
163+
<button
164+
onClick={handleClosePanel}
165+
className="text-muted-foreground hover:text-foreground hover:bg-muted rounded-full w-8 h-8 flex items-center justify-center transition-colors"
166+
aria-label="Fechar painel"
167+
>
168+
✕
169+
</button>
170+
</div>
171+
172+
{/* Lista de Subtópicos */}
173+
<div className="flex-1 overflow-auto p-6">
174+
{loadingSubTopics ? (
175+
<div className="flex flex-col items-center justify-center py-12">
176+
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mb-4" />
177+
<p className="text-sm text-muted-foreground">
178+
Carregando subtópicos...
179+
</p>
180+
</div>
181+
) : subTopics.length === 0 ? (
182+
<div className="text-center py-8 border-2 border-dashed rounded-lg">
183+
<p className="text-muted-foreground text-sm">
184+
Nenhum subtópico disponível para este tema.
185+
</p>
186+
</div>
187+
) : (
188+
<div className="space-y-4">
189+
<div className="flex justify-between items-center">
190+
<h3 className="font-semibold text-foreground">
191+
Subtópicos ({subTopics.length})
192+
</h3>
193+
<span className="text-xs text-muted-foreground">
194+
Selecione uma opção
195+
</span>
196+
</div>
197+
{subTopics.map((subTopic) => (
198+
<div
199+
key={subTopic.id}
200+
className="border rounded-lg p-4 hover:border-primary/50 hover:shadow-sm transition-all bg-background/50"
201+
>
202+
<h4 className="font-semibold text-foreground mb-2">
203+
{subTopic.sub_topic}
204+
</h4>
205+
<p className="text-xs text-muted-foreground mb-4 line-clamp-2">
206+
{subTopic.description}
207+
</p>
208+
<div className="flex gap-2">
209+
<Link
210+
href={`/play/${subTopic.id}`}
211+
className="flex-1"
212+
>
213+
<Button
214+
size="sm"
215+
className="w-full text-xs"
216+
>
217+
Jogar
218+
</Button>
219+
</Link>
220+
<Link
221+
href={`/teste/question?subTopic=${subTopic.id}`}
222+
className="flex-1"
223+
>
224+
<Button
225+
size="sm"
226+
variant="subtle"
227+
className="w-full text-xs"
228+
>
229+
Questões
230+
</Button>
231+
</Link>
232+
</div>
233+
</div>
234+
))}
235+
</div>
236+
)}
237+
</div>
238+
</div>
239+
)}
213240
</div>
214-
)}
241+
</div>
215242
</div>
216243
);
217-
}
244+
}

0 commit comments

Comments
 (0)