71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { dt } from "@scandic-hotels/common/dt"
|
|
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import styles from "./jobylonCard.module.css"
|
|
|
|
import type { JobylonItem } from "@/types/trpc/routers/jobylon"
|
|
|
|
interface JobylonCardProps {
|
|
job: JobylonItem
|
|
}
|
|
|
|
export default function JobylonCard({ job }: JobylonCardProps) {
|
|
const intl = useIntl()
|
|
const lang = useLang()
|
|
const deadlineText = job.toDate
|
|
? intl.formatMessage(
|
|
{
|
|
id: "jobylonFeed.card.deadlineText",
|
|
defaultMessage: "Deadline: {date}",
|
|
},
|
|
{ date: dt(job.toDate).locale(lang).format("Do MMMM") }
|
|
)
|
|
: intl.formatMessage({
|
|
id: "jobylonFeed.card.openForApplication",
|
|
defaultMessage: "Open for application",
|
|
})
|
|
|
|
return (
|
|
<div className={styles.jobylonCard}>
|
|
<Typography variant="Title/Subtitle/md">
|
|
<h3>{job.title}</h3>
|
|
</Typography>
|
|
|
|
<div className={styles.contentWrapper}>
|
|
<Typography variant="Body/Supporting text (caption)/smRegular">
|
|
<div>
|
|
<p>{job.categories.map((cat) => cat.text).join(", ")}</p>
|
|
<p>
|
|
{job.locations
|
|
.map((loc) => `${loc.city}, ${loc.country}`)
|
|
.join(" | ")}
|
|
</p>
|
|
<p className={styles.deadline}>{deadlineText}</p>
|
|
</div>
|
|
</Typography>
|
|
|
|
<ButtonLink
|
|
size="sm"
|
|
variant="Tertiary"
|
|
href={job.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
trailingIconName="open_in_new"
|
|
>
|
|
{intl.formatMessage({
|
|
id: "jobylonFeed.card.viewAndApplyButton",
|
|
defaultMessage: "View & apply",
|
|
})}
|
|
</ButtonLink>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|