Initial commit
This commit is contained in:
@@ -0,0 +1,199 @@
|
||||
import React, { useState } from 'react';
|
||||
import { JobFeedItem, PlatformType } from '../types';
|
||||
import {
|
||||
Rss,
|
||||
Sparkles,
|
||||
ExternalLink,
|
||||
Building2,
|
||||
MapPin,
|
||||
DollarSign,
|
||||
Send,
|
||||
Filter,
|
||||
Search,
|
||||
CheckCircle2,
|
||||
Clock
|
||||
} from 'lucide-react';
|
||||
|
||||
interface JobFeedsProps {
|
||||
jobFeeds: JobFeedItem[];
|
||||
onTailorJobFeed: (item: JobFeedItem) => void;
|
||||
onQuickApplyFeed: (item: JobFeedItem) => Promise<void>;
|
||||
}
|
||||
|
||||
export const JobFeeds: React.FC<JobFeedsProps> = ({
|
||||
jobFeeds,
|
||||
onTailorJobFeed,
|
||||
onQuickApplyFeed
|
||||
}) => {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [selectedPlatform, setSelectedPlatform] = useState<string>('ALL');
|
||||
const [minMatch, setMinMatch] = useState<number>(80);
|
||||
const [appliedFeedIds, setAppliedFeedIds] = useState<string[]>([]);
|
||||
|
||||
const filteredFeeds = jobFeeds.filter(feed => {
|
||||
const matchesSearch =
|
||||
feed.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
feed.company.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
feed.location.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
|
||||
const matchesPlatform = selectedPlatform === 'ALL' || feed.platform === selectedPlatform;
|
||||
const matchesMatch = feed.estimatedMatch >= minMatch;
|
||||
|
||||
return matchesSearch && matchesPlatform && matchesMatch;
|
||||
});
|
||||
|
||||
const handleApply = async (feed: JobFeedItem) => {
|
||||
setAppliedFeedIds(prev => [...prev, feed.id]);
|
||||
await onQuickApplyFeed(feed);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
|
||||
{/* Top Banner */}
|
||||
<div className="p-6 rounded-2xl bg-slate-900 border border-slate-800 shadow-xl flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-base font-bold text-white flex items-center gap-2">
|
||||
<Rss className="w-5 h-5 text-indigo-400" /> Active Job Feeds & Scraped Postings
|
||||
</h2>
|
||||
<p className="text-xs text-slate-400 mt-1">
|
||||
Aggregated real-time job openings from LinkedIn, Greenhouse, Lever, Workday, and Glassdoor with AI match scoring.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-xs font-semibold text-slate-300">
|
||||
<span className="px-3 py-1.5 rounded-xl bg-slate-800 border border-slate-700">
|
||||
Total Feeds: <strong className="text-indigo-400">{jobFeeds.length}</strong>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter Bar */}
|
||||
<div className="p-4 rounded-2xl bg-slate-900 border border-slate-800 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
|
||||
{/* Search */}
|
||||
<div className="relative flex-1 min-w-[240px]">
|
||||
<Search className="w-4 h-4 absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search feed openings by title, company, or skills..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 rounded-xl bg-slate-950 border border-slate-800 text-slate-200 text-xs placeholder:text-slate-500 focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Platform & Match Threshold */}
|
||||
<div className="flex items-center gap-3 text-xs">
|
||||
<select
|
||||
value={selectedPlatform}
|
||||
onChange={(e) => setSelectedPlatform(e.target.value)}
|
||||
className="px-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-slate-300 text-xs focus:outline-none focus:border-indigo-500"
|
||||
>
|
||||
<option value="ALL">All Platforms</option>
|
||||
<option value="LinkedIn">LinkedIn</option>
|
||||
<option value="Greenhouse">Greenhouse</option>
|
||||
<option value="Lever">Lever</option>
|
||||
<option value="Workday">Workday</option>
|
||||
<option value="Glassdoor">Glassdoor</option>
|
||||
<option value="Direct">Direct</option>
|
||||
</select>
|
||||
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-slate-950 border border-slate-800">
|
||||
<span className="text-slate-400 font-medium">Min Match:</span>
|
||||
<span className="font-bold text-indigo-300">{minMatch}%</span>
|
||||
<input
|
||||
type="range"
|
||||
min="70"
|
||||
max="95"
|
||||
value={minMatch}
|
||||
onChange={(e) => setMinMatch(Number(e.target.value))}
|
||||
className="w-20 accent-indigo-500 cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Feed Cards Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{filteredFeeds.length === 0 ? (
|
||||
<div className="col-span-full p-12 text-center text-slate-500 bg-slate-900 border border-slate-800 rounded-2xl">
|
||||
No active job feed listings match your criteria.
|
||||
</div>
|
||||
) : (
|
||||
filteredFeeds.map((feed) => {
|
||||
const isApplied = appliedFeedIds.includes(feed.id);
|
||||
|
||||
return (
|
||||
<div key={feed.id} className="p-5 rounded-2xl bg-slate-900 border border-slate-800 hover:border-indigo-500/40 transition-all flex flex-col justify-between space-y-4">
|
||||
|
||||
<div>
|
||||
<div className="flex items-start justify-between gap-3 mb-2">
|
||||
<div>
|
||||
<h3 className="font-bold text-white text-sm hover:text-indigo-300 transition-colors">{feed.title}</h3>
|
||||
<p className="text-slate-400 text-xs font-semibold flex items-center gap-2 mt-0.5">
|
||||
<span>{feed.company}</span>
|
||||
<span>•</span>
|
||||
<span className="px-2 py-0.5 rounded bg-slate-800 text-slate-300 border border-slate-700 text-[10px]">{feed.platform}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center px-2.5 py-1 rounded-xl bg-indigo-950 border border-indigo-500/40 text-indigo-300 font-bold text-xs shrink-0">
|
||||
{feed.estimatedMatch}% Match
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-slate-300 leading-relaxed line-clamp-2 my-2">
|
||||
{feed.description}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center flex-wrap gap-1.5 mt-3">
|
||||
{feed.requiredSkills.map((sk, idx) => (
|
||||
<span key={idx} className="px-2 py-0.5 rounded-md bg-slate-950 text-slate-400 border border-slate-800 text-[10px]">
|
||||
{sk}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-3 border-t border-slate-800 flex items-center justify-between gap-2 text-xs">
|
||||
<div className="text-[11px] text-slate-500 flex items-center gap-2">
|
||||
<span className="flex items-center gap-1"><MapPin className="w-3 h-3" /> {feed.location}</span>
|
||||
<span>•</span>
|
||||
<span className="flex items-center gap-1"><Clock className="w-3 h-3" /> {feed.postedDate}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => onTailorJobFeed(feed)}
|
||||
className="px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 font-semibold text-xs flex items-center gap-1"
|
||||
>
|
||||
<Sparkles className="w-3.5 h-3.5 text-amber-400" />
|
||||
<span>Tailor & Walkthrough</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => handleApply(feed)}
|
||||
disabled={isApplied}
|
||||
className={`px-3 py-1.5 rounded-xl font-bold text-xs flex items-center gap-1 transition-all ${
|
||||
isApplied
|
||||
? 'bg-emerald-950 text-emerald-300 border border-emerald-500/30'
|
||||
: 'bg-indigo-600 hover:bg-indigo-500 text-white shadow-md shadow-indigo-600/20'
|
||||
}`}
|
||||
>
|
||||
{isApplied ? <CheckCircle2 className="w-3.5 h-3.5" /> : <Send className="w-3.5 h-3.5" />}
|
||||
<span>{isApplied ? 'Applied' : 'AI Auto-Apply'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user