66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import React from "react";
|
|
import { StylesConfig } from "react-select";
|
|
|
|
export interface ActionOption {
|
|
value: string;
|
|
label: React.ReactElement;
|
|
}
|
|
|
|
export const CVMatchLabel = (
|
|
<span className="inline-flex flex-row items-center gap-2">
|
|
<div className="w-6 h-6">
|
|
<i className="icon-[solar--magic-stick-3-bold-duotone] w-6 h-6"></i>
|
|
</div>
|
|
<div>Match on ComicVine</div>
|
|
</span>
|
|
);
|
|
|
|
export const editLabel = (
|
|
<span className="inline-flex flex-row items-center gap-2">
|
|
<div className="w-6 h-6">
|
|
<i className="icon-[solar--pen-2-bold-duotone] w-6 h-6"></i>
|
|
</div>
|
|
<div>Edit Metadata</div>
|
|
</span>
|
|
);
|
|
|
|
export const deleteLabel = (
|
|
<span className="inline-flex flex-row items-center gap-2">
|
|
<div className="w-6 h-6">
|
|
<i className="icon-[solar--trash-bin-trash-bold-duotone] w-6 h-6"></i>
|
|
</div>
|
|
<div>Delete Comic</div>
|
|
</span>
|
|
);
|
|
|
|
export const actionOptions: ActionOption[] = [
|
|
{ value: "match-on-comic-vine", label: CVMatchLabel },
|
|
{ value: "edit-metdata", label: editLabel },
|
|
{ value: "delete-comic", label: deleteLabel },
|
|
];
|
|
|
|
export const customStyles: StylesConfig<ActionOption, false> = {
|
|
menu: (base: any) => ({
|
|
...base,
|
|
backgroundColor: "rgb(156, 163, 175)",
|
|
}),
|
|
placeholder: (base: any) => ({
|
|
...base,
|
|
color: "black",
|
|
}),
|
|
option: (base: any, { isFocused }: any) => ({
|
|
...base,
|
|
backgroundColor: isFocused ? "gray" : "rgb(156, 163, 175)",
|
|
}),
|
|
singleValue: (base: any) => ({
|
|
...base,
|
|
paddingTop: "0.4rem",
|
|
}),
|
|
control: (base: any) => ({
|
|
...base,
|
|
backgroundColor: "rgb(156, 163, 175)",
|
|
color: "black",
|
|
border: "1px solid rgb(156, 163, 175)",
|
|
}),
|
|
};
|