Home.js

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import './Home.css';

function Home() {
  const [code, setCode] = useState('');
  const [errorMessage, setErrorMessage] = useState('');
  const [correctedCode, setCorrectedCode] = useState('');

  const handleFixBug = () => {
    // Add your bug fixing logic here
    setCorrectedCode('// Fixed code will appear here...');
  };

  return (
    <div>
      <nav className="navbar">
        <div className="nav-logo">
          <Link to="/">Fix My Code</Link>
        </div>
        <div className="nav-links">
          <Link to="/login">Login</Link>
          <Link to="#">About</Link>
          <Link to="#">Contact</Link>
        </div>
        <Link to="/signup" className="nav-button signup-button">Sign Up</Link>
      </nav>

      <div className="main-container">
        <div className="content-card">
          <div className="input-section">
            <label htmlFor="codeInput">Code</label>
            <textarea
              id="codeInput"
              value={code}
              onChange={(e) => setCode(e.target.value)}
              placeholder="Enter your code here..."
            />
          </div>

          <div className="input-section">
            <label htmlFor="errorMessageInput">Error Message</label>
            <textarea
              id="errorMessageInput"
              value={errorMessage}
              onChange={(e) => setErrorMessage(e.target.value)}
              placeholder="Describe the error..."
            />
          </div>

          <button className="action-button fix-bug-button" onClick={handleFixBug}>
            Fix Bug
          </button>

          <div className="output-section">
            <label>Corrected Code</label>
            <div className="corrected-code-display">
              <pre>{correctedCode}</pre>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Home;