Skip to content

Commit dfc26e4

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Refatorar página /docs
Criar um novo layout para a página /docs, com um menu superior semelhante a abas. As abas serão: Introdução, Guias, Dicas & Truques, Ecossistema e Sobre. Cada aba será uma subpágina dentro de /docs.
1 parent 256e61d commit dfc26e4

File tree

7 files changed

+753
-116
lines changed

7 files changed

+753
-116
lines changed

‎src/App.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ const App = () => (
3838
<Route path="/serendipity" element={<Serendipity />} />
3939
<Route path="/effulgence" element={<Effulgence />} />
4040
<Route path="/docs" element={<Docs />} />
41+
<Route path="/docs/:tab" element={<Docs />} />
4142
<Route path="/docs/constructo" element={<DocsConstructo />} />
4243
<Route path="/docs/serendipity" element={<DocsSerendipity />} />
4344
<Route path="/docs/effulgence" element={<DocsEffulgence />} />

‎src/pages/Docs.tsx‎

Lines changed: 54 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,67 @@
1-
import { DocsLayout } from "@/components/DocsLayout";
2-
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
3-
import { Badge } from "@/components/ui/badge";
4-
import { BookOpen, Package, Wrench, Layers } from "lucide-react";
1+
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
2+
import { useLocation, useNavigate } from "react-router-dom";
3+
import { useEffect } from "react";
54
import Header from "@/components/Header";
65
import Footer from "@/components/Footer";
6+
import DocsIntroducao from "./docs/DocsIntroducao";
7+
import DocsGuias from "./docs/DocsGuias";
8+
import DocsDicasTruques from "./docs/DocsDicasTruques";
9+
import DocsEcossistema from "./docs/DocsEcossistema";
10+
import DocsSobre from "./docs/DocsSobre";
711

812
const Docs = () => {
13+
const location = useLocation();
14+
const navigate = useNavigate();
15+
16+
// Extrair a aba ativa da URL
17+
const currentTab = location.pathname.split('/docs/')[1] || 'introducao';
18+
19+
const handleTabChange = (value: string) => {
20+
navigate(`/docs/${value}`);
21+
};
22+
23+
// Redirecionar para /docs/introducao se estiver apenas em /docs
24+
useEffect(() => {
25+
if (location.pathname === '/docs') {
26+
navigate('/docs/introducao', { replace: true });
27+
}
28+
}, [location.pathname, navigate]);
29+
930
return (
1031
<div className="min-h-screen flex flex-col" style={{ background: 'var(--gradient-background)' }}>
1132
<Header />
1233
<div className="flex-1 flex flex-col">
13-
<DocsLayout>
14-
<div className="max-w-4xl mx-auto space-y-8">
15-
<div className="space-y-4">
16-
<h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
17-
Documentação Devitools
18-
</h1>
19-
<p className="text-xl text-muted-foreground">
20-
Bem-vindo à documentação oficial dos pacotes Devitools para PHP.
21-
</p>
22-
</div>
23-
24-
<div className="prose prose-slate dark:prose-invert max-w-none">
25-
<h2>Introdução</h2>
26-
<p>
27-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
28-
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
29-
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
30-
</p>
34+
<div className="container mx-auto px-4 py-8">
35+
<Tabs value={currentTab} onValueChange={handleTabChange} className="w-full">
36+
<TabsList className="grid w-full grid-cols-5 mb-8">
37+
<TabsTrigger value="introducao">Introdução</TabsTrigger>
38+
<TabsTrigger value="guias">Guias</TabsTrigger>
39+
<TabsTrigger value="dicas-truques">Dicas & Truques</TabsTrigger>
40+
<TabsTrigger value="ecossistema">Ecossistema</TabsTrigger>
41+
<TabsTrigger value="sobre">Sobre</TabsTrigger>
42+
</TabsList>
3143

32-
<p>
33-
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
34-
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
35-
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
36-
</p>
37-
38-
<h3>Requisitos do Sistema</h3>
39-
<ul>
40-
<li>PHP 8.1 ou superior</li>
41-
<li>Composer para gerenciamento de dependências</li>
42-
<li>Conhecimento básico de PHP orientado a objetos</li>
43-
</ul>
44-
</div>
45-
46-
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
47-
<Card className="hover:shadow-lg transition-shadow">
48-
<CardHeader>
49-
<div className="flex items-center space-x-2">
50-
<Wrench className="h-6 w-6 text-primary" />
51-
<CardTitle>Constructo</CardTitle>
52-
</div>
53-
<CardDescription>
54-
Ferramentas fundamentais para projetos PHP
55-
</CardDescription>
56-
</CardHeader>
57-
<CardContent>
58-
<p className="text-sm text-muted-foreground mb-4">
59-
Sistema completo de serialização, validação e geração de dados fake para acelerar o desenvolvimento PHP.
60-
</p>
61-
<div className="flex flex-wrap gap-2">
62-
<Badge variant="secondary">Serialização</Badge>
63-
<Badge variant="secondary">Validação</Badge>
64-
<Badge variant="secondary">Testing</Badge>
65-
</div>
66-
</CardContent>
67-
</Card>
68-
69-
<Card className="hover:shadow-lg transition-shadow">
70-
<CardHeader>
71-
<div className="flex items-center space-x-2">
72-
<Package className="h-6 w-6 text-accent" />
73-
<CardTitle>Serendipity</CardTitle>
74-
</div>
75-
<CardDescription>
76-
Extensão otimizada para Hyperf
77-
</CardDescription>
78-
</CardHeader>
79-
<CardContent>
80-
<p className="text-sm text-muted-foreground mb-4">
81-
Ferramentas avançadas para desenvolvimento com Hyperf, incluindo workers, rotas e tratamento de erros.
82-
</p>
83-
<div className="flex flex-wrap gap-2">
84-
<Badge variant="secondary">Hyperf</Badge>
85-
<Badge variant="secondary">Workers</Badge>
86-
<Badge variant="secondary">Async</Badge>
87-
</div>
88-
</CardContent>
89-
</Card>
90-
91-
<Card className="hover:shadow-lg transition-shadow">
92-
<CardHeader>
93-
<div className="flex items-center space-x-2">
94-
<Layers className="h-6 w-6 text-success" />
95-
<CardTitle>Effulgence</CardTitle>
96-
</div>
97-
<CardDescription>
98-
Extensão otimizada para Laravel
99-
</CardDescription>
100-
</CardHeader>
101-
<CardContent>
102-
<p className="text-sm text-muted-foreground mb-4">
103-
Integração completa com Laravel, incluindo Eloquent, controllers simplificados e middlewares otimizados.
104-
</p>
105-
<div className="flex flex-wrap gap-2">
106-
<Badge variant="secondary">Laravel</Badge>
107-
<Badge variant="secondary">Eloquent</Badge>
108-
<Badge variant="secondary">Controllers</Badge>
109-
</div>
110-
</CardContent>
111-
</Card>
112-
</div>
113-
114-
<div className="bg-muted/50 rounded-lg p-6">
115-
<h3 className="text-lg font-semibold mb-3">Instalação Rápida</h3>
116-
<p className="text-muted-foreground mb-4">
117-
Instale os pacotes Devitools via Composer para começar a usar em seus projetos PHP.
118-
</p>
119-
<div className="bg-background rounded border p-4 font-mono text-sm">
120-
composer require devitools/constructo<br />
121-
composer require devitools/serendipity<br />
122-
composer require devitools/effulgence
123-
</div>
124-
</div>
44+
<TabsContent value="introducao" className="mt-0">
45+
<DocsIntroducao />
46+
</TabsContent>
47+
48+
<TabsContent value="guias" className="mt-0">
49+
<DocsGuias />
50+
</TabsContent>
51+
52+
<TabsContent value="dicas-truques" className="mt-0">
53+
<DocsDicasTruques />
54+
</TabsContent>
55+
56+
<TabsContent value="ecossistema" className="mt-0">
57+
<DocsEcossistema />
58+
</TabsContent>
59+
60+
<TabsContent value="sobre" className="mt-0">
61+
<DocsSobre />
62+
</TabsContent>
63+
</Tabs>
12564
</div>
126-
</DocsLayout>
12765
</div>
12866
<Footer />
12967
</div>

‎src/pages/docs/DocsDicasTruques.tsx‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
2+
import { Badge } from "@/components/ui/badge";
3+
import { Lightbulb, Target, Rocket, Shield } from "lucide-react";
4+
5+
const DocsDicasTruques = () => {
6+
return (
7+
<div className="max-w-4xl mx-auto space-y-8">
8+
<div className="space-y-4">
9+
<h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
10+
Dicas & Truques
11+
</h1>
12+
<p className="text-xl text-muted-foreground">
13+
Dicas práticas e truques para maximizar sua produtividade com Devitools.
14+
</p>
15+
</div>
16+
17+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
18+
<Card className="hover:shadow-lg transition-shadow">
19+
<CardHeader>
20+
<div className="flex items-center space-x-2">
21+
<Lightbulb className="h-6 w-6 text-yellow-500" />
22+
<CardTitle>Produtividade</CardTitle>
23+
</div>
24+
<CardDescription>
25+
Acelere seu desenvolvimento
26+
</CardDescription>
27+
</CardHeader>
28+
<CardContent>
29+
<div className="space-y-3">
30+
<div className="p-3 bg-muted/50 rounded">
31+
<h4 className="font-semibold mb-1">Geração automática de factories</h4>
32+
<p className="text-sm text-muted-foreground">
33+
Use os geradores do Constructo para criar factories de teste automaticamente.
34+
</p>
35+
</div>
36+
<div className="p-3 bg-muted/50 rounded">
37+
<h4 className="font-semibold mb-1">Hot reload em desenvolvimento</h4>
38+
<p className="text-sm text-muted-foreground">
39+
Configure hot reload com Serendipity para desenvolvimento mais ágil.
40+
</p>
41+
</div>
42+
</div>
43+
</CardContent>
44+
</Card>
45+
46+
<Card className="hover:shadow-lg transition-shadow">
47+
<CardHeader>
48+
<div className="flex items-center space-x-2">
49+
<Target className="h-6 w-6 text-blue-500" />
50+
<CardTitle>Debugging</CardTitle>
51+
</div>
52+
<CardDescription>
53+
Encontre e corrija bugs rapidamente
54+
</CardDescription>
55+
</CardHeader>
56+
<CardContent>
57+
<div className="space-y-3">
58+
<div className="p-3 bg-muted/50 rounded">
59+
<h4 className="font-semibold mb-1">Logs estruturados</h4>
60+
<p className="text-sm text-muted-foreground">
61+
Configure logs estruturados para facilitar o debugging em produção.
62+
</p>
63+
</div>
64+
<div className="p-3 bg-muted/50 rounded">
65+
<h4 className="font-semibold mb-1">Profiling de performance</h4>
66+
<p className="text-sm text-muted-foreground">
67+
Use ferramentas de profiling integradas para identificar gargalos.
68+
</p>
69+
</div>
70+
</div>
71+
</CardContent>
72+
</Card>
73+
74+
<Card className="hover:shadow-lg transition-shadow">
75+
<CardHeader>
76+
<div className="flex items-center space-x-2">
77+
<Rocket className="h-6 w-6 text-green-500" />
78+
<CardTitle>Deploy & DevOps</CardTitle>
79+
</div>
80+
<CardDescription>
81+
Otimize seu pipeline de deploy
82+
</CardDescription>
83+
</CardHeader>
84+
<CardContent>
85+
<div className="space-y-3">
86+
<div className="p-3 bg-muted/50 rounded">
87+
<h4 className="font-semibold mb-1">Docker optimizado</h4>
88+
<p className="text-sm text-muted-foreground">
89+
Configurações Docker específicas para aplicações Devitools.
90+
</p>
91+
</div>
92+
<div className="p-3 bg-muted/50 rounded">
93+
<h4 className="font-semibold mb-1">CI/CD automático</h4>
94+
<p className="text-sm text-muted-foreground">
95+
Pipelines de CI/CD otimizados para projetos PHP modernos.
96+
</p>
97+
</div>
98+
</div>
99+
</CardContent>
100+
</Card>
101+
102+
<Card className="hover:shadow-lg transition-shadow">
103+
<CardHeader>
104+
<div className="flex items-center space-x-2">
105+
<Shield className="h-6 w-6 text-red-500" />
106+
<CardTitle>Segurança</CardTitle>
107+
</div>
108+
<CardDescription>
109+
Melhores práticas de segurança
110+
</CardDescription>
111+
</CardHeader>
112+
<CardContent>
113+
<div className="space-y-3">
114+
<div className="p-3 bg-muted/50 rounded">
115+
<h4 className="font-semibold mb-1">Validação robusta</h4>
116+
<p className="text-sm text-muted-foreground">
117+
Implemente validação em múltiplas camadas com Constructo.
118+
</p>
119+
</div>
120+
<div className="p-3 bg-muted/50 rounded">
121+
<h4 className="font-semibold mb-1">Rate limiting</h4>
122+
<p className="text-sm text-muted-foreground">
123+
Configure rate limiting eficiente com Serendipity.
124+
</p>
125+
</div>
126+
</div>
127+
</CardContent>
128+
</Card>
129+
</div>
130+
131+
<div className="bg-gradient-to-r from-primary/10 to-accent/10 rounded-lg p-6 border border-primary/20">
132+
<h3 className="text-lg font-semibold mb-3 flex items-center gap-2">
133+
<Lightbulb className="h-5 w-5" />
134+
Dica do Dia
135+
</h3>
136+
<p className="text-muted-foreground mb-3">
137+
Você sabia que pode usar o modo de desenvolvimento do Serendipity para hot reload automático?
138+
Isso acelera significativamente o ciclo de desenvolvimento.
139+
</p>
140+
<div className="flex gap-2">
141+
<Badge variant="secondary">Serendipity</Badge>
142+
<Badge variant="secondary">Desenvolvimento</Badge>
143+
</div>
144+
</div>
145+
</div>
146+
);
147+
};
148+
149+
export default DocsDicasTruques;

0 commit comments

Comments
 (0)