Function AlgorithmCard

src/pages/AlgorithmExplorer.tsx:19–27

({ algo, active, onSelect })

}

const AlgorithmCard: React.FC<{ algo: AlgorithmDetail; active: boolean; onSelect: () => void }> = ({ algo, active, onSelect }) => (
  <button onClick={onSelect} className={`w-full rounded-md border px-3 py-2 text-left transition hover:border-blue-600 hover:bg-neutral-900/40 ${active ? "border-blue-600 bg-neutral-900/60" : "border-neutral-800 bg-neutral-900/20"}`}>
    <div className="flex items-center justify-between">
      <span className="font-mono text-[11px] tracking-wide text-gray-200">{algo.name}</span>
      <span className="badge !text-[9px]">{algo.category}</span>
    </div>
    <p className="mt-1 line-clamp-2 text-[10px] leading-snug text-gray-400">{algo.overview}</p>
  </button>
);

const AlgorithmExplorer: React.FC = () => {
  const { t, i18n } = useTranslation();