f045fe4a8a
Feat/SW-1555 jobylon integration * feat(SW-1555): Added jobylon feed query * feat(SW-1555): Added jobylon feed component Approved-by: Fredrik Thorsson Approved-by: Matilda Landström
58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { OpenInNewSmallIcon } from "@/components/Icons"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
import { getIntl } from "@/i18n"
|
|
import { getLang } from "@/i18n/serverContext"
|
|
|
|
import styles from "./jobylonCard.module.css"
|
|
|
|
import type { JobylonItem } from "@/types/trpc/routers/jobylon"
|
|
|
|
interface JobylonCardProps {
|
|
job: JobylonItem
|
|
}
|
|
|
|
export default async function JobylonCard({ job }: JobylonCardProps) {
|
|
const intl = await getIntl()
|
|
const lang = getLang()
|
|
const deadlineText = job.toDate
|
|
? intl.formatMessage(
|
|
{ id: "Deadline: {date}" },
|
|
{ date: job.toDate.locale(lang).format("Do MMMM") }
|
|
)
|
|
: intl.formatMessage({ id: "Open for application" })
|
|
|
|
return (
|
|
<div className={styles.jobylonCard}>
|
|
<Subtitle asChild>
|
|
<h3>{job.title}</h3>
|
|
</Subtitle>
|
|
|
|
<div className={styles.contentWrapper}>
|
|
<div className={styles.content}>
|
|
<Caption>{job.categories.map((cat) => cat.text).join(", ")}</Caption>
|
|
<Caption>
|
|
{job.locations
|
|
.map((loc) => `${loc.city}, ${loc.country}`)
|
|
.join(" | ")}
|
|
</Caption>
|
|
<Caption color="uiTextPlaceholder">{deadlineText}</Caption>
|
|
</div>
|
|
<Button
|
|
theme="base"
|
|
size="small"
|
|
intent="tertiary"
|
|
variant="icon"
|
|
asChild
|
|
>
|
|
<a href={job.url} target="_blank" rel="noopener noreferrer">
|
|
{intl.formatMessage({ id: "View & apply" })}
|
|
<OpenInNewSmallIcon />
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|