67 lines
2.7 KiB
TypeScript
67 lines
2.7 KiB
TypeScript
import { Icon } from "components/Ico";
|
|
import { Button } from "components/Inputs/Button";
|
|
import { ToolTip } from "components/ToolTip";
|
|
import { LibraryItemUserStatus } from "types/types";
|
|
import { useAppLayout } from "contexts/AppLayoutContext";
|
|
import { cIf, cJoin } from "helpers/className";
|
|
|
|
/*
|
|
* ╭─────────────╮
|
|
* ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
|
|
*/
|
|
|
|
interface Props {
|
|
id: string;
|
|
expand?: boolean;
|
|
}
|
|
|
|
// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
|
|
|
export const PreviewCardCTAs = ({ id, expand = false }: Props): JSX.Element => {
|
|
const { libraryItemUserStatus, setLibraryItemUserStatus, langui } = useAppLayout();
|
|
return (
|
|
<div
|
|
className={cJoin(
|
|
"flex flex-row flex-wrap place-content-center place-items-center",
|
|
cIf(expand, "gap-4", "gap-2")
|
|
)}>
|
|
<ToolTip content={langui.want_it} disabled={expand}>
|
|
<Button
|
|
icon={Icon.Favorite}
|
|
text={expand ? langui.want_it : undefined}
|
|
active={libraryItemUserStatus[id] === LibraryItemUserStatus.Want}
|
|
onClick={(event) => {
|
|
event.preventDefault();
|
|
setLibraryItemUserStatus((current) => {
|
|
const newLibraryItemUserStatus = { ...current };
|
|
newLibraryItemUserStatus[id] =
|
|
newLibraryItemUserStatus[id] === LibraryItemUserStatus.Want
|
|
? LibraryItemUserStatus.None
|
|
: LibraryItemUserStatus.Want;
|
|
return newLibraryItemUserStatus;
|
|
});
|
|
}}
|
|
/>
|
|
</ToolTip>
|
|
<ToolTip content={langui.have_it} disabled={expand}>
|
|
<Button
|
|
icon={Icon.BackHand}
|
|
text={expand ? langui.have_it : undefined}
|
|
active={libraryItemUserStatus[id] === LibraryItemUserStatus.Have}
|
|
onClick={(event) => {
|
|
event.preventDefault();
|
|
setLibraryItemUserStatus((current) => {
|
|
const newLibraryItemUserStatus = { ...current };
|
|
newLibraryItemUserStatus[id] =
|
|
newLibraryItemUserStatus[id] === LibraryItemUserStatus.Have
|
|
? LibraryItemUserStatus.None
|
|
: LibraryItemUserStatus.Have;
|
|
return newLibraryItemUserStatus;
|
|
});
|
|
}}
|
|
/>
|
|
</ToolTip>
|
|
</div>
|
|
);
|
|
};
|