Docker config
This commit is contained in:
mukesh13
311
app/components/Career/CareerForm.jsx
Normal file
311
app/components/Career/CareerForm.jsx
Normal file
@ -0,0 +1,311 @@
|
||||
'use client';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const ExperienceSelect = ({ value, onChange, required }) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const experienceOptions = [
|
||||
{ value: '', label: 'Select Experience', disabled: true },
|
||||
{ value: 'Fresher', label: 'Fresher' },
|
||||
{ value: '1-2 years', label: '1-2 years' },
|
||||
{ value: '3-5 years', label: '3-5 years' },
|
||||
{ value: '5+ years', label: '5+ years' }
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="w-full h-[52px] px-5 bg-white border border-teal-400 rounded-full text-left focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent appearance-none flex items-center justify-between"
|
||||
required={required}
|
||||
>
|
||||
<span className={value ? 'text-gray-800' : 'text-gray-500'}>
|
||||
{value || 'Select Experience'}
|
||||
</span>
|
||||
<svg
|
||||
className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg">
|
||||
{experienceOptions.map((option, index) => (
|
||||
<button
|
||||
key={index}
|
||||
type="button"
|
||||
disabled={option.disabled}
|
||||
onClick={() => {
|
||||
if (!option.disabled) {
|
||||
onChange(option.value);
|
||||
setIsOpen(false);
|
||||
}
|
||||
}}
|
||||
className={`w-full px-4 py-3 text-left hover:bg-gray-50 first:rounded-t-lg last:rounded-b-lg ${option.disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-700'}`}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const FileUpload = ({ onFileChange, currentFile, required }) => {
|
||||
const handleFileSelect = (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (file) {
|
||||
onFileChange(file);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<input
|
||||
type="file"
|
||||
accept=".pdf,.doc,.docx"
|
||||
onChange={handleFileSelect}
|
||||
required={required}
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
||||
id="resume-upload"
|
||||
/>
|
||||
<div className="w-full h-[52px] px-5 bg-white border border-teal-400 rounded-full focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent cursor-pointer flex items-center justify-between">
|
||||
<span className={currentFile ? 'text-gray-800' : 'text-gray-500'}>
|
||||
{currentFile ? currentFile.name : 'Upload Resume'}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="bg-gray-100 text-gray-700 px-4 py-2 rounded-full text-sm hover:bg-gray-200 transition-colors flex-shrink-0"
|
||||
>
|
||||
Choose File
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const CareerForm = () => {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
Education_Qualification: '',
|
||||
experience: '',
|
||||
Specify_your_interest_in_Genomics: '',
|
||||
message: '',
|
||||
resume: null
|
||||
});
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSelectChange = (name, value) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleFileChange = (file) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
resume: file
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
const formDataToSend = new FormData();
|
||||
Object.keys(formData).forEach(key => {
|
||||
if (formData[key]) {
|
||||
formDataToSend.append(key, formData[key]);
|
||||
}
|
||||
});
|
||||
formDataToSend.append('form_type', 'career');
|
||||
|
||||
console.log('Submitting career form:', formData);
|
||||
|
||||
const response = await fetch('/api/forms', {
|
||||
method: 'POST',
|
||||
body: formDataToSend,
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
console.log('API Response:', result);
|
||||
|
||||
if (response.ok) {
|
||||
alert(result.message);
|
||||
// Reset form
|
||||
setFormData({
|
||||
name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
Education_Qualification: '',
|
||||
experience: '',
|
||||
Specify_your_interest_in_Genomics: '',
|
||||
message: '',
|
||||
resume: null
|
||||
});
|
||||
} else {
|
||||
alert(result.error || 'Error submitting application. Please try again.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error submitting form:', error);
|
||||
alert('Error submitting application. Please check your connection and try again.');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="lg:w-7/12">
|
||||
<div className="p-6 md:p-8 lg:p-10 rounded-3xl" style={{ backgroundColor: '#f2fcfc' }}>
|
||||
<div className="mb-8">
|
||||
<h2 className="text-2xl md:text-3xl font-normal text-teal-700 mb-2">
|
||||
Send a message
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Your Name"
|
||||
required
|
||||
className="w-full px-5 py-4 bg-white border border-teal-400 rounded-full focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent placeholder-gray-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Your Phone"
|
||||
required
|
||||
className="w-full px-5 py-4 bg-white border border-teal-400 rounded-full focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent placeholder-gray-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Your Email"
|
||||
required
|
||||
className="w-full px-5 py-4 bg-white border border-teal-400 rounded-full focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent placeholder-gray-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
name="Education_Qualification"
|
||||
value={formData.Education_Qualification}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Education Qualification"
|
||||
required
|
||||
className="w-full px-5 py-4 bg-white border border-teal-400 rounded-full focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent placeholder-gray-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<ExperienceSelect
|
||||
value={formData.experience}
|
||||
onChange={(value) => handleSelectChange('experience', value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<FileUpload
|
||||
onFileChange={handleFileChange}
|
||||
currentFile={formData.resume}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
name="Specify_your_interest_in_Genomics"
|
||||
value={formData.Specify_your_interest_in_Genomics}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Specify your interest in Genomics"
|
||||
required
|
||||
className="w-full px-5 py-4 bg-white border border-teal-400 rounded-full focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent placeholder-gray-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<textarea
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleInputChange}
|
||||
rows={3}
|
||||
placeholder="Any special Remarks"
|
||||
required
|
||||
className="w-full px-5 py-4 bg-white border border-teal-400 rounded-2xl focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent resize-vertical placeholder-gray-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="pt-2 flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="inline-flex items-center justify-center px-8 py-3 bg-teal-600 text-white font-medium rounded-full hover:bg-teal-700 transition-all duration-300 group disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-current"></div>
|
||||
<span>Applying...</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<span className="mr-2">Apply</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CareerForm;
|
||||
41
app/components/Career/CareerHero.jsx
Normal file
41
app/components/Career/CareerHero.jsx
Normal file
@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
|
||||
const CareerHero = () => {
|
||||
return (
|
||||
<section
|
||||
className="relative bg-cover bg-center py-6 h-24"
|
||||
style={{ backgroundImage: "url('images/bredcrumb.jpg')" }}
|
||||
>
|
||||
{/* Breadcrumb */}
|
||||
<div className="relative z-10 mb-1 -mt-3">
|
||||
<div className="container mx-auto max-w-none px-4">
|
||||
<nav className="flex items-center space-x-2 text-sm">
|
||||
<a href="/" className="text-white hover:text-yellow-400 underline">Home</a>
|
||||
<span className="text-white">
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
<a href="/about-us" className="text-white hover:text-yellow-400 underline">About Us</a>
|
||||
<span className="text-white">
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
<span className="text-white">Career</span>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Page Title */}
|
||||
<div className="relative z-10 text-center -mt-2">
|
||||
<h1 className="text-4xl md:text-4xl font-bold text-white mb-2">
|
||||
Career
|
||||
</h1>
|
||||
<div className="w-16 h-1 bg-yellow-400 mx-auto"></div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default CareerHero;
|
||||
27
app/components/Career/CareerInfo.jsx
Normal file
27
app/components/Career/CareerInfo.jsx
Normal file
@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
|
||||
const CareerInfo = () => {
|
||||
return (
|
||||
<div className="lg:w-5/12 relative">
|
||||
<div className="p-6 md:p-8 lg:p-8 text-center lg:text-left">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-gray-700 text-2xl md:text-3xl lg:text-3xl font-semibold leading-tight mb-6">
|
||||
If you are passionate about genomics, we would love to meet you!
|
||||
</h2>
|
||||
<div className="flex justify-center lg:justify-start">
|
||||
<Image
|
||||
src="/images/career.png"
|
||||
alt="Career"
|
||||
width={500}
|
||||
height={400}
|
||||
className="max-w-full h-auto max-h-80 md:max-h-96 lg:max-h-[28rem]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CareerInfo;
|
||||
15
app/components/Career/CareerPage.jsx
Normal file
15
app/components/Career/CareerPage.jsx
Normal file
@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
import CareerHero from './CareerHero'
|
||||
import CareerSection from './CareerSection';
|
||||
|
||||
const CareerPage = () => {
|
||||
return (
|
||||
<div className="page-content contact-us">
|
||||
<CareerHero />
|
||||
<div className="h-6"></div>
|
||||
<CareerSection />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CareerPage;
|
||||
18
app/components/Career/CareerSection.jsx
Normal file
18
app/components/Career/CareerSection.jsx
Normal file
@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
import CareerForm from './CareerForm';
|
||||
import CareerInfo from './CareerInfo';
|
||||
|
||||
const CareerSection = () => {
|
||||
return (
|
||||
<section className="py-10 md:py-16 lg:py-6">
|
||||
<div className="container mx-auto max-w-none px-4">
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
<CareerInfo />
|
||||
<CareerForm />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default CareerSection;
|
||||
108
app/components/Career/ExperienceSelect.jsx
Normal file
108
app/components/Career/ExperienceSelect.jsx
Normal file
@ -0,0 +1,108 @@
|
||||
'use client';
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
|
||||
const ExperienceSelect = ({ value, onChange, required = false }) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [selectedLabel, setSelectedLabel] = useState('Years of Experience');
|
||||
const dropdownRef = useRef(null);
|
||||
|
||||
const experienceOptions = [
|
||||
{ value: '', label: 'Years of Experience', disabled: true },
|
||||
{ value: '0-1', label: '0-1 years' },
|
||||
{ value: '1-3', label: '1-3 years' },
|
||||
{ value: '3-5', label: '3-5 years' },
|
||||
{ value: '5-8', label: '5-8 years' },
|
||||
{ value: '8-10', label: '8-10 years' },
|
||||
{ value: '10+', label: '10+ years' }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const selectedOption = experienceOptions.find(option => option.value === value);
|
||||
if (selectedOption && !selectedOption.disabled) {
|
||||
setSelectedLabel(selectedOption.label);
|
||||
} else {
|
||||
setSelectedLabel('Years of Experience');
|
||||
}
|
||||
}, [value]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleSelect = (option) => {
|
||||
if (!option.disabled) {
|
||||
onChange(option.value);
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-full" ref={dropdownRef}>
|
||||
<div
|
||||
className={`w-full px-5 py-4 border border-gray-300 rounded-full cursor-pointer flex items-center justify-between bg-white focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-transparent ${
|
||||
isOpen ? 'ring-2 ring-blue-500 border-transparent' : ''
|
||||
}`}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
<span className={`${value ? 'text-gray-800' : 'text-gray-500'} pr-4`}>
|
||||
{selectedLabel}
|
||||
</span>
|
||||
<span className={`transform transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}>
|
||||
<svg
|
||||
width="16"
|
||||
height="12"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="text-gray-600"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
d="M6 8l4 4 4-4"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{isOpen && (
|
||||
<div className="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-50 max-h-48 overflow-y-auto">
|
||||
{experienceOptions.map((option, index) => {
|
||||
if (option.disabled) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="px-6 py-3 cursor-pointer hover:bg-gray-50 text-gray-800 transition-colors duration-150"
|
||||
onClick={() => handleSelect(option)}
|
||||
>
|
||||
{option.label}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Hidden input for form validation */}
|
||||
<input
|
||||
type="hidden"
|
||||
name="experience"
|
||||
value={value}
|
||||
required={required}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExperienceSelect;
|
||||
57
app/components/Career/FileUpload.jsx
Normal file
57
app/components/Career/FileUpload.jsx
Normal file
@ -0,0 +1,57 @@
|
||||
'use client';
|
||||
import React, { useRef } from 'react';
|
||||
|
||||
const FileUpload = ({ onFileChange, currentFile, required = false }) => {
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
const handleFileChange = (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (file) {
|
||||
// Validate file type
|
||||
const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
|
||||
if (allowedTypes.includes(file.type)) {
|
||||
onFileChange(file);
|
||||
} else {
|
||||
alert('Please upload a PDF, DOC, or DOCX file.');
|
||||
e.target.value = '';
|
||||
}
|
||||
} else {
|
||||
onFileChange(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
fileInputRef.current?.click();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
name="resume"
|
||||
accept=".pdf,.doc,.docx"
|
||||
onChange={handleFileChange}
|
||||
required={required}
|
||||
className="hidden"
|
||||
/>
|
||||
|
||||
<div
|
||||
onClick={handleClick}
|
||||
className="w-full px-5 py-4 border border-gray-300 rounded-full cursor-pointer flex items-center justify-between bg-white hover:border-gray-400 focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-transparent transition-colors"
|
||||
>
|
||||
<span className={`${currentFile ? 'text-gray-800' : 'text-gray-500'} pr-4 truncate`}>
|
||||
{currentFile ? currentFile.name : 'Upload Resume'}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="px-3 py-1 text-sm bg-gray-100 border border-gray-300 rounded hover:bg-gray-200 transition-colors whitespace-nowrap"
|
||||
>
|
||||
Choose File
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FileUpload;
|
||||
Reference in New Issue
Block a user