export default function Sample() {
  let name = "سامان";

  return (
    <h1>نام کاربر: {name}</h1>
  );
}

<h1>نتیجه محاسبه: {2 + 2}</h1>
<h1>طول نام: {name.length}</h1>
<h1>نام بزرگ: {name.toUpperCase()}</h1>
<h1>آیا نام وجود دارد؟ {Boolean(name)}</h1>

function sayHello(user) {
  return `سلام ${user}`;
}

function getCurrentYear() {
  return new Date().getFullYear();
}

<h1>{sayHello(name)}</h1>
<p>سال جاری: {getCurrentYear()}</p>

{name && <h2>خوش آمدی {name}</h2>}
{isLoggedIn && <button>خروج</button>}

{age >= 18 ? <p>بزرگسال</p> : <p>کودک</p>}
{score > 60 ? <span className="pass">قبول</span> : <span className="fail">مردود</span>}

let statusMessage;
if (isOnline) {
  statusMessage = <p>آنلاین 🟢</p>;
} else {
  statusMessage = <p>آفلاین 🔴</p>;
}

<div>{statusMessage}</div>

let welcomeMessage = <p>به پنل کاربری خوش آمدید</p>;
let footer = <footer>تمامی حقوق محفوظ است</footer>;

<div>
  {welcomeMessage}
  {footer}
</div>

let users = ["سامان", "علی", "رضا", "مریم"];

<ul>
  {users.map((user, index) => (
    <li key={index}>{user}</li>
  ))}
</ul>

let products = [
  { id: 1, name: "لپ‌تاپ", price: "۲۰ میلیون" },
  { id: 2, name: "موبایل", price: "۱۰ میلیون" },
];

<div>
  {products.map(product => (
    <div key={product.id}>
      <h3>{product.name}</h3>
      <p>قیمت: {product.price}</p>
    </div>
  ))}
</div>

let imageUrl = "https://example.com/photo.jpg";
let altText = "تصویر پروفایل";
let isDisabled = true;

<img src={imageUrl} alt={altText} />
<button disabled={isDisabled}>ارسال</button>
<input type="text" placeholder={name + " را وارد کنید"} />

function handleClick() {
  alert("دکمه کلیک شد!");
}

function handleInputChange(event) {
  console.log(event.target.value);
}

<button onClick={handleClick}>کلیک کن</button>
<input onChange={handleInputChange} />

export default function Sample() {
  let name = "سامان";
  let score = 85;
  let isOnline = true;
  let users = ["سامان", "علی", "رضا"];

  function getStatus(score) {
    return score >= 60 ? "✅ قبول" : "❌ مردود";
  }

  let message = <p>به پنل کاربری خوش آمدید</p>;

  return (
    <>
      <h1>نام: {name}</h1>
      <h2>نمره: {score}</h2>
      <h3>وضعیت: {getStatus(score)}</h3>
      <p>محاسبه: {10 * 5 + 20}</p>
      <p>وضعیت آنلاین: {isOnline ? "🟢 آنلاین" : "🔴 آفلاین"}</p>
      
      <div>{message}</div>

      <h3>لیست کاربران:</h3>
      <ul>
        {users.map((user, index) => (
          <li key={index}>{user}</li>
        ))}
      </ul>
    </>
  );
}