Initial commit: AutoJobs MVP - AI job application platform
This commit is contained in:
@@ -0,0 +1,507 @@
|
||||
"use client"
|
||||
import { useState, useEffect } from "react"
|
||||
import Link from "next/link"
|
||||
|
||||
interface Job {
|
||||
source: string
|
||||
title: string
|
||||
company: string
|
||||
location: string
|
||||
description: string
|
||||
url: string
|
||||
salary: string
|
||||
}
|
||||
|
||||
interface Application {
|
||||
id: string
|
||||
job_title: string
|
||||
company: string
|
||||
location: string
|
||||
job_url: string
|
||||
status: string
|
||||
applied_at: string
|
||||
}
|
||||
|
||||
type Tab = "search" | "applications" | "profile" | "settings"
|
||||
|
||||
export default function DashboardPage() {
|
||||
const [tab, setTab] = useState<Tab>("search")
|
||||
const [user, setUser] = useState<any>(null)
|
||||
|
||||
// Search state
|
||||
const [query, setQuery] = useState("")
|
||||
const [location, setLocation] = useState("")
|
||||
const [jobs, setJobs] = useState<Job[]>([])
|
||||
const [searching, setSearching] = useState(false)
|
||||
const [searched, setSearched] = useState(false)
|
||||
|
||||
// Applications state
|
||||
const [applications, setApplications] = useState<Application[]>([])
|
||||
|
||||
// Profile state
|
||||
const [profile, setProfile] = useState({
|
||||
name: "", title: "", summary: "", skills: "",
|
||||
experience: [{ title: "", company: "", bullets: "" }],
|
||||
education: "", linkedin_url: "",
|
||||
job_keywords: "", job_locations: ""
|
||||
})
|
||||
|
||||
// API Keys state
|
||||
const [apiKeys, setApiKeys] = useState({ jooble: "", jsearch: "", perplexity: "" })
|
||||
const [keysSaved, setKeysSaved] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
// Load user, profile, applications
|
||||
fetch("/api/users/me").then(r => r.ok && r.json()).then(d => d && setUser(d)).catch(() => {})
|
||||
fetch("/api/users/me/profile").then(r => r.ok && r.json()).then(d => d && d.title && setProfile({
|
||||
name: d.name || "", title: d.title || "", summary: d.summary || "",
|
||||
skills: Array.isArray(d.skills) ? d.skills.join(", ") : (d.skills || ""),
|
||||
experience: d.experience || [{ title: "", company: "", bullets: "" }],
|
||||
education: d.education || "", linkedin_url: d.linkedin_url || "",
|
||||
job_keywords: Array.isArray(d.job_keywords) ? d.job_keywords.join(", ") : (d.job_keywords || ""),
|
||||
job_locations: Array.isArray(d.job_locations) ? d.job_locations.join(", ") : (d.job_locations || "")
|
||||
})).catch(() => {})
|
||||
fetch("/api/applications").then(r => r.ok && r.json()).then(d => d && setApplications(d)).catch(() => {})
|
||||
fetch("/api/users/me/api-keys").then(r => r.ok && r.json()).then(d => d && setApiKeys({
|
||||
jooble: d.jooble || "", jsearch: d.jsearch || "", perplexity: d.perplexity || ""
|
||||
})).catch(() => {})
|
||||
}, [])
|
||||
|
||||
const searchJobs = async () => {
|
||||
if (!query) return
|
||||
setSearching(true)
|
||||
setSearched(true)
|
||||
try {
|
||||
const res = await fetch("/api/jobs/search", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ query, location })
|
||||
})
|
||||
const data = await res.json()
|
||||
setJobs(data.jobs || [])
|
||||
} catch {}
|
||||
setSearching(false)
|
||||
}
|
||||
|
||||
const applyToJob = async (job: Job) => {
|
||||
try {
|
||||
await fetch("/api/ai/customize", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ job, profile })
|
||||
})
|
||||
await fetch("/api/applications", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ job, resume: "", cover_letter: "", status: "applied" })
|
||||
})
|
||||
// Refresh applications
|
||||
const res = await fetch("/api/applications")
|
||||
const data = await res.json()
|
||||
setApplications(data)
|
||||
setTab("applications")
|
||||
} catch {}
|
||||
}
|
||||
|
||||
const saveProfile = async () => {
|
||||
const payload = {
|
||||
...profile,
|
||||
skills: profile.skills.split(",").map(s => s.trim()).filter(Boolean),
|
||||
job_keywords: profile.job_keywords.split(",").map(s => s.trim()).filter(Boolean),
|
||||
job_locations: profile.job_locations.split(",").map(s => s.trim()).filter(Boolean)
|
||||
}
|
||||
await fetch("/api/users/me/profile", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload)
|
||||
})
|
||||
alert("Profile saved!")
|
||||
}
|
||||
|
||||
const saveApiKeys = async () => {
|
||||
await fetch("/api/users/me/api-keys", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(apiKeys)
|
||||
})
|
||||
setKeysSaved(true)
|
||||
setTimeout(() => setKeysSaved(false), 2000)
|
||||
}
|
||||
|
||||
const statusColor: Record<string, string> = {
|
||||
pending: "bg-yellow-500/20 text-yellow-400",
|
||||
applied: "bg-blue-500/20 text-blue-400",
|
||||
interview: "bg-green-500/20 text-green-400",
|
||||
rejected: "bg-red-500/20 text-red-400",
|
||||
offer: "bg-purple-500/20 text-purple-400"
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-900 text-white">
|
||||
{/* Header */}
|
||||
<header className="bg-slate-800 border-b border-slate-700 px-6 py-4">
|
||||
<div className="max-w-6xl mx-auto flex justify-between items-center">
|
||||
<Link href="/autojobs" className="text-xl font-bold text-blue-400">AutoJobs</Link>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-slate-400 text-sm">{user?.email || "Loading..."}</span>
|
||||
<Link href="/autojobs/logout" className="text-slate-400 hover:text-white text-sm">Logout</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="max-w-6xl mx-auto px-6 py-6">
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-2 mb-8 border-b border-slate-700 pb-4">
|
||||
{[
|
||||
{ key: "search", label: "🔍 Find Jobs", icon: "🔍" },
|
||||
{ key: "applications", label: `📋 Applications (${applications.length})`, icon: "📋" },
|
||||
{ key: "profile", label: "👤 My Profile", icon: "👤" },
|
||||
{ key: "settings", label: "⚙️ API Keys", icon: "⚙️" }
|
||||
].map(t => (
|
||||
<button
|
||||
key={t.key}
|
||||
onClick={() => setTab(t.key as Tab)}
|
||||
className={`px-5 py-2 rounded-lg font-medium transition ${
|
||||
tab === t.key
|
||||
? "bg-blue-500 text-white"
|
||||
: "bg-slate-800 text-slate-400 hover:text-white hover:bg-slate-700"
|
||||
}`}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Search Tab */}
|
||||
{tab === "search" && (
|
||||
<div>
|
||||
<div className="bg-slate-800 rounded-2xl p-6 mb-6 border border-slate-700">
|
||||
<h2 className="text-xl font-semibold mb-4">Search Jobs</h2>
|
||||
<p className="text-slate-400 text-sm mb-4">AI will search across Jooble, JSearch, and more using your API keys.</p>
|
||||
<div className="flex gap-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Job title, keywords (e.g. Senior Python Engineer, AI/ML)"
|
||||
value={query}
|
||||
onChange={e => setQuery(e.target.value)}
|
||||
onKeyDown={e => e.key === "Enter" && searchJobs()}
|
||||
className="flex-1 px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Location (e.g. Barcelona, Remote, UK)"
|
||||
value={location}
|
||||
onChange={e => setLocation(e.target.value)}
|
||||
className="w-64 px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
<button
|
||||
onClick={searchJobs}
|
||||
disabled={searching || !query}
|
||||
className="px-8 py-3 bg-blue-500 hover:bg-blue-600 disabled:bg-slate-600 text-white rounded-xl font-semibold transition"
|
||||
>
|
||||
{searching ? "Searching..." : "Search"}
|
||||
</button>
|
||||
</div>
|
||||
{!apiKeys.jooble && !apiKeys.jsearch ? (
|
||||
<p className="mt-3 text-yellow-400 text-sm">
|
||||
⚠️ No API keys found. <button onClick={() => setTab("settings")} className="underline">Add your API keys</button> to search jobs.
|
||||
</p>
|
||||
) : (
|
||||
<p className="mt-3 text-green-400 text-sm">
|
||||
✓ API keys configured — searches will use your keys
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Results */}
|
||||
{searched && (
|
||||
<div>
|
||||
<p className="text-slate-400 mb-4">{jobs.length} jobs found</p>
|
||||
{jobs.length === 0 && !searching && (
|
||||
<div className="text-center py-12 bg-slate-800 rounded-2xl border border-slate-700">
|
||||
<p className="text-slate-400">No jobs found. Try different keywords.</p>
|
||||
<p className="text-slate-500 text-sm mt-2">Make sure you've added API keys in Settings.</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-4">
|
||||
{jobs.map((job, i) => (
|
||||
<div key={i} className="bg-slate-800 rounded-xl p-6 border border-slate-700 hover:border-slate-600 transition">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-white">{job.title}</h3>
|
||||
<p className="text-blue-400 mt-1">{job.company}</p>
|
||||
<p className="text-slate-400 text-sm mt-1">{job.location}</p>
|
||||
<p className="text-slate-300 text-sm mt-3 line-clamp-2">{job.description?.slice(0, 200)}...</p>
|
||||
<div className="flex gap-3 mt-3">
|
||||
<span className="text-xs px-2 py-1 bg-slate-700 rounded text-slate-400">{job.source}</span>
|
||||
{job.salary && (
|
||||
<span className="text-xs px-2 py-1 bg-green-500/20 text-green-400 rounded">{job.salary}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 ml-4">
|
||||
<button
|
||||
onClick={() => applyToJob(job)}
|
||||
className="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium text-sm transition"
|
||||
>
|
||||
Apply Now
|
||||
</button>
|
||||
<a
|
||||
href={job.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-6 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg font-medium text-sm text-center transition"
|
||||
>
|
||||
View Job ↗
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Applications Tab */}
|
||||
{tab === "applications" && (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-xl font-semibold">My Applications</h2>
|
||||
<button
|
||||
onClick={() => setTab("search")}
|
||||
className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg text-sm font-medium transition"
|
||||
>
|
||||
Find New Jobs
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{applications.length === 0 ? (
|
||||
<div className="text-center py-16 bg-slate-800 rounded-2xl border border-slate-700">
|
||||
<p className="text-slate-400 mb-4">No applications yet.</p>
|
||||
<button
|
||||
onClick={() => setTab("search")}
|
||||
className="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg"
|
||||
>
|
||||
Search for Jobs
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{applications.map(app => (
|
||||
<div key={app.id} className="bg-slate-800 rounded-xl p-5 border border-slate-700 flex justify-between items-center">
|
||||
<div>
|
||||
<h3 className="font-semibold text-white">{app.job_title}</h3>
|
||||
<p className="text-blue-400 text-sm">{app.company} · {app.location}</p>
|
||||
<p className="text-slate-500 text-xs mt-1">
|
||||
Applied {new Date(app.applied_at).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<select
|
||||
value={app.status}
|
||||
onChange={async (e) => {
|
||||
await fetch(`/api/applications/${app.id}?status=${e.target.value}`, { method: "PATCH" })
|
||||
setApplications(prev => prev.map(a => a.id === app.id ? {...a, status: e.target.value} : a))
|
||||
}}
|
||||
className={`px-3 py-1.5 rounded-full text-sm font-medium ${statusColor[app.status] || "bg-slate-700"}`}
|
||||
>
|
||||
<option value="pending">Pending</option>
|
||||
<option value="applied">Applied</option>
|
||||
<option value="interview">Interview</option>
|
||||
<option value="rejected">Rejected</option>
|
||||
<option value="offer">Offer!</option>
|
||||
</select>
|
||||
{app.job_url && (
|
||||
<a href={app.job_url} target="_blank" rel="noopener noreferrer" className="text-slate-400 hover:text-white text-sm">
|
||||
View ↗
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Profile Tab */}
|
||||
{tab === "profile" && (
|
||||
<div className="max-w-2xl">
|
||||
<h2 className="text-xl font-semibold mb-6">My Profile</h2>
|
||||
<div className="space-y-6">
|
||||
<div className="bg-slate-800 rounded-2xl p-6 border border-slate-700 space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm text-slate-400 mb-1">Full Name</label>
|
||||
<input value={profile.name} onChange={e => setProfile({...profile, name: e.target.value})}
|
||||
className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-xl text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-slate-400 mb-1">Professional Title</label>
|
||||
<input value={profile.title} onChange={e => setProfile({...profile, title: e.target.value})}
|
||||
placeholder="e.g. Senior Full-Stack Developer"
|
||||
className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-xl text-white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-slate-400 mb-1">Professional Summary</label>
|
||||
<textarea value={profile.summary} onChange={e => setProfile({...profile, summary: e.target.value})}
|
||||
rows={3}
|
||||
className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-xl text-white resize-none"
|
||||
placeholder="Brief overview of your experience and what you're looking for..." />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-slate-400 mb-1">Skills (comma-separated)</label>
|
||||
<input value={profile.skills} onChange={e => setProfile({...profile, skills: e.target.value})}
|
||||
placeholder="Python, React, AWS, Machine Learning..."
|
||||
className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-xl text-white" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-slate-400 mb-1">LinkedIn URL</label>
|
||||
<input value={profile.linkedin_url} onChange={e => setProfile({...profile, linkedin_url: e.target.value})}
|
||||
placeholder="https://linkedin.com/in/yourprofile"
|
||||
className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-xl text-white" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-slate-400 mb-1">Education</label>
|
||||
<input value={profile.education} onChange={e => setProfile({...profile, education: e.target.value})}
|
||||
placeholder="Bachelor's in Computer Science, University of..."
|
||||
className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-xl text-white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-800 rounded-2xl p-6 border border-slate-700">
|
||||
<h3 className="font-semibold mb-4">Job Preferences</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm text-slate-400 mb-1">Job Keywords (comma-separated)</label>
|
||||
<input value={profile.job_keywords} onChange={e => setProfile({...profile, job_keywords: e.target.value})}
|
||||
placeholder="Senior Python Engineer, AI/ML, Machine Learning, Remote"
|
||||
className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-xl text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-slate-400 mb-1">Preferred Locations (comma-separated)</label>
|
||||
<input value={profile.job_locations} onChange={e => setProfile({...profile, job_locations: e.target.value})}
|
||||
placeholder="Barcelona, Madrid, Remote, UK, Europe"
|
||||
className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-xl text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-800 rounded-2xl p-6 border border-slate-700">
|
||||
<h3 className="font-semibold mb-4">Work Experience</h3>
|
||||
{profile.experience.map((exp, i) => (
|
||||
<div key={i} className="mb-4 p-4 bg-slate-700/50 rounded-xl">
|
||||
<input value={exp.title} onChange={e => {
|
||||
const newExp = [...profile.experience]
|
||||
newExp[i].title = e.target.value
|
||||
setProfile({...profile, experience: newExp})
|
||||
}} placeholder="Job Title" className="w-full mb-2 px-3 py-2 bg-slate-600 rounded-lg text-white" />
|
||||
<input value={exp.company} onChange={e => {
|
||||
const newExp = [...profile.experience]
|
||||
newExp[i].company = e.target.value
|
||||
setProfile({...profile, experience: newExp})
|
||||
}} placeholder="Company" className="w-full mb-2 px-3 py-2 bg-slate-600 rounded-lg text-white" />
|
||||
<textarea value={exp.bullets} onChange={e => {
|
||||
const newExp = [...profile.experience]
|
||||
newExp[i].bullets = e.target.value
|
||||
setProfile({...profile, experience: newExp})
|
||||
}} placeholder="Key achievements (one per line)" rows={3}
|
||||
className="w-full px-3 py-2 bg-slate-600 rounded-lg text-white resize-none" />
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
onClick={() => setProfile({...profile, experience: [...profile.experience, { title: "", company: "", bullets: "" }]})}
|
||||
className="text-blue-400 hover:text-blue-300 text-sm"
|
||||
>
|
||||
+ Add Another Job
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={saveProfile}
|
||||
className="w-full py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-xl font-semibold transition"
|
||||
>
|
||||
Save Profile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Settings Tab — API Keys */}
|
||||
{tab === "settings" && (
|
||||
<div className="max-w-2xl">
|
||||
<h2 className="text-xl font-semibold mb-2">API Keys</h2>
|
||||
<p className="text-slate-400 text-sm mb-6">
|
||||
Add your own API keys. Your keys are encrypted and only used for your searches.
|
||||
Each user has their own keys — costs are tracked separately.
|
||||
</p>
|
||||
|
||||
<div className="bg-slate-800 rounded-2xl p-6 border border-slate-700 space-y-6">
|
||||
<div>
|
||||
<h3 className="font-semibold text-white mb-1">Jooble API Key</h3>
|
||||
<p className="text-slate-400 text-sm mb-3">Free. Get at <a href="https://jooble.com/api" target="_blank" className="text-blue-400 underline">jooble.com/api</a></p>
|
||||
<input
|
||||
type="password"
|
||||
value={apiKeys.jooble}
|
||||
onChange={e => setApiKeys({...apiKeys, jooble: e.target.value})}
|
||||
placeholder="Enter your Jooble API key"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold text-white mb-1">JSearch API Key (RapidAPI)</h3>
|
||||
<p className="text-slate-400 text-sm mb-3">
|
||||
100 free searches/month. Get at <a href="https://rapidapi.com" target="_blank" className="text-blue-400 underline">RapidAPI</a> — search "JSearch"
|
||||
</p>
|
||||
<input
|
||||
type="password"
|
||||
value={apiKeys.jsearch}
|
||||
onChange={e => setApiKeys({...apiKeys, jsearch: e.target.value})}
|
||||
placeholder="Enter your JSearch / RapidAPI key"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold text-white mb-1">Perplexity API Key</h3>
|
||||
<p className="text-slate-400 text-sm mb-3">
|
||||
For AI company research. Free tier at <a href="https://perplexity.ai" target="_blank" className="text-blue-400 underline">perplexity.ai</a>
|
||||
</p>
|
||||
<input
|
||||
type="password"
|
||||
value={apiKeys.perplexity}
|
||||
onChange={e => setApiKeys({...apiKeys, perplexity: e.target.value})}
|
||||
placeholder="Enter your Perplexity API key"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={saveApiKeys}
|
||||
className="w-full py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-xl font-semibold transition"
|
||||
>
|
||||
{keysSaved ? "✓ Keys Saved!" : "Save API Keys"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 bg-slate-800/50 rounded-xl p-4 border border-slate-700">
|
||||
<p className="text-slate-400 text-sm">
|
||||
💡 <strong className="text-white">Why add your own keys?</strong> You control your costs and data.
|
||||
Each platform has free tiers — Jooble is completely free, JSearch gives 100 searches/month free.
|
||||
We never charge for API usage.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user