feat: implements new ResponsiveLayout component

Author: wilcorrea

src/components/docs/ResponsiveLayoutSidebar.tsx

@@ -9,7 +9,7 @@ interface ResponsiveLayoutSidebarItem {
 
 interface ResponsiveLayoutSidebarProps {
   items: ResponsiveLayoutSidebarItem[];
-  onItemClick: (id: string) => void;
+  onItemClick: (item: ResponsiveLayoutSidebarItem) => void;
   title?: string;
   description?: string;
 }
@@ -24,7 +24,7 @@ const ResponsiveLayoutSidebar = (props: ResponsiveLayoutSidebarProps) => {
       {items.map(item => (
         <button
           key={item.id}
-          onClick={() => onItemClick(item.id)}
+          onClick={() => onItemClick(item)}
           className={cn(
             "block w-full text-left transition-colors py-1 hover:text-primary",
             item.level === 1

src/pages/Docs/Examples.tsx

@@ -1,9 +1,15 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Clock, Code } from "lucide-react";
-import { DocsResponsiveSidebar, SidebarItem } from "@/components/DocsResponsiveSidebar";
+import { ResponsiveLayout, ResponsiveLayoutRef } from "@/components/docs/ResponsiveLayout.tsx";
+import {
+  ResponsiveLayoutSidebar,
+  ResponsiveLayoutSidebarItem,
+} from "@/components/docs/ResponsiveLayoutSidebar.tsx";
+import React, { useRef } from "react";
+import { Outlet, useNavigate } from "react-router-dom";
 
 const Examples = () => {
-  const sidebarItems: SidebarItem[] = [
+  const layoutRef = useRef<ResponsiveLayoutRef>(null);
+  const navigate = useNavigate();
+  const sidebarItems: ResponsiveLayoutSidebarItem[] = [
     { id: "constructo", label: "Constructo" },
     { id: "validacao-forms", label: "Validação de Forms", level: 1 },
     { id: "gerenciamento-estado", label: "Gerenciamento de Estado", level: 1 },
@@ -15,54 +21,17 @@ const Examples = () => {
     { id: "testes-automatizados", label: "Testes Automatizados", level: 1 },
   ];
 
-  const handleItemClick = (id: string) => {
-    const element = document.getElementById(id);
-    element?.scrollIntoView({ behavior: "smooth" });
+  const handleItemClick = (item: ResponsiveLayoutSidebarItem) => {
+    navigate(`/docs/example/${item.id}`);
   };
 
   return (
-    <div className="flex gap-8">
-      <DocsResponsiveSidebar
-        items={sidebarItems}
-        onItemClick={handleItemClick}
-        title="Exemplos"
-        description="Navegue pelos exemplos práticos"
-      />
-
-      {/* Conteúdo Principal - Coluna Direita */}
-      <div className="flex-1 space-y-8 lg:border-l lg:pl-8 pt-[16px]">
-        <div className="space-y-4">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
-            Exemplos Práticos
-          </h1>
-          <p className="text-xl text-muted-foreground">
-            Exemplos práticos e casos de uso dos pacotes Devitools.
-          </p>
-        </div>
-
-        <Card className="text-center py-12">
-          <CardHeader className="pb-4">
-            <div className="flex justify-center mb-4">
-              <div className="relative">
-                <Code className="h-12 w-12 text-muted-foreground" />
-                <Clock className="h-6 w-6 text-amber-500 absolute -top-1 -right-1" />
-              </div>
-            </div>
-            <CardTitle className="text-2xl">Exemplos em Desenvolvimento</CardTitle>
-            <CardDescription className="text-base">
-              Estamos preparando exemplos práticos e detalhados para cada pacote
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <p className="text-muted-foreground">
-              Em breve você encontrará aqui exemplos completos de uso dos pacotes Devitools,
-              incluindo casos de uso comuns, implementações de referência e código de exemplo pronto
-              para usar.
-            </p>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
+    <ResponsiveLayout
+      ref={layoutRef}
+      title={"Aprendendo com Exemplos"}
+      leftContent={<ResponsiveLayoutSidebar items={sidebarItems} onItemClick={handleItemClick} />}
+      rightContent={<Outlet />}
+    />
   );
 };
 

src/pages/Docs/Introduction.tsx

@@ -10,8 +10,8 @@ import React, { useRef } from "react";
 
 const Introduction = () => {
   const layoutRef = useRef<ResponsiveLayoutRef>(null);
-  const scrollToSection = (id: string) => {
-    const element = document.getElementById(id);
+  const scrollToSection = (item: ResponsiveLayoutSidebarItem) => {
+    const element = document.getElementById(item.id);
     if (element) {
       element.scrollIntoView({ behavior: "smooth" });
     }

src/pages/Docs/Reference.tsx

@@ -52,8 +52,8 @@ const Reference = () => {
     },
   ];
 
-  const handleItemClick = (id: string) => {
-    navigate(`/docs/reference/${id}`);
+  const handleItemClick = (item: ResponsiveLayoutSidebarItem) => {
+    navigate(`/docs/reference/${item.id}`);
   };
 
   return (