Online React IDE with Live Preview, JSX/TSX & Component Design

import React, { useState } from 'react';

interface ProjectCardProps {
  title: string;
  language: string;
  stars: number;
  onDeploy: (title: string) => void;
}

export const ProjectCard: React.FC<ProjectCardProps> = ({ title, language, stars, onDeploy }) => {
  const [isDeploying, setIsDeploying] = useState(false);

  const handleDeployClick = async () => {
    setIsDeploying(true);
    await onDeploy(title);
    setIsDeploying(false);
  };

  return (
    <div className="project-card">
      <div className="card-header">
        <h3>{title}</h3>
        <span className="badge">{language}</span>
      </div>
      <p>Stars: <strong>{stars}</strong></p>
      <button onClick={handleDeployClick} disabled={isDeploying}>
        {isDeploying ? 'Deploying...' : 'Deploy to Cloud'}
      </button>
    </div>
  );
};