This commit is contained in:
Anang Yusman 2025-09-23 15:53:32 +08:00
parent d337f9e6ea
commit 41eff52e34
6 changed files with 112 additions and 82 deletions

View File

@ -232,9 +232,9 @@ export default function Login() {
{isFirstLogin ? ( {isFirstLogin ? (
<div className="bg-white rounded-2xl shadow-xl p-8 border border-gray-100"> <div className="bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
<div className="text-center mb-8"> <div className="text-center mb-8">
<div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg <svg
className="w-8 h-8 text-orange-600" className="w-8 h-8 text-blue-900"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -292,7 +292,7 @@ export default function Login() {
<Button <Button
size="lg" size="lg"
className="w-full bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-semibold py-3 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl" className="w-full bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold py-3 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl"
onClick={submitCheckEmail} onClick={submitCheckEmail}
> >
Submit Submit
@ -486,7 +486,7 @@ export default function Login() {
<Button <Button
size="lg" size="lg"
className="w-full bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-semibold py-3 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl" className="w-full bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold py-3 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl"
onClick={onSubmit} onClick={onSubmit}
> >
Masuk ke Portal Masuk ke Portal

View File

@ -39,33 +39,38 @@ export default function HeaderNews() {
} }
} }
if (articles.length < 4) return null; if (articles.length === 0) {
return <p className="text-center">Belum ada artikel.</p>;
}
return ( return (
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<div className=" py-6 grid grid-cols-1 md:grid-cols-2 gap-4 h-[600px]"> <div className="py-6 grid grid-cols-1 md:grid-cols-2 gap-4 h-[600px]">
{/* Kiri - berita utama */} {/* Kiri - berita utama */}
<div className="relative overflow-hidden h-full"> <div className="relative overflow-hidden h-full">
<Image <Image
src={articles[0].thumbnailUrl || "/dummy.jpg"} src={articles[0]?.thumbnailUrl || "/dummy.jpg"}
alt={articles[0].title} alt={articles[0]?.title || "No Title"}
fill fill
className="object-cover" className="object-cover"
/> />
<div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div> <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
<div className="absolute bottom-4 left-4 right-4 text-white"> <div className="absolute bottom-4 left-4 right-4 text-white">
<span className="bg-black/70 text-xs px-2 py-1 rounded"> <span className="bg-black/70 text-xs px-2 py-1 rounded">
{articles[0].categories[0]?.title || "Uncategorized"} {articles[0]?.categories?.[0]?.title || "Uncategorized"}
</span> </span>
<h2 className="text-2xl font-bold mt-2">{articles[0].title}</h2> <h2 className="text-2xl font-bold mt-2">{articles[0]?.title}</h2>
<p className="text-sm mt-1"> <p className="text-sm mt-1">
<span className="font-semibold">{articles[0].createdByName}</span>{" "} <span className="font-semibold">
{articles[0]?.createdByName}
</span>{" "}
{" "} {" "}
{new Date(articles[0].createdAt).toLocaleDateString("id-ID", { {articles[0]?.createdAt &&
day: "numeric", new Date(articles[0].createdAt).toLocaleDateString("id-ID", {
month: "long", day: "numeric",
year: "numeric", month: "long",
})} year: "numeric",
})}
</p> </p>
</div> </div>
</div> </div>
@ -74,67 +79,84 @@ export default function HeaderNews() {
<div className="grid grid-rows-2 gap-2 h-full"> <div className="grid grid-rows-2 gap-2 h-full">
{/* Atas: 2 berita kecil */} {/* Atas: 2 berita kecil */}
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
{articles.slice(1, 3).map((item) => ( {[articles[1], articles[2]].map(
<div key={item.id} className="relative overflow-hidden"> (item, idx) =>
<Image item && (
src={item.thumbnailUrl || "/dummy.jpg"} <div
alt={item.title} key={item.id || `dummy-${idx}`}
fill className="relative overflow-hidden"
className="object-cover" >
/> <Image
<div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div> src={item.thumbnailUrl || "/dummy.jpg"}
<div className="absolute bottom-2 left-2 right-2 text-white"> alt={item.title || "No Title"}
<span className="bg-black/70 text-[10px] px-2 py-1 rounded"> fill
{item.categories[0]?.title || "Uncategorized"} className="object-cover"
</span> />
<h3 className="text-sm font-semibold mt-1 line-clamp-2"> <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
{item.title} <div className="absolute bottom-2 left-2 right-2 text-white">
</h3> <span className="bg-black/70 text-[10px] px-2 py-1 rounded">
<p className="text-[10px]"> {item.categories?.[0]?.title || "Uncategorized"}
<span className="font-semibold">{item.createdByName}</span>{" "} </span>
{" "} <h3 className="text-sm font-semibold mt-1 line-clamp-2">
{new Date(item.createdAt).toLocaleDateString("id-ID", { {item.title}
day: "numeric", </h3>
month: "short", <p className="text-[10px]">
year: "numeric", <span className="font-semibold">
})} {item.createdByName}
</p> </span>{" "}
</div> {" "}
</div> {item.createdAt &&
))} new Date(item.createdAt).toLocaleDateString("id-ID", {
day: "numeric",
month: "short",
year: "numeric",
})}
</p>
</div>
</div>
)
)}
</div> </div>
{/* Bawah: 1 berita besar */} {/* Bawah: 1 berita besar */}
<div className="relative overflow-hidden"> {articles[3] && (
<Image <div className="relative overflow-hidden">
src={articles[3].thumbnailUrl || "/dummy.jpg"} <Image
alt={articles[3].title} src={articles[3]?.thumbnailUrl || "/dummy.jpg"}
fill alt={articles[3]?.title || "No Title"}
className="object-cover" fill
/> className="object-cover"
<div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div> />
<div className="absolute bottom-2 left-2 right-2 text-white"> <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
<span className="bg-black/70 text-xs px-2 py-1 rounded"> <div className="absolute bottom-2 left-2 right-2 text-white">
{articles[3].categories[0]?.title || "Uncategorized"} <span className="bg-black/70 text-xs px-2 py-1 rounded">
</span> {articles[3]?.categories?.[0]?.title || "Uncategorized"}
<h3 className="text-base font-semibold mt-1"> </span>
{articles[3].title} <h3 className="text-base font-semibold mt-1">
</h3> {articles[3]?.title}
<p className="text-xs"> </h3>
<span className="font-semibold"> <p className="text-xs">
{articles[3].createdByName} <span className="font-semibold">
</span>{" "} {articles[3]?.createdByName}
{" "} </span>{" "}
{new Date(articles[3].createdAt).toLocaleDateString("id-ID", { {" "}
day: "numeric", {articles[3]?.createdAt &&
month: "long", new Date(articles[3].createdAt).toLocaleDateString(
year: "numeric", "id-ID",
})} {
</p> day: "numeric",
month: "long",
year: "numeric",
}
)}
</p>
</div>
</div> </div>
</div> )}
</div> </div>
</div> </div>
{/* Banner bawah */}
<div className="w-full relative mb-2 h-[120px] overflow-hidden flex items-center border my-8"> <div className="w-full relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
<Image <Image
src={"/image-kolom.png"} src={"/image-kolom.png"}

View File

@ -6,7 +6,7 @@ const axiosBaseInstance = axios.create({
baseURL, baseURL,
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Client-Key": "bb65b1ad-e954-4a1a-b4d0-74df5bb0b640" "X-Client-Key": "02080003-5ad6-4b85-8ee6-0e14ec39349d",
}, },
}); });

View File

@ -10,7 +10,7 @@ const axiosInterceptorInstance = axios.create({
baseURL, baseURL,
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Client-Key": "bb65b1ad-e954-4a1a-b4d0-74df5bb0b640" "X-Client-Key": "02080003-5ad6-4b85-8ee6-0e14ec39349d",
}, },
withCredentials: true, withCredentials: true,
}); });

View File

@ -2,11 +2,11 @@ import axiosBaseInstance from "./axios-base-instance";
const defaultHeaders = { const defaultHeaders = {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Client-Key": "bb65b1ad-e954-4a1a-b4d0-74df5bb0b640" "X-Client-Key": "02080003-5ad6-4b85-8ee6-0e14ec39349d",
}; };
export async function httpGet(pathUrl: any, headers?: any) { export async function httpGet(pathUrl: any, headers?: any) {
console.log("X-HEADERS : ", defaultHeaders) console.log("X-HEADERS : ", defaultHeaders);
const mergedHeaders = { const mergedHeaders = {
...defaultHeaders, ...defaultHeaders,
...headers, ...headers,

View File

@ -5,11 +5,11 @@ import { getCsrfToken } from "../master-user";
const defaultHeaders = { const defaultHeaders = {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Client-Key": "bb65b1ad-e954-4a1a-b4d0-74df5bb0b640" "X-Client-Key": "02080003-5ad6-4b85-8ee6-0e14ec39349d",
}; };
export async function httpGetInterceptor(pathUrl: any) { export async function httpGetInterceptor(pathUrl: any) {
console.log("X-HEADERS : ", defaultHeaders) console.log("X-HEADERS : ", defaultHeaders);
const response = await axiosInterceptorInstance const response = await axiosInterceptorInstance
.get(pathUrl, { headers: defaultHeaders }) .get(pathUrl, { headers: defaultHeaders })
.catch((error) => error.response); .catch((error) => error.response);
@ -35,7 +35,11 @@ export async function httpGetInterceptor(pathUrl: any) {
} }
} }
export async function httpPostInterceptor(pathUrl: any, data: any, headers?: any) { export async function httpPostInterceptor(
pathUrl: any,
data: any,
headers?: any
) {
const resCsrf = await getCsrfToken(); const resCsrf = await getCsrfToken();
const csrfToken = resCsrf?.data?.csrf_token; const csrfToken = resCsrf?.data?.csrf_token;
@ -67,7 +71,11 @@ export async function httpPostInterceptor(pathUrl: any, data: any, headers?: any
} }
} }
export async function httpPutInterceptor(pathUrl: any, data: any, headers?: any) { export async function httpPutInterceptor(
pathUrl: any,
data: any,
headers?: any
) {
const resCsrf = await getCsrfToken(); const resCsrf = await getCsrfToken();
const csrfToken = resCsrf?.data?.csrf_token; const csrfToken = resCsrf?.data?.csrf_token;
@ -99,7 +107,7 @@ export async function httpPutInterceptor(pathUrl: any, data: any, headers?: any)
} }
export async function httpDeleteInterceptor(pathUrl: any, headers?: any) { export async function httpDeleteInterceptor(pathUrl: any, headers?: any) {
const resCsrf = await getCsrfToken(); const resCsrf = await getCsrfToken();
const csrfToken = resCsrf?.data?.csrf_token; const csrfToken = resCsrf?.data?.csrf_token;
const mergedHeaders = { const mergedHeaders = {