Boost YouTube Subscribers

import React, { useState } from 'react';

const App = () => {
  const [username, setUsername] = useState('');
  const [subscribers, setSubscribers] = useState(0);
  const [likes, setLikes] = useState(0);
  const [result, setResult] = useState({ subscribers: 0, likes: 0 });

  const handleSubmit = (e) => {
    e.preventDefault();
    setResult({ subscribers, likes });
  };

  return (
    <div className="min-h-screen bg-gradient-to-r from-blue-500 to-purple-600 flex flex-col items-center justify-center p-4">
      <h1 className="text-4xl font-bold text-white mb-8">YouTube Analytics</h1>
      <form onSubmit={handleSubmit} className="bg-white p-6 rounded-lg shadow-lg w-full max-w-md">
        <div className="mb-4">
          <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="username">
            YouTube Username
          </label>
          <input
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
            id="username"
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            placeholder="Enter your YouTube username"
          />
        </div>
        <div className="mb-4">
          <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="subscribers">
            Number of Subscribers
          </label>
          <input
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
            id="subscribers"
            type="number"
            value={subscribers}
            onChange={(e) => setSubscribers(parseInt(e.target.value, 10))}
            placeholder="Desired subscribers"
          />
        </div>
        <div className="mb-6">
          <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="likes">
            Number of Likes
          </label>
          <input
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
            id="likes"
            type="number"
            value={likes}
            onChange={(e) => setLikes(parseInt(e.target.value, 10))}
            placeholder="Desired likes"
          />
        </div>
        <button
          type="submit"
          className="w-full bg-blue-500 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-300"
        >
          Get Subscribers & Likes
        </button>
      </form>
      {result.subscribers > 0 && result.likes > 0 && (
        <div className="mt-8 bg-white p-6 rounded-lg shadow-lg w-full max-w-md text-center">
          <h2 className="text-2xl font-bold text-gray-800 mb-4">Results</h2>
          <p className="text-gray-700">Subscribers: <span className="font-bold">{result.subscribers}</span></p>
          <p className="text-gray-700">Likes: <span className="font-bold">{result.likes}</span></p>
        </div>
      )}
      <footer className="mt-8 text-white text-sm">
        © 2025 YouTube Analytics. All rights reserved.
      </footer>
    </div>
  );
};

export default App;