105 lines
4.0 KiB
TypeScript
105 lines
4.0 KiB
TypeScript
|
|
import React, { useState } from 'react';
|
|
import type { NewPerson } from '../types';
|
|
|
|
interface AddPersonFormProps {
|
|
onSubmit: (person: NewPerson) => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
const AddPersonForm: React.FC<AddPersonFormProps> = ({ onSubmit, onCancel }) => {
|
|
const [firstName, setFirstName] = useState('');
|
|
const [lastName, setLastName] = useState('');
|
|
const [linkedinUrl, setLinkedinUrl] = useState('');
|
|
const [error, setError] = useState('');
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!firstName || !lastName || !linkedinUrl) {
|
|
setError('All fields are required.');
|
|
return;
|
|
}
|
|
// Basic URL validation
|
|
try {
|
|
new URL(linkedinUrl);
|
|
} catch (_) {
|
|
setError('Please enter a valid LinkedIn URL.');
|
|
return;
|
|
}
|
|
setError('');
|
|
onSubmit({ firstName, lastName, linkedinUrl });
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{error && <div className="p-3 bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300 rounded-md text-sm">{error}</div>}
|
|
<div>
|
|
<label htmlFor="firstName" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
First Name
|
|
</label>
|
|
<div className="mt-1">
|
|
<input
|
|
type="text"
|
|
id="firstName"
|
|
value={firstName}
|
|
onChange={(e) => setFirstName(e.target.value)}
|
|
className="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="lastName" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Last Name
|
|
</label>
|
|
<div className="mt-1">
|
|
<input
|
|
type="text"
|
|
id="lastName"
|
|
value={lastName}
|
|
onChange={(e) => setLastName(e.target.value)}
|
|
className="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="linkedinUrl" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
LinkedIn Profile URL
|
|
</label>
|
|
<div className="mt-1">
|
|
<input
|
|
type="url"
|
|
id="linkedinUrl"
|
|
value={linkedinUrl}
|
|
onChange={(e) => setLinkedinUrl(e.target.value)}
|
|
placeholder="https://www.linkedin.com/in/..."
|
|
className="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end space-x-4 pt-2">
|
|
<button
|
|
type="button"
|
|
onClick={onCancel}
|
|
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white dark:bg-gray-600 dark:text-gray-200 border border-gray-300 dark:border-gray-500 rounded-md shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
>
|
|
Save Profile
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default AddPersonForm;
|