YouTube Subscribers App

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [username, setUsername] = useState('');
  const [likes, setLikes] = useState('');
  const [subscribers, setSubscribers] = useState('');
  const [generatedData, setGeneratedData] = useState(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    setGeneratedData({
      username,
      likes: parseInt(likes),
      subscribers: parseInt(subscribers)
    });
  };

  return (
    <div className="App min-h-screen bg-gradient-to-br from-purple-500 to-blue-500 flex flex-col items-center justify-center text-white">
      <h1 className="text-4xl font-bold mb-8">YouTube Subscribers & Likes Generator</h1>
      <form onSubmit={handleSubmit} className="bg-white p-8 rounded-lg shadow-lg text-black w-full max-w-md">
        <div className="mb-4">
          <label className="block text-sm font-medium mb-2">Username</label>
          <input
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            className="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
            required
          />
        </div>
        <div className="mb-4">
          <label className="block text-sm font-medium mb-2">Likes</label>
          <input
            type="number"
            value={likes}
            onChange={(e) => setLikes(e.target.value)}
            className="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
            required
          />
        </div>
        <div className="mb-6">
          <label className="block text-sm font-medium mb-2">Subscribers</label>
          <input
            type="number"
            value={subscribers}
            onChange={(e) => setSubscribers(e.target.value)}
            className="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
            required
          />
        </div>
        <button
          type="submit"
          className="w-full bg-purple-600 text-white p-2 rounded-lg hover:bg-purple-700 transition duration-300"
        >
          Generate
        </button>
      </form>
      {generatedData && (
        <div className="mt-8 bg-white p-6 rounded-lg shadow-lg text-black w-full max-w-md">
          <h2 className="text-2xl font-bold mb-4">Generated Data</h2>
          <p><strong>Username:</strong> {generatedData.username}</p>
          <p><strong>Likes:</strong> {generatedData.likes}</p>
          <p><strong>Subscribers:</strong> {generatedData.subscribers}</p>
        </div>
      )}
      <footer className="mt-8 text-sm text-gray-200">
        © 2025 YouTube Subscribers & Likes Generator. All rights reserved.
      </footer>
    </div>
  );
};

export default App;