Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 | 1x | import React from 'react';
import { useParams } from 'react-router-dom';
import { useQuery } from 'react-query';
import axios from 'axios';
import { MapPin, Phone, Linkedin, Github, Globe, User } from 'lucide-react';
const CandidateDetails = () => {
const { id } = useParams();
const { data: candidate, isLoading } = useQuery(['candidate', id], async () => {
const response = await axios.get(`/api/candidates/${id}`);
return response.data;
});
if (isLoading) {
return (
<div className="flex items-center justify-center h-64">
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary-600"></div>
</div>
);
}
if (!candidate) {
return (
<div className="text-center py-12">
<h3 className="text-lg font-medium text-gray-900">Candidate not found</h3>
<p className="mt-1 text-sm text-gray-500">
The candidate you're looking for doesn't exist.
</p>
</div>
);
}
return (
<div className="space-y-6">
<div className="bg-white shadow rounded-lg">
<div className="px-4 py-5 sm:p-6">
<div className="flex items-start">
<div className="flex-shrink-0">
<div className="h-16 w-16 rounded-full bg-primary-100 flex items-center justify-center">
<User className="h-8 w-8 text-primary-600" />
</div>
</div>
<div className="ml-6 flex-1">
<h1 className="text-2xl font-bold text-gray-900">
{candidate.first_name} {candidate.last_name}
</h1>
<p className="text-lg text-gray-600">{candidate.email}</p>
<div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
{candidate.location && (
<div className="flex items-center text-sm text-gray-500">
<MapPin className="h-4 w-4 mr-2" />
{candidate.location}
</div>
)}
{candidate.phone && (
<div className="flex items-center text-sm text-gray-500">
<Phone className="h-4 w-4 mr-2" />
{candidate.phone}
</div>
)}
{candidate.linkedin_url && (
<div className="flex items-center text-sm text-gray-500">
<Linkedin className="h-4 w-4 mr-2" />
<a href={candidate.linkedin_url} target="_blank" rel="noopener noreferrer" className="text-primary-600 hover:text-primary-500">
LinkedIn Profile
</a>
</div>
)}
{candidate.github_url && (
<div className="flex items-center text-sm text-gray-500">
<Github className="h-4 w-4 mr-2" />
<a href={candidate.github_url} target="_blank" rel="noopener noreferrer" className="text-primary-600 hover:text-primary-500">
GitHub Profile
</a>
</div>
)}
{candidate.portfolio_url && (
<div className="flex items-center text-sm text-gray-500">
<Globe className="h-4 w-4 mr-2" />
<a href={candidate.portfolio_url} target="_blank" rel="noopener noreferrer" className="text-primary-600 hover:text-primary-500">
Portfolio
</a>
</div>
)}
</div>
</div>
</div>
</div>
</div>
{candidate.bio && (
<div className="bg-white shadow rounded-lg">
<div className="px-4 py-5 sm:p-6">
<h2 className="text-lg font-medium text-gray-900 mb-4">About</h2>
<p className="text-gray-600 whitespace-pre-wrap">{candidate.bio}</p>
</div>
</div>
)}
{candidate.skills && candidate.skills.length > 0 && (
<div className="bg-white shadow rounded-lg">
<div className="px-4 py-5 sm:p-6">
<h2 className="text-lg font-medium text-gray-900 mb-4">Skills</h2>
<div className="flex flex-wrap gap-2">
{candidate.skills.map((skill, index) => (
<span
key={index}
className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-primary-100 text-primary-800"
>
{skill}
</span>
))}
</div>
</div>
</div>
)}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="bg-white shadow rounded-lg">
<div className="px-4 py-5 sm:p-6">
<h2 className="text-lg font-medium text-gray-900 mb-4">Experience Level</h2>
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-primary-100 text-primary-800">
{candidate.experience_level || 'Not specified'}
</span>
</div>
</div>
{candidate.salary_expectation && (
<div className="bg-white shadow rounded-lg">
<div className="px-4 py-5 sm:p-6">
<h2 className="text-lg font-medium text-gray-900 mb-4">Salary Expectation</h2>
<p className="text-lg font-medium text-gray-900">
${candidate.salary_expectation.toLocaleString()}
</p>
</div>
</div>
)}
</div>
</div>
);
};
export default CandidateDetails;
|