31 lines
976 B
JavaScript
31 lines
976 B
JavaScript
import { Card, Divider, Space } from "antd";
|
|
import { useMemo } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import JobNotesPinToggle from "../job-notes-pin-toggle/job-notes-pin-toggle.component";
|
|
|
|
function PinnedJobNotes({ job }) {
|
|
const { t } = useTranslation();
|
|
|
|
const pinnedNotes = useMemo(() => {
|
|
return job?.notes?.filter((note) => note.pinned); //This will be typically filtered, but adding this to maximize flexibility of the component.
|
|
}, [job.notes]);
|
|
|
|
return pinnedNotes?.length ? (
|
|
<>
|
|
<Divider />
|
|
<Space orientation="vertical" style={{ width: "100%" }}>
|
|
{pinnedNotes?.map((note) => (
|
|
<Card
|
|
key={note.id}
|
|
title={`${t("notes.labels.pinned_note")} - ${t(`notes.fields.types.${note.type}`)}`}
|
|
extra={<JobNotesPinToggle note={note} />}
|
|
>
|
|
{note.text}
|
|
</Card>
|
|
))}
|
|
</Space>
|
|
</>
|
|
) : null;
|
|
}
|
|
export default PinnedJobNotes;
|