feat: Complete Smart Resume Formatter with R2 and Gemini AI integration
Some checks failed
Profile Linker Docker Build / Build and push Docker image (push) Failing after 3s
Some checks failed
Profile Linker Docker Build / Build and push Docker image (push) Failing after 3s
- Integrated Cloudflare R2 for template storage and converted file management - Added Google Gemini AI for resume parsing and HTML generation - Created backend API endpoints for templates, conversion, and history - Refactored frontend to use real API instead of mock data - Fixed Docker networking issues (IPv6/IPv4) for R2 connectivity - Added resumeService.ts for frontend API integration - Updated Vite configuration for proper asset serving in Docker - Successfully tested with 13 templates from R2 bucket
This commit is contained in:
Laxmi Khilnani
@@ -1,104 +0,0 @@
|
||||
|
||||
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;
|
||||
107
frontend/components/CreateFolderModal.tsx
Normal file
107
frontend/components/CreateFolderModal.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import React, { useState, FormEvent, useEffect } from 'react';
|
||||
import { X, FolderPlus, LoaderCircle } from 'lucide-react';
|
||||
|
||||
interface CreateFolderModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (folderName: string) => void;
|
||||
isCreating: boolean;
|
||||
}
|
||||
|
||||
const CreateFolderModal: React.FC<CreateFolderModalProps> = ({ isOpen, onClose, onSubmit, isCreating }) => {
|
||||
const [folderName, setFolderName] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
// Reset form state when modal is closed or opened
|
||||
if (isOpen) {
|
||||
setFolderName('');
|
||||
setError('');
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const handleSubmit = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!folderName.trim()) {
|
||||
setError('Folder name cannot be empty.');
|
||||
return;
|
||||
}
|
||||
// Basic validation for folder name characters could be added here
|
||||
onSubmit(folderName.trim());
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 bg-black bg-opacity-60 flex justify-center items-center z-50 p-4"
|
||||
onClick={onClose}
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
className="bg-white dark:bg-slate-800 rounded-lg shadow-2xl w-full max-w-md flex flex-col overflow-hidden"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex justify-between items-center p-4 border-b border-slate-200 dark:border-slate-700">
|
||||
<h2 className="text-lg font-semibold text-slate-800 dark:text-slate-200 flex items-center gap-2">
|
||||
<FolderPlus className="w-6 h-6 text-primary" />
|
||||
Create New Folder
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 rounded-full text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
|
||||
aria-label="Close modal"
|
||||
>
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="p-6">
|
||||
<label htmlFor="folderName" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
||||
Folder Name
|
||||
</label>
|
||||
<input
|
||||
id="folderName"
|
||||
type="text"
|
||||
value={folderName}
|
||||
onChange={(e) => {
|
||||
setFolderName(e.target.value);
|
||||
if (error) setError('');
|
||||
}}
|
||||
placeholder="e.g., 'Project Alpha'"
|
||||
className="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-md bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-200 focus:ring-2 focus:ring-primary focus:border-primary outline-none transition"
|
||||
autoFocus
|
||||
/>
|
||||
{error && <p className="text-sm text-red-500 mt-2">{error}</p>}
|
||||
</div>
|
||||
<div className="flex justify-end items-center gap-3 p-4 bg-slate-50 dark:bg-slate-800/50 border-t border-slate-200 dark:border-slate-700">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-sm font-semibold bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded-md hover:bg-slate-100 dark:hover:bg-slate-600 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isCreating}
|
||||
className="flex items-center justify-center gap-2 w-40 px-4 py-2 text-sm font-semibold bg-primary text-white rounded-md hover:bg-blue-600 transition-colors disabled:bg-slate-400 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isCreating ? (
|
||||
<>
|
||||
<LoaderCircle className="w-4 h-4 animate-spin" />
|
||||
Creating...
|
||||
</>
|
||||
) : (
|
||||
'Create Folder'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateFolderModal;
|
||||
60
frontend/components/FileItem.tsx
Normal file
60
frontend/components/FileItem.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import React from 'react';
|
||||
import { FileText, FileCode, Download, Eye } from 'lucide-react';
|
||||
import { FileData } from '../types';
|
||||
import { formatBytes, formatDate } from '../utils/formatters';
|
||||
|
||||
interface FileItemProps {
|
||||
file: FileData;
|
||||
onPreview: (url: string) => void;
|
||||
}
|
||||
|
||||
const FileItem: React.FC<FileItemProps> = ({ file, onPreview }) => {
|
||||
const getFileIcon = () => {
|
||||
switch (file.type) {
|
||||
case 'pdf':
|
||||
return <FileText className="w-5 h-5 text-red-500" />;
|
||||
case 'html':
|
||||
return <FileCode className="w-5 h-5 text-blue-500" />;
|
||||
default:
|
||||
return <FileText className="w-5 h-5 text-slate-500" />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="group grid grid-cols-1 md:grid-cols-[2fr,1fr,1.5fr,1.5fr] gap-4 items-center p-3 border-b border-slate-200 dark:border-slate-700 last:border-b-0 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">
|
||||
<div className="flex items-center gap-3 truncate">
|
||||
{getFileIcon()}
|
||||
<span className="font-medium text-slate-700 dark:text-slate-300 truncate group-hover:text-primary transition-colors" title={file.name}>{file.name}</span>
|
||||
</div>
|
||||
<div className="text-sm text-slate-500 dark:text-slate-400">
|
||||
{formatBytes(file.size)}
|
||||
</div>
|
||||
<div className="text-sm text-slate-500 dark:text-slate-400 hidden md:block">
|
||||
{formatDate(file.lastModified)}
|
||||
</div>
|
||||
<div className="flex items-center justify-start md:justify-end gap-2">
|
||||
{file.type === 'html' && (
|
||||
<button
|
||||
onClick={() => onPreview(file.url)}
|
||||
className="flex items-center gap-1.5 text-sm bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-300 dark:hover:bg-slate-600 px-3 py-1.5 rounded-md transition-colors font-semibold"
|
||||
>
|
||||
<Eye className="w-4 h-4" />
|
||||
Preview
|
||||
</button>
|
||||
)}
|
||||
<a
|
||||
href={file.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
download={file.name}
|
||||
className="flex items-center gap-1.5 text-sm bg-primary hover:bg-blue-600 text-white px-3 py-1.5 rounded-md transition-colors font-semibold"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FileItem;
|
||||
43
frontend/components/FilePreviewModal.tsx
Normal file
43
frontend/components/FilePreviewModal.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
|
||||
import React from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
|
||||
interface FilePreviewModalProps {
|
||||
url: string | null;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const FilePreviewModal: React.FC<FilePreviewModalProps> = ({ url, onClose }) => {
|
||||
if (!url) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 bg-black bg-opacity-60 flex justify-center items-center z-50 p-4"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="bg-white dark:bg-slate-800 rounded-lg shadow-2xl w-full max-w-4xl h-full max-h-[90vh] flex flex-col overflow-hidden"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex justify-between items-center p-4 border-b border-slate-200 dark:border-slate-700">
|
||||
<h2 className="text-lg font-semibold text-slate-800 dark:text-slate-200">File Preview</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 rounded-full text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
|
||||
>
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<iframe
|
||||
src={url}
|
||||
title="File Preview"
|
||||
className="w-full h-full border-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FilePreviewModal;
|
||||
87
frontend/components/FolderSection.tsx
Normal file
87
frontend/components/FolderSection.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { Folder, ChevronDown, FileText, Receipt } from 'lucide-react';
|
||||
import { FolderData } from '../types';
|
||||
import FileItem from './FileItem';
|
||||
|
||||
interface FolderSectionProps {
|
||||
folder: FolderData;
|
||||
searchTerm: string;
|
||||
onPreview: (url: string) => void;
|
||||
}
|
||||
|
||||
const FolderSection: React.FC<FolderSectionProps> = ({ folder, searchTerm, onPreview }) => {
|
||||
const [isOpen, setIsOpen] = useState(true);
|
||||
|
||||
// Memoize sorted and filtered files for performance
|
||||
const sortedAndFilteredFiles = useMemo(() => {
|
||||
// 1. Sort by lastModified date (newest first)
|
||||
const sorted = [...folder.files].sort((a, b) =>
|
||||
new Date(b.lastModified).getTime() - new Date(a.lastModified).getTime()
|
||||
);
|
||||
|
||||
// 2. Filter by search term if it exists
|
||||
if (!searchTerm) return sorted;
|
||||
return sorted.filter(file =>
|
||||
file.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
}, [folder.files, searchTerm]);
|
||||
|
||||
// Hide folder section if search term exists and no files match
|
||||
if (searchTerm && sortedAndFilteredFiles.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const getFolderIcon = () => {
|
||||
const nameLower = folder.name.toLowerCase();
|
||||
const iconClasses = "w-6 h-6 text-primary";
|
||||
if (nameLower.includes('report')) {
|
||||
return <FileText className={iconClasses} />;
|
||||
}
|
||||
if (nameLower.includes('invoice')) {
|
||||
return <Receipt className={iconClasses} />;
|
||||
}
|
||||
return <Folder className={iconClasses} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-slate-800 rounded-lg shadow-md mb-6 overflow-hidden border border-slate-200 dark:border-slate-700">
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="w-full flex justify-between items-center p-4 bg-slate-50 dark:bg-slate-800/50 hover:bg-slate-100 dark:hover:bg-slate-700/50 transition-colors"
|
||||
aria-expanded={isOpen}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{getFolderIcon()}
|
||||
<h2 className="text-lg font-bold text-slate-800 dark:text-slate-200">{folder.name}</h2>
|
||||
<span className="text-sm font-medium bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-400 px-2 py-0.5 rounded-full">
|
||||
{sortedAndFilteredFiles.length} file{sortedAndFilteredFiles.length !== 1 ? 's' : ''}
|
||||
</span>
|
||||
</div>
|
||||
<ChevronDown
|
||||
className={`w-6 h-6 text-slate-500 transition-transform duration-300 ${
|
||||
isOpen ? 'rotate-180' : ''
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
className={`grid transition-all duration-300 ease-in-out ${
|
||||
isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
|
||||
}`}
|
||||
>
|
||||
<div className="overflow-hidden">
|
||||
{sortedAndFilteredFiles.length > 0 ? (
|
||||
<div>
|
||||
{sortedAndFilteredFiles.map(file => (
|
||||
<FileItem key={file.name} file={file} onPreview={onPreview} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="p-4 text-slate-500 dark:text-slate-400">No files in this folder.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FolderSection;
|
||||
69
frontend/components/HeaderBar.tsx
Normal file
69
frontend/components/HeaderBar.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import React, { useState, FormEvent } from 'react';
|
||||
import { Search, RefreshCw, X } from 'lucide-react';
|
||||
|
||||
interface HeaderBarProps {
|
||||
onSearch: (term: string) => void;
|
||||
onRefresh: () => void;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
const HeaderBar: React.FC<HeaderBarProps> = ({ onSearch, onRefresh, isLoading }) => {
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
|
||||
const handleSearch = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
onSearch(inputValue);
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
setInputValue('');
|
||||
onSearch('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm p-4 rounded-lg shadow-lg mb-8 sticky top-4 z-10 border border-slate-200 dark:border-slate-700">
|
||||
<form onSubmit={handleSearch} className="flex flex-col md:flex-row items-center gap-4">
|
||||
<div className="relative w-full">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400 pointer-events-none" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search files by name..."
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
className="w-full pl-10 pr-10 py-2 border border-slate-300 dark:border-slate-600 rounded-md bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-200 focus:ring-2 focus:ring-primary focus:border-primary outline-none transition"
|
||||
/>
|
||||
{inputValue && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClear}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-slate-500 hover:text-slate-800 dark:hover:text-slate-200"
|
||||
aria-label="Clear search"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 w-full md:w-auto flex-shrink-0">
|
||||
<button
|
||||
type="submit"
|
||||
className="flex items-center justify-center gap-2 w-full md:w-auto px-4 py-2 bg-slate-700 text-white font-semibold rounded-md hover:bg-slate-800 dark:bg-slate-600 dark:hover:bg-slate-500 transition-colors"
|
||||
>
|
||||
<Search className="w-5 h-5" />
|
||||
<span>Search</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRefresh}
|
||||
disabled={isLoading}
|
||||
className="flex items-center justify-center gap-2 w-full md:w-auto px-4 py-2 bg-primary text-white font-semibold rounded-md hover:bg-blue-600 transition-colors disabled:bg-slate-400 disabled:cursor-not-allowed"
|
||||
>
|
||||
<RefreshCw className={`w-5 h-5 ${isLoading ? 'animate-spin' : ''}`} />
|
||||
<span>Refresh</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderBar;
|
||||
@@ -1,27 +0,0 @@
|
||||
|
||||
import React from 'react';
|
||||
|
||||
export const PlusIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const LinkedInIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
|
||||
<path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.25 6.5 1.75 1.75 0 016.5 8.25zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93-.94 0-1.62.61-1.62 1.93V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.38.96 3.38 3.3 V19z"></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const UsersIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-4.684v.005c.317.055.635.101.954.142m-1.58-2.318a2.25 2.25 0 00-3.814-1.625A2.25 2.25 0 006 13.5a2.25 2.25 0 00-1.58 2.318m1.58-2.318l-.003.004a2.25 2.25 0 01-3.814-1.625a2.25 2.25 0 013.814-1.625l.003.004m0 0a2.25 2.25 0 013.814 1.625a2.25 2.25 0 01-3.814-1.625M9 13.5a2.25 2.25 0 012.25-2.25A2.25 2.25 0 0113.5 13.5a2.25 2.25 0 01-2.25 2.25A2.25 2.25 0 019 13.5z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const CloseIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
@@ -1,62 +0,0 @@
|
||||
|
||||
import React, { Fragment } from 'react';
|
||||
import { CloseIcon } from './Icons';
|
||||
|
||||
interface ModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children }) => {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-10 overflow-y-auto"
|
||||
aria-labelledby="modal-title"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
{/* Background overlay */}
|
||||
<div
|
||||
className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
|
||||
aria-hidden="true"
|
||||
onClick={onClose}
|
||||
></div>
|
||||
|
||||
{/* This element is to trick the browser into centering the modal contents. */}
|
||||
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
|
||||
​
|
||||
</span>
|
||||
|
||||
{/* Modal panel */}
|
||||
<div className="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
|
||||
<div className="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start w-full">
|
||||
<div className="mt-3 text-center sm:mt-0 sm:text-left w-full">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="modal-title">
|
||||
{title}
|
||||
</h3>
|
||||
<button onClick={onClose} className="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
|
||||
<CloseIcon className="h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Modal;
|
||||
@@ -1,57 +0,0 @@
|
||||
|
||||
import React from 'react';
|
||||
import type { Person } from '../types';
|
||||
import { LinkedInIcon } from './Icons';
|
||||
|
||||
interface PersonListProps {
|
||||
people: Person[];
|
||||
}
|
||||
|
||||
const PersonList: React.FC<PersonListProps> = ({ people }) => {
|
||||
return (
|
||||
<div className="overflow-hidden bg-white dark:bg-gray-800 shadow-md rounded-lg">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<thead className="bg-gray-50 dark:bg-gray-700">
|
||||
<tr>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
First Name
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
Last Name
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
LinkedIn Profile
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{people.map((person) => (
|
||||
<tr key={person.id} className="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
|
||||
{person.firstName}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
|
||||
{person.lastName}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
|
||||
<a
|
||||
href={person.linkedinUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 font-medium group"
|
||||
>
|
||||
<LinkedInIcon className="w-5 h-5 mr-2 text-gray-400 group-hover:text-indigo-500 dark:group-hover:text-indigo-400" />
|
||||
View Profile
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PersonList;
|
||||
13
frontend/components/Spinner.tsx
Normal file
13
frontend/components/Spinner.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
|
||||
import React from 'react';
|
||||
import { LoaderCircle } from 'lucide-react';
|
||||
|
||||
const Spinner: React.FC = () => {
|
||||
return (
|
||||
<div className="flex justify-center items-center py-10">
|
||||
<LoaderCircle className="w-10 h-10 text-primary animate-spin" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Spinner;
|
||||
Reference in New Issue
Block a user