tieptk/hurasoft_nextjs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update 25/03

Browse Source
This commit is contained in:
Tieptk
2025-03-25 14:18:53 +07:00
parent 27057c8588
commit cc8b18bbc9
2 changed files with 273 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/app/job/[slug]/page.tsx
View File

@@ -1,5 +1,5 @@
"use client"; "use client";
import { useState, useEffect } from "react"; import { Suspense, useState, useEffect } from "react";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { JobDetailDataType } from "@/types/job"; import { JobDetailDataType } from "@/types/job";
import { fetchJobDetail } from "@/api/apiService"; import { fetchJobDetail } from "@/api/apiService";
@@ -8,6 +8,7 @@ const JobDetails = () => {
const [JobDetail, setJobDetail] = useState<JobDetailDataType | null>(null); const [JobDetail, setJobDetail] = useState<JobDetailDataType | null>(null);
const [activeTab, setActiveTab] = useState("#info"); const [activeTab, setActiveTab] = useState("#info");
const { slug } = useParams(); const { slug } = useParams();
const [loadingUi, setLoadingUI] = useState(true);
const showTab = (tab: string) => { const showTab = (tab: string) => {
setActiveTab(tab); setActiveTab(tab);
@@ -18,6 +19,7 @@ const JobDetails = () => {
const getJobDetail = async () => { const getJobDetail = async () => {
const data = await fetchJobDetail(slug); const data = await fetchJobDetail(slug);
setJobDetail(data[0]); setJobDetail(data[0]);
setLoadingUI(false);
}; };
getJobDetail(); getJobDetail();
} }
@@ -25,6 +27,45 @@ const JobDetails = () => {
return ( return (
<div className="page-job detail"> <div className="page-job detail">
<Suspense>
{loadingUi ? (
<div className="container-job">
<h2 className="title animate-fade-in text-xl font-medium bg-gray-200 rounded-[12px]"></h2>
<div className="content-job flex">
<div className="left-job">
<div className="item">
<p className="bg-gray-200 h-[20px] block w-full"></p>
<b className="bg-gray-200 h-[20px] block w-full"></b>
</div>
<div className="item">
<p className="bg-gray-200 h-[20px] block w-full"></p>
<b className="bg-gray-200 h-[20px] block w-full"></b>
</div>
<div className="item">
<p className="bg-gray-200 h-[20px] block w-full"></p>
<b className="bg-gray-200 h-[20px] block w-full"></b>
</div>
</div>
<div className="right-job">
<div className="list-tab flex items-center">
<div className="item-tab bg-gray-200 w-[170px] h-[45px] mr-[12px] rounded-[5px]"></div>
<div className="item-tab bg-gray-200 w-[170px] h-[45px] mr-[12px] rounded-[5px]"></div>
</div>
<div>
<div className="bg-gray-200 w-full h-[30px] rounded-[5px] ml-[20px] mb-[20px]"></div>
<ul>
<li className="bg-gray-200 w-full h-[20px] rounded-[5px] mb-[10px] ml-[10px]"></li>
<li className="bg-gray-200 w-full h-[20px] rounded-[5px] mb-[10px] ml-[10px]"></li>
<li className="bg-gray-200 w-full h-[20px] rounded-[5px] mb-[10px] ml-[10px]"></li>
<li className="bg-gray-200 w-full h-[20px] rounded-[5px] mb-[10px] ml-[10px]"></li>
<li className="bg-gray-200 w-full h-[20px] rounded-[5px] mb-[10px] ml-[10px]"></li>
</ul>
</div>
</div>
</div>
</div>
) : (
<div>
{JobDetail ? ( {JobDetail ? (
<div className="container-job"> <div className="container-job">
<h2 className="title">{JobDetail.title}</h2> <h2 className="title">{JobDetail.title}</h2>
@@ -71,7 +112,9 @@ const JobDetails = () => {
id="info" id="info"
> >
<div <div
dangerouslySetInnerHTML={{ __html: JobDetail.description }} dangerouslySetInnerHTML={{
__html: JobDetail.description,
}}
/> />
<a <a
href="javascript:void(0)" href="javascript:void(0)"
@@ -95,12 +138,16 @@ const JobDetails = () => {
<p className="name-up">Tải lên sơ yếu lý lịch</p> <p className="name-up">Tải lên sơ yếu lý lịch</p>
</div> </div>
<p className="gray"> <p className="gray">
Tải sơ yếu lý lịch của bạn lên đây để tự động điền các Tải sơ yếu lý lịch của bạn lên đây để tự động điền
thông tin chính. các thông tin chính.
</p> </p>
</div> </div>
<div className="upload-right"> <div className="upload-right">
<input id="js-file-upload-id" type="hidden" value="" /> <input
id="js-file-upload-id"
type="hidden"
value=""
/>
<div id="js-container-selector"> <div id="js-container-selector">
<a <a
id="js-select-file" id="js-select-file"
@@ -158,9 +205,9 @@ const JobDetails = () => {
<div className="item-form"> <div className="item-form">
<label>Thông tin bổ sung</label> <label>Thông tin bổ sung</label>
<span className="ghichu"> <span className="ghichu">
Vui lòng chia sẻ bất kỳ điều gì khác bạn muốn chúng tôi Vui lòng chia sẻ bất kỳ điều gì khác bạn muốn chúng
biết, chẳng hạn như động lực của bạn khi ứng tuyển hoặc các tôi biết, chẳng hạn như động lực của bạn khi ứng tuyển
bối cảnh bổ sung liên quan đến hồ sơ của bạn. hoặc các bối cảnh bổ sung liên quan đến hồ sơ của bạn.
</span> </span>
<textarea <textarea
className="input-item" className="input-item"
@@ -184,6 +231,9 @@ const JobDetails = () => {
</div> </div>
)} )}
</div> </div>
)}
</Suspense>
</div>
); );
}; };

61
src/app/job/page.tsx
View File

@@ -1,16 +1,18 @@
"use client"; "use client";
import Link from "next/link"; import Link from "next/link";
import { useState, useEffect } from "react"; import { Suspense, useState, useEffect } from "react";
import { ListJobDataType } from "@/types/job"; import { ListJobDataType } from "@/types/job";
import { fetchListJobs } from "@/api/apiService"; import { fetchListJobs } from "@/api/apiService";
const HomeJob = () => { const HomeJob = () => {
const [ListJob, setListJob] = useState<ListJobDataType | null>(null); const [ListJob, setListJob] = useState<ListJobDataType | null>(null);
const [loadingUi, setLoadingUI] = useState(true);
useEffect(() => { useEffect(() => {
const getListJob = async () => { const getListJob = async () => {
const data = await fetchListJobs(); const data = await fetchListJobs();
setListJob(data.list); setListJob(data.list);
setLoadingUI(false);
}; };
getListJob(); getListJob();
@@ -20,12 +22,61 @@ const HomeJob = () => {
<div className="page-job list"> <div className="page-job list">
<div className="container-job"> <div className="container-job">
<h2 className="title">Tuyển dụng</h2> <h2 className="title">Tuyển dụng</h2>
<Suspense>
{loadingUi ? (
<div className="list-job">
<div className="item-job">
<div className="job-left flex items-center">
<div className="name line-clamp-1 bg-gray-200 h-[21px] w-[300px] mr-[15px]"></div>
<div className="time bg-gray-200 h-[20px] w-[120px] block"></div>
</div>
<div className="job-right flex items-center">
<div className="localhost bg-gray-200 h-[21px] w-[60px] mr-[20px] block"></div>
<div className="more bg-gray-200 h-[21px] block w-[120px]"></div>
</div>
</div>
<div className="item-job">
<div className="job-left flex items-center">
<div className="name line-clamp-1 bg-gray-200 h-[21px] w-[300px] mr-[15px]"></div>
<div className="time bg-gray-200 h-[20px] w-[120px] block"></div>
</div>
<div className="job-right flex items-center">
<div className="localhost bg-gray-200 h-[21px] w-[60px] mr-[20px] block"></div>
<div className="more bg-gray-200 h-[21px] block w-[120px]"></div>
</div>
</div>
<div className="item-job">
<div className="job-left flex items-center">
<div className="name line-clamp-1 bg-gray-200 h-[21px] w-[300px] mr-[15px]"></div>
<div className="time bg-gray-200 h-[20px] w-[120px] block"></div>
</div>
<div className="job-right flex items-center">
<div className="localhost bg-gray-200 h-[21px] w-[60px] mr-[20px] block"></div>
<div className="more bg-gray-200 h-[21px] block w-[120px]"></div>
</div>
</div>
<div className="item-job">
<div className="job-left flex items-center">
<div className="name line-clamp-1 bg-gray-200 h-[21px] w-[300px] mr-[15px]"></div>
<div className="time bg-gray-200 h-[20px] w-[120px] block"></div>
</div>
<div className="job-right flex items-center">
<div className="localhost bg-gray-200 h-[21px] w-[60px] mr-[20px] block"></div>
<div className="more bg-gray-200 h-[21px] block w-[120px]"></div>
</div>
</div>
</div>
) : (
<div>
{ListJob && Array.isArray(ListJob) && ListJob.length > 0 ? ( {ListJob && Array.isArray(ListJob) && ListJob.length > 0 ? (
<div className="list-job"> <div className="list-job">
{ListJob.map((item) => ( {ListJob.map((item) => (
<div className="item-job" key={item.id}> <div className="item-job" key={item.id}>
<div className="job-left"> <div className="job-left">
<Link href={`${item.url}`} className="name line-clamp-1"> <Link
href={`${item.url}`}
className="name line-clamp-1"
>
{item.title} {item.title}
</Link> </Link>
<div className="time">{item.end_date}</div> <div className="time">{item.end_date}</div>
@@ -33,7 +84,8 @@ const HomeJob = () => {
<div className="job-right flex items-center"> <div className="job-right flex items-center">
<div className="localhost">{item.location}</div> <div className="localhost">{item.location}</div>
<Link href={`${item.url}`} className="more"> <Link href={`${item.url}`} className="more">
Ứng tuyển ngay <i className="fa-solid fa-angle-right"></i> Ứng tuyển ngay{" "}
<i className="fa-solid fa-angle-right"></i>
</Link> </Link>
</div> </div>
</div> </div>
@@ -45,6 +97,9 @@ const HomeJob = () => {
</div> </div>
)} )}
</div> </div>
)}
</Suspense>
</div>
</div> </div>
); );
}; };