Afficher Ces Code Comme Si Il Etait Developper En VS Code(// Src/app/admin/layouttsx use Client;

afficher ces code comme si il etait developper en VS code(// src/app/admin/layout.tsx "use client"; import React, { useState, createContext, useContext } from "react"; // ... autres imports // 1. Définition du type d'utilisateur et des données initiales export type User = { id: number; name: string; email: string; role: "Admin" | "Enseignant" | "Étudiant"; }; const initialUsers: User[] = [ { id: 1, name: "Admin User", email: "[email protected]", role: "Admin" }, // ... autres utilisateurs ]; // 2. Création du contexte pour partager les données type UsersContextType = { users: User[]; addUser: (user: Omit<User, 'id'>) => void; getNextId: () => number; }; const UsersContext = createContext<UsersContextType | null>(null); // 3. Hook personnalisé pour accéder facilement au contexte export function useUsers() { const context = useContext(UsersContext); if (!context) { throw new Error("useUsers must be used within a UsersProvider"); } return context; } // 4. Le composant Layout qui "fournit" le contexte export default function AdminLayout({ children }: { children: React.ReactNode; }) { const [users, setUsers] = useState<User[]>(initialUsers); const getNextId = () => { /* ... */ }; const addUser = (newUser: Omit<User, 'id'>) => { /* ... */ }; // Toutes les pages enfants (children) auront accès à `users`, `addUser`, etc. return ( <UsersContext.Provider value={{ users, addUser, getNextId }}> <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]"> {/* ... reste du layout */} <main>{children}</main> </div> </UsersContext.Provider> ); }

15.10.2025 13:39