Untitled

// Dashboard.js
import React, { useState } from 'react';
import { useAuth } from '../contexts/AuthContext';
import { useHistory } from 'react-router-dom';
import Header from './Header';
import ProspectForm from './ProspectForm';
import FeedbackArea from './FeedbackArea'; // Make sure this is properly imported

export default function Dashboard() {
  const [error, setError] = useState('');
  const { currentUser, logout } = useAuth();
  const history = useHistory();

  async function handleLogout() {
    setError('');

    try {
      await logout();
      history.push('/login');
    } catch {
      setError('Failed to log out');
    }
  }

  return (
    <div className="flex flex-col h-screen">
      <div className="z-20">
        <Header className="fixed top-0 left-0 w-full h-[20px]" />
      </div>
      <div className="flex flex-1 pt-20">
        <div className="w-1/4 bg-gray-100 p-0 top-20 fixed inset-0 pt-0">
          <ProspectForm />
        </div>
        <div className="flex flex-1 min-w-[70%]"> {/* Adjusted min-w-[70%] to make FeedbackArea wider */}
          <div className="flex flex-col flex-1 min-w-0">
            <div className="flex-1 overflow-y-auto p-4">
              {/* Main content goes here */}
            </div>
            <div className="w-full p-4">
              <FeedbackArea />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
  
}

//FeedbackArea
import React from "react";

export default function FeedbackArea() {
  return (
    <form className="flex items-center justify-between p-8 bg-F6F7FF rounded-lg" style={{ height: '80px' }}>
      <input
        type="text"
        className="flex-1 min-w-200 px-4 py-2 mr-4 text-gray-700 bg-white border rounded-lg focus:outline-none"
        placeholder="Feedback..."
        style={{ borderRadius: '0.625rem' }}
      />
      <button
        type="submit"
        className="flex items-center justify-center px-4 py-2 text-white bg-gradient-to-r from-EF33F9 to-E74B57 rounded-lg"
        style={{ borderRadius: '0.625rem', background: 'linear-gradient(45deg, #EF33F9, #E74B57)' }}
      >
        {/* You would need to add an arrow icon here. As an example, I'm using a Unicode arrow */}
        <span>↑</span>
      </button>
    </form>
  );
}

//Header
import React from 'react';

function Header() {
  return (
    <header className="fixed top-0 left-0 w-full bg-[#F6F7FE] shadow-md p-4 flex justify-between items-center">
      <div className="flex items-center">
        {/* Replace with the actual path to your logo image */}
        <img src="/images/logo.png" alt="Logo" className="w-10 h-10 mr-2" />
        <span className="text-lg font-semibold">Outreach Genie</span>
      </div>
      <div className="flex items-center space-x-4">
        {/* Replace with the actual paths to your profile and settings icons */}
        <img src="/images/account-25.svg" alt="Profile" className="w-8 h-8" />
        <img src="/images/settings.svg" alt="Settings" className="w-8 h-8" />
      </div>
    </header>
  );
}

export default Header;

//Prospect Form
import React, { useState } from 'react';

function ProspectForm() {
  // State to track if Email or Message is selected
  const [contactMethod, setContactMethod] = useState('email');

  return (
    <div className="bg-[#F6F7F9] p-4">
{
  <div className="bg-[#F6F7F9]">
      {/* User Avatar */}
      <div className="flex flex-col items-center">
        <div className="w-24 h-24 bg-gray-200 rounded-full flex items-center justify-center">
          <span className="text-gray-400">Avatar</span>
        </div>
        <div className="mt-2 text-center">
          <p>Name</p>
          <p>Company</p>
        </div>
      </div>

      <form className="mt-4">
        {/* Input Fields */}
        <div className="mb-2">
          <input
            type="text"
            placeholder="Linkedin URL"
            className="w-full px-3 py-2 border border-gray-300 rounded-md"
          />
        </div>
        <div className="mb-2">
          <input
            type="text"
            placeholder="Company URL"
            className="w-full px-3 py-2 border border-gray-300 rounded-md"
          />
        </div>
        <div className="mb-2">
          <textarea
            placeholder="Additional information"
            className="w-full px-3 py-2 border border-gray-300 rounded-md"
            rows="3"
          ></textarea>
        </div>

        {/* Flippable Button */}
        <div className="flex gap-2 mt-4">
          <button
            onClick={() => setContactMethod('email')}
            className={`flex-1 py-2 ${contactMethod === 'email' ? 'bg-pink-500' : 'bg-gray-200'} text-white rounded-md`}
          >
            Email
          </button>
          <button
            onClick={() => setContactMethod('message')}
            className={`flex-1 py-2 ${contactMethod === 'message' ? 'bg-pink-500' : 'bg-gray-200'} text-white rounded-md`}
          >
            Message
          </button>
        </div>

        {/* Slider Generate Button */}
        <div className="mt-4">
          <input type="range" className="w-full h-3 bg-pink-200 rounded-md appearance-none cursor-pointer" />
          <button className="w-full py-3 bg-pink-600 text-white rounded-md mt-2">
            Generate
          </button>
        </div>
      </form>
    </div>
    }
    </div>
  );
}

export default ProspectForm;