رفع الحالة ومشاركتها: Context

import { useState } from 'react';import Header from './Header.jsx';import ProductList from './ProductList.jsx'; export default function App() {  const [cart, setCart] = useState([]);           // الحالة في الأب المشترك   function addToCart(product) {    setCart([...cart, product]);  }   return (    <>      <Header count={cart.length} />      <ProductList onAdd={addToCart} />    </>  );}

export default function Header({ count }) {  return <header><b>☕ متجر الواحة</b> · 🛒 السلة: {count}</header>;}

const products = ['قهوة عربية', 'تمر سكري', 'عسل سدر']; export default function ProductList({ onAdd }) {  return (    <ul>      {products.map(p => (        <li key={p}>{p} <button onClick={() => onAdd(p)}>أضف</button></li>      ))}    </ul>  );}

import { useState } from 'react';import { ThemeContext } from './theme.js';import Page from './Page.jsx'; export default function App() {  const [theme, setTheme] = useState('light');  return (    <ThemeContext.Provider value={theme}>      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>        {theme === 'light' ? '🌙 الوضع الداكن' : '☀️ الوضع الفاتح'}      </button>      <Page />    </ThemeContext.Provider>  );}

import { createContext } from 'react'; export const ThemeContext = createContext('light');

import Card from './Card.jsx'; // Page لا يعرف شيئًا عن الوضع، ولا يمرّرهexport default function Page() {  return (    <main>      <Card title="الدورات" />      <Card title="الإعلانات" />    </main>  );}

import { useContext } from 'react';import { ThemeContext } from './theme.js'; export default function Card({ title }) {  const theme = useContext(ThemeContext);  const dark = theme === 'dark';  return (    <div style={{ background: dark ? '#1f2933' : '#f4f7fa', color: dark ? '#e6edf3' : '#111',                  padding: 10, borderRadius: 10, marginTop: 8 }}>      {title} ({theme})    </div>  );}

import { CartProvider } from './CartContext.jsx';import Header from './Header.jsx';import Products from './Products.jsx'; export default function App() {  return (    <CartProvider>      <Header />      <Products />    </CartProvider>  );}

import { createContext, useContext, useState } from 'react'; const CartContext = createContext(null); export function CartProvider({ children }) {  const [items, setItems] = useState([]);  const add = (name, price) => setItems([...items, { name, price }]);  const clear = () => setItems([]);  const total = items.reduce((s, x) => s + x.price, 0);   return (    <CartContext.Provider value={{ items, add, clear, total }}>      {children}    </CartContext.Provider>  );} export function useCart() {  return useContext(CartContext);}

import { useCart } from './CartContext.jsx'; export default function Header() {  const { items, total, clear } = useCart();  return (    <header>      🛒 {items.length} منتجات · {total} ريال{' '}      <button onClick={clear}>تفريغ</button>    </header>  );}

import { useCart } from './CartContext.jsx'; export default function Products() {  const { add } = useCart();  return (    <p>      <button onClick={() => add('قهوة', 35)}>قهوة 35</button>{' '}      <button onClick={() => add('تمر', 45)}>تمر 45</button>    </p>  );}