مكوّنات الخادم والعميل

// lib/products.ts
import "server-only";

export async function getProducts() {
  // هنا استعلام قاعدة بيانات حقيقي بمفتاح سرّي من process.env
  return [
    { id: 1, name: "كتاب Git", price: 12, likes: 30 },
    { id: 2, name: "كتاب SQL", price: 15, likes: 12 },
  ];
}

// app/products/page.tsx
import { getProducts } from "@/lib/products";
import { LikeButton } from "./LikeButton";

export default async function ProductsPage() {
  const products = await getProducts();
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>
          {p.name} — {p.price} دينار <LikeButton initialLikes={p.likes} />
        </li>
      ))}
    </ul>
  );
}

// app/products/LikeButton.tsx
"use client";

import { useState } from "react";

export function LikeButton({ initialLikes }: { initialLikes: number }) {
  const [likes, setLikes] = useState(initialLikes);
  const [liked, setLiked] = useState(false);

  return (
    <button
      onClick={() => {
        setLiked(!liked);
        setLikes(likes + (liked ? -1 : 1));
      }}
      aria-pressed={liked}
    >
      {liked ? "❤️" : "🤍"} {likes}
    </button>
  );
}

"use client";

export function Broken() {
  const theme = localStorage.getItem("theme");   // ❌ ReferenceError: localStorage is not defined
  return <p>{theme}</p>;
}

// app/_components/ThemeLabel.tsx
"use client";

import { useEffect, useState } from "react";

export function ThemeLabel() {
  const [theme, setTheme] = useState<string | null>(null);
  useEffect(() => {
    setTheme(localStorage.getItem("theme") ?? "light");   // ✅ يعمل في المتصفّح فقط
  }, []);
  return <p>الوضع: {theme ?? "..."}</p>;
}

<LikeButton initialLikes={p.likes} />

// ❌ في مكوّن خادم:
<LikeButton onLike={() => console.log("liked")} />
// Error: Event handlers cannot be passed to Client Component props.

// app/_components/Collapsible.tsx
"use client";

import { useState } from "react";

export function Collapsible({ title, children }: { title: string; children: React.ReactNode }) {
  const [open, setOpen] = useState(false);
  return (
    <section>
      <button onClick={() => setOpen(!open)}>{open ? "▲" : "▼"} {title}</button>
      {open && children}
    </section>
  );
}

// app/faq/page.tsx
import { Collapsible } from "../_components/Collapsible";

async function Answer() {
  // مكوّن خادم: يستطيع جلب بيانات
  return <p>نعم، كل الدروس مجانية.</p>;
}

export default function FaqPage() {
  return (
    <Collapsible title="هل الدروس مجانية؟">
      <Answer />
    </Collapsible>
  );
}

// app/_components/ThemeProvider.tsx
"use client";

import { createContext, useContext, useState } from "react";

const ThemeContext = createContext<{ dark: boolean; toggle: () => void }>({ dark: false, toggle: () => {} });

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [dark, setDark] = useState(false);
  return <ThemeContext.Provider value={{ dark, toggle: () => setDark(!dark) }}>{children}</ThemeContext.Provider>;
}

export const useTheme = () => useContext(ThemeContext);

// app/layout.tsx
import { ThemeProvider } from "./_components/ThemeProvider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ar" dir="rtl">
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

// app/_components/Carousel.tsx
"use client";
export { Carousel } from "some-carousel-lib";

Layout (خادم)
├── Logo (خادم)
├── NavLinks (خادم)
├── SearchBox (عميل)       ← حقل بحث تفاعلي
└── Page (خادم)
    ├── ProductList (خادم)  ← يجلب البيانات
    │   └── LikeButton (عميل)
    └── Reviews (خادم)