Mr. Fanny 应用开发指南

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

function App() {
  const [language, setLanguage] = useState('en');
  const [userType, setUserType] = useState('customer');

  const handleLanguageChange = (lang) => {
    setLanguage(lang);
  };

  const handleUserTypeChange = (type) => {
    setUserType(type);
  };

  return (
    <div className="App">
      <header className="bg-blue-600 text-white p-4">
        <h1 className="text-2xl font-bold">Mr. Fanny</h1>
        <div className="flex space-x-4 mt-2">
          <button onClick={() => handleLanguageChange('en')} className="px-3 py-1 bg-blue-500 rounded">English</button>
          <button onClick={() => handleLanguageChange('ar')} className="px-3 py-1 bg-blue-500 rounded">عربي</button>
        </div>
        <div className="flex space-x-4 mt-2">
          <button onClick={() => handleUserTypeChange('customer')} className="px-3 py-1 bg-blue-500 rounded">Customer</button>
          <button onClick={() => handleUserTypeChange('technician')} className="px-3 py-1 bg-blue-500 rounded">Technician</button>
          <button onClick={() => handleUserTypeChange('admin')} className="px-3 py-1 bg-blue-500 rounded">Admin</button>
        </div>
      </header>

      {userType === 'customer' && (
        <div className="p-4">
          <h2 className="text-xl font-semibold">Customer Interface</h2>
          <div className="mt-4">
            <input type="text" placeholder="Enter your location" className="w-full p-2 border rounded" />
            <input type="text" placeholder="Enter your phone number" className="w-full p-2 border rounded mt-2" />
            <select className="w-full p-2 border rounded mt-2">
              <option>Choose service type</option>
              <option>Electrician</option>
              <option>Plumber</option>
              <option>AC Technician</option>
            </select>
            <button className="w-full bg-blue-500 text-white p-2 rounded mt-2">Submit Request</button>
          </div>
        </div>
      )}

      {userType === 'technician' && (
        <div className="p-4">
          <h2 className="text-xl font-semibold">Technician Interface</h2>
          <div className="mt-4">
            <input type="text" placeholder="Enter your name" className="w-full p-2 border rounded" />
            <input type="text" placeholder="Enter your service type" className="w-full p-2 border rounded mt-2" />
            <input type="text" placeholder="Enter your area" className="w-full p-2 border rounded mt-2" />
            <input type="text" placeholder="Enter your phone number" className="w-full p-2 border rounded mt-2" />
            <input type="file" className="w-full p-2 border rounded mt-2" />
            <button className="w-full bg-blue-500 text-white p-2 rounded mt-2">Register</button>
          </div>
        </div>
      )}

      {userType === 'admin' && (
        <div className="p-4">
          <h2 className="text-xl font-semibold">Admin Panel</h2>
          <div className="mt-4">
            <button className="w-full bg-blue-500 text-white p-2 rounded">View Technician Registrations</button>
            <button className="w-full bg-blue-500 text-white p-2 rounded mt-2">View Approved Technicians</button>
            <button className="w-full bg-blue-500 text-white p-2 rounded mt-2">Monitor Service Requests</button>
            <button className="w-full bg-blue-500 text-white p-2 rounded mt-2">Track Technician Payments</button>
          </div>
        </div>
      )}

      <footer className="bg-blue-600 text-white p-4 mt-8">
        <p>© 2025 Mr. Fanny. All rights reserved.</p>
      </footer>
    </div>
  );
}

export default App;