function JobListingsForForeigners({ isLoading, jobListings }) { const jobList = jobListings.map((job)=>/*#__PURE__*/ React.createElement("li", { key: job.id, className: "p-4 bg-white rounded shadow-md hover:shadow-lg transition-shadow duration-300", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: `https://jp.indeed.com/viewjob?jk=${job.id}`, className: "text-xl font-semibold text-blue-500 hover:underline font-roboto", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, job.title), /*#__PURE__*/ React.createElement("p", { className: "italic font-roboto", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, job.company), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, job.location))); const selectedJobs = jobListings.slice(0, 3).map((job)=>/*#__PURE__*/ React.createElement("div", { key: job.id, className: "p-4 bg-white rounded shadow-md hover:shadow-lg transition-shadow duration-300", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: `https://jp.indeed.com/viewjob?jk=${job.id}`, className: "text-xl font-semibold text-blue-500 hover:underline font-roboto", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, job.title), /*#__PURE__*/ React.createElement("p", { className: "italic font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, job.company), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, job.location))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-6 font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, "外国人を募集する求人情報"), isLoading ? /*#__PURE__*/ React.createElement("p", { className: "text-center text-lg font-semibold font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Loading...") : /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, jobList), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-center my-6 font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "選ばれた求人情報"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, selectedJobs)); } function JobListingsForForeignersStory() { const jobListings = [ { id: '1', title: 'Software Engineer', company: 'Company A', location: 'Tokyo, Japan' }, { id: '2', title: 'Data Scientist', company: 'Company B', location: 'Osaka, Japan' }, { id: '3', title: 'Project Manager', company: 'Company C', location: 'Kyoto, Japan' }, { id: '4', title: 'UX Designer', company: 'Company D', location: 'Nagoya, Japan' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(JobListingsForForeigners, { isLoading: false, jobListings: jobListings, __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(JobListingsForForeigners, { isLoading: true, jobListings: [], __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this })); } function MainComponent() { const [jobListings, setJobListings] = React.useState([]); const [isLoading, setIsLoading] = React.useState(true); React.useEffect(()=>{ fetch('/integrations/web-scraping/post', { method: 'POST', body: JSON.stringify({ url: 'https://jp.indeed.com/jobs?q=%E6%AD%A3%E7%A4%BE%E5%93%A1+%E5%A4%96%E5%9B%BD%E4%BA%BA&l=&from=searchOnDesktopSerp&vjk=7444ea49657d3963', getText: true }), headers: { 'Content-Type': 'application/json' } }).then((response)=>response.text()).then((data)=>{ const parser = new DOMParser(); const doc = parser.parseFromString(data, 'text/html'); const listings = Array.from(doc.querySelectorAll('.jobsearch-SerpJobCard')).map((job)=>({ id: job.getAttribute('data-jk'), title: job.querySelector('.title a')?.textContent.trim(), location: job.querySelector('.location')?.textContent.trim(), company: job.querySelector('.company')?.textContent.trim() })); setJobListings(listings); setIsLoading(false); }); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4 font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1b1b1b] py-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl md:text-3xl font-bold text-center text-white", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "外国人を募集する求人情報のまとめサイト")), /*#__PURE__*/ React.createElement(JobListingsForForeigners, { isLoading: isLoading, jobListings: jobListings, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this })); }