const PageTitle = ({ eyebrow, title, description, action }) => (
  <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
    <div>
      <div className="mb-2 text-[9px] uppercase tracking-[.25em] text-cyan-400">{eyebrow}</div>
      <h1 className="text-2xl font-light tracking-tight text-white">{title}</h1>
      <p className="mt-1 max-w-2xl text-xs leading-relaxed text-slate-500">{description}</p>
    </div>
    {action}
  </div>
);
export default PageTitle;