71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { RouterJob } from "@/app/lib/router_hipmi/router_job";
|
|
import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
|
|
import {
|
|
MainColor,
|
|
AccentColor,
|
|
} from "@/app_modules/_global/color/color_pallet";
|
|
import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
|
|
import { Card, Grid, Center, Text } from "@mantine/core";
|
|
import { MODEL_JOB } from "../../model/interface";
|
|
import { useRouter } from "next/navigation";
|
|
import { useState } from "react";
|
|
|
|
export default function ComponentJob_BerandaCardView({
|
|
data,
|
|
}: {
|
|
data: MODEL_JOB;
|
|
}) {
|
|
const router = useRouter();
|
|
const [visible, setVisible] = useState(false);
|
|
const [jobId, setJobId] = useState("");
|
|
|
|
return (
|
|
<>
|
|
<Card
|
|
mb={"md"}
|
|
shadow="lg"
|
|
p={30}
|
|
radius={"md"}
|
|
style={{
|
|
backgroundColor: MainColor.darkblue,
|
|
border: `2px solid ${AccentColor.blue}`,
|
|
}}
|
|
>
|
|
<Card.Section style={{ zIndex: 99 }}>
|
|
<ComponentGlobal_AuthorNameOnHeader
|
|
authorName={data.Author.username}
|
|
imagesId={data.Author.Profile.imagesId}
|
|
profileId={data.Author.Profile.id}
|
|
isPembatas={true}
|
|
/>
|
|
</Card.Section>
|
|
<Card.Section
|
|
onClick={() => {
|
|
visible ? "" : setJobId(data.id),
|
|
setVisible(true),
|
|
router.push(RouterJob.main_detail + data.id);
|
|
}}
|
|
mt={"lg"}
|
|
>
|
|
<Grid>
|
|
<Grid.Col span={"auto"}>
|
|
<Center h={"100%"}>
|
|
<Text fw={"bold"} fz={"xl"} lineClamp={1} c={"white"}>
|
|
{data.title}
|
|
</Text>
|
|
</Center>
|
|
</Grid.Col>
|
|
</Grid>
|
|
</Card.Section>
|
|
{visible && data.id === jobId ? (
|
|
<ComponentGlobal_CardLoadingOverlay />
|
|
) : (
|
|
""
|
|
)}
|
|
</Card>
|
|
</>
|
|
);
|
|
}
|