تطبيق إدارة الاشتراكات

import React, { useState } from 'react';

const App = () => {
  const [email, setEmail] = useState('');
  const [channelName, setChannelName] = useState('');
  const [apiKey, setApiKey] = useState('');
  const [selectedChannel, setSelectedChannel] = useState('');
  const [isAppRunning, setIsAppRunning] = useState(', {"appJs" : "false", "appCss": "import React, { useState } from 'react';

const App = () => {
  const [email, setEmail] = useState('');
  const [channelName, setChannelName] = useState('');
  const [apiKey, setApiKey] = useState('');
  const [selectedChannel, setSelectedChannel] = useState('');
  const [isAppRunning, setIsAppRunning] = useState(', {"appJs" : "false", "appCss": "import React, { useState } from 'react';

const App = () => {
  const [email, setEmail] = useState('');
  const [channelName, setChannelName] = useState('');
  const [apiKey, setApiKey] = useState('');
  const [selectedChannel, setSelectedChannel] = useState('');
  const [isAppRunning, setIsAppRunning] = useState('false');

  const handleSubmit = (e) => {
    e.preventDefault();
    // Handle form submission
  };

  return (
    <div className='min-h-screen bg-gray-100 p-6'>
      <div className='max-w-4xl mx-auto'>
        <h1 className='text-3xl font-bold text-center mb-8'>Email Subscription Management</h1>
        <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
          <div className='bg-white p-6 rounded-lg shadow-md'>
            <h2 className='text-xl font-semibold mb-4'>Add Email and Channel</h2>
            <form onSubmit={handleSubmit}>
              <div className='mb-4'>
                <label className='block text-sm font-medium text-gray-700'>Email</label>
                <input
                  type='email'
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className='mt-1 block w-full rounded-md border-gray-300 shadow-sm'
                  required
                />
              </div>
              <div className='mb-4'>
                <label className='block text-sm font-medium text-gray-700'>Channel Name</label>
                <input
                  type='text'
                  value={channelName}
                  onChange={(e) => setChannelName(e.target.value)}
                  className='mt-1 block w-full rounded-md border-gray-300 shadow-sm'
                  required
                />
              </div>
              <div className='mb-4'>
                <label className='block text-sm font-medium text-gray-700'>YouTube API Key</label>
                <input
                  type='text'
                  value={apiKey}
                  onChange={(e) => setApiKey(e.target.value)}
                  className='mt-1 block w-full rounded-md border-gray-300 shadow-sm'
                />
              </div>
              <button type='submit' className='w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700'>
                Submit
              </button>
            </form>
          </div>
          <div className='bg-white p-6 rounded-lg shadow-md'>
            <h2 className='text-xl font-semibold mb-4'>Subscribe to Channel</h2>
            <select
              value={selectedChannel}
              onChange={(e) => setSelectedChannel(e.target.value)}
              className='mt-1 block w-full rounded-md border-gray-300 shadow-sm'
            >
              <option value=''>Select a channel</option>
              {/* Populate with channels */}
            </select>
            <button className='w-full mt-4 bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700'>
              Subscribe
            </button>
          </div>
          <div className='bg-white p-6 rounded-lg shadow-md'>
            <h2 className='text-xl font-semibold mb-4'>App Control</h2>
            <button
              onClick={() => setIsAppRunning(!isAppRunning)}
              className={`w-full ${isAppRunning ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700'} text-white py-2 px-4 rounded-md`}
            >
              {isAppRunning ? 'Stop' : 'Start'}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;", "appCss": "@tailwind base;
@tailwind components;
@tailwind utilities;

/* Additional custom styles can be added here */"}