Initial commit for resumeformatter project

2025-10-14 19:51:35 +05:30
commit ee030b70bc
43 changed files with 1668 additions and 0 deletions
--- a/frontend/components/AddPersonForm.tsx
+++ b/frontend/components/AddPersonForm.tsx
@@ -0,0 +1,104 @@
+
+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;