n3wt-school/Front-End/src/components/Grades/Orientation.js

import React from 'react';

export default function Orientation({ orientation }) {
  return (
    <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
      <h2 className="font-headline text-xl font-semibold mb-4">Orientation & conseils</h2>
      <ul className="divide-y divide-gray-100">
        {orientation.map((item, idx) => (
          <li
            key={idx}
            className="py-3 flex flex-col sm:flex-row sm:items-center sm:justify-between"
          >
            <div>
              <span className="font-medium">{item.counselor}</span>
              <span className="ml-2 text-xs text-gray-400">{item.date}</span>
            </div>
            <div className="text-gray-700 mt-1 sm:mt-0">{item.advice}</div>
          </li>
        ))}
      </ul>
    </div>
  );
}