React में Props

function Greeting(props) {
  return <p>Hello, {props.name}! You are in class {props.cls}.</p>
}

export default function Page() {
  return (
    <>
      <Greeting name="Riya" cls={10} />
      <Greeting name="Aman" cls={12} />
    </>
  )
}

// Destructure props directly in the function brackets
function Price({ amount, currency = '₹', discount = 0 }) {
  const final = amount - (amount * discount) / 100
  return (
    <p>
      {currency}{final.toLocaleString('en-IN')}
      {discount > 0 && <small> ({discount}% off)</small>}
    </p>
  )
}

<Price amount={4999} />               // ₹4,999
<Price amount={4999} discount={20} /> // ₹3,999.2 (20% off)

function Course({ title, fee, topics, isNew, onEnquire, teacher }) {
  return (
    <div>
      <h3>{title} {isNew && '🆕'}</h3>
      <p>Fee: ₹{fee} · Teacher: {teacher.name}</p>
      <ul>{topics.map((t) => <li key={t}>{t}</li>)}</ul>
      <button onClick={onEnquire}>Enquire</button>
    </div>
  )
}

<Course
  title="Python + AI"              // string
  fee={3499}                       // number
  isNew                            // boolean true
  topics={['Basics', 'Pandas']}    // array
  teacher={{ name: 'Gagan Sir' }}  // object
  onEnquire={() => alert('Thanks!')} // function (Client Component only)
/>

// components/Box.jsx — a wrapper that accepts any content
export default function Box({ title, children }) {
  return (
    <section style={{ border: '1px solid #e2e8f0', borderRadius: 12, padding: 16 }}>
      <h2>{title}</h2>
      {children}
    </section>
  )
}

// usage — everything between <Box> and </Box> is "children"
<Box title="Admissions open">
  <p>New batch starts on 1 November.</p>
  <a href="/contact">Book a demo</a>
</Box>

// components/CourseCard.jsx (from the EduSite project)
import Image from 'next/image'
import Link from 'next/link'
import { rupees } from '@/lib/courses'

export default function CourseCard({ course }) {
  return (
    <article className="card">
      <Link href={`/courses/${course.slug}`}>
        <Image src={course.image} alt={course.title} width={600} height={338} />
      </Link>
      <div style={{ padding: 18 }}>
        <span className="badge">{course.level}</span>
        <h3>{course.title}</h3>
        <p>{course.summary}</p>
        <p><b>{rupees(course.fee)}</b> · {course.duration}</p>
      </div>
    </article>
  )
}

// app/page.jsx
{courses.slice(0, 3).map((c) => <CourseCard key={c.slug} course={c} />)}