105 lines
No EOL
4.9 KiB
TypeScript
105 lines
No EOL
4.9 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { LogoutIcon } from './icons/LogoutIcon';
|
|
import { QuestionMarkIcon } from './icons/QuestionMarkIcon';
|
|
|
|
interface ProfileProps {
|
|
onLogout: () => void;
|
|
}
|
|
|
|
export const Profile: React.FC<ProfileProps> = ({ onLogout }) => {
|
|
const [isQuestionFormVisible, setIsQuestionFormVisible] = useState(false);
|
|
const [question, setQuestion] = useState('');
|
|
|
|
const userDetails = {
|
|
'Account Type': 'Administrator',
|
|
'First Name': 'Steve',
|
|
'Last Name': 'O\'Donoghue',
|
|
'Email': 'steveodonoghue@oliver.agency',
|
|
'Entity': 'OLIVER Agency',
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
onLogout();
|
|
};
|
|
|
|
const handleToggleQuestionForm = () => {
|
|
setIsQuestionFormVisible(prev => !prev);
|
|
};
|
|
|
|
const handleSubmitQuestion = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!question.trim()) {
|
|
alert('Please enter a question before submitting.');
|
|
return;
|
|
}
|
|
alert(`Your question has been submitted:\n\n"${question}"\n\nWe'll get back to you shortly.`);
|
|
setQuestion('');
|
|
setIsQuestionFormVisible(false);
|
|
};
|
|
|
|
return (
|
|
<div className="p-4 sm:p-6 lg:p-8 h-full bg-brand-gray">
|
|
<header className="mb-8">
|
|
<h1 className="text-3xl lg:text-4xl font-bold text-brand-dark-blue">Your Profile</h1>
|
|
<p className="text-base lg:text-lg text-gray-600 mt-1">View your account details and manage settings.</p>
|
|
</header>
|
|
|
|
<div className="max-w-3xl">
|
|
<section className="bg-white rounded-lg shadow-md p-6 sm:p-8 border border-gray-200">
|
|
<h2 className="text-2xl font-bold text-brand-dark-blue mb-6">Account Information</h2>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-5">
|
|
{Object.entries(userDetails).map(([key, value]) => (
|
|
<div key={key}>
|
|
<p className="text-sm font-semibold text-gray-500 tracking-wide uppercase">{key}</p>
|
|
<p className="text-lg text-gray-800 mt-1">{value}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="border-t border-gray-200 mt-8 pt-6 flex flex-col sm:flex-row gap-3">
|
|
<button
|
|
onClick={handleLogout}
|
|
className="flex items-center justify-center gap-2 bg-red-600 text-white font-semibold py-2 px-4 rounded-md hover:bg-red-700 transition-colors duration-300"
|
|
>
|
|
<LogoutIcon className="h-5 w-5" />
|
|
Logout
|
|
</button>
|
|
<button
|
|
onClick={handleToggleQuestionForm}
|
|
className="flex items-center justify-center gap-2 bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded-md hover:bg-gray-300 transition-colors duration-300"
|
|
>
|
|
<QuestionMarkIcon className="h-5 w-5" />
|
|
Got a question?
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
{isQuestionFormVisible && (
|
|
<section className="mt-8 bg-white rounded-lg shadow-md p-6 sm:p-8 border border-gray-200">
|
|
<h2 className="text-2xl font-bold text-brand-dark-blue mb-4">Ask a Question</h2>
|
|
<form onSubmit={handleSubmitQuestion}>
|
|
<p className="text-gray-600 mb-4">Your question will be sent to the OLIVER Agency support team.</p>
|
|
<textarea
|
|
value={question}
|
|
onChange={(e) => setQuestion(e.target.value)}
|
|
className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-accent focus:border-brand-accent transition"
|
|
placeholder="Type your question here..."
|
|
rows={5}
|
|
required
|
|
/>
|
|
<div className="mt-4 flex justify-end">
|
|
<button
|
|
type="submit"
|
|
className="bg-brand-accent text-white font-semibold py-2 px-5 rounded-md hover:bg-brand-dark-blue transition-colors duration-300 disabled:bg-gray-400 disabled:cursor-not-allowed"
|
|
disabled={!question.trim()}
|
|
>
|
|
Submit Question
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |