Branching UI Output Based on Status String Types

import React from 'react';
 
function StatusBadge({ status }) {
  switch (status) {
    case 'online':
      return <span className="badge green">Active Now</span>;
    case 'offline':
      return <span className="badge gray">Disconnected</span>;
    case 'busy':
      return <span className="badge red">Do Not Disturb</span>;
    default:
      return <span className="badge">Unknown Status</span>;
  }
}