51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import * as React from "react";
|
|
import classNames from "classnames";
|
|
import Checkmark from "@spectrum-icons/workflow/Checkmark";
|
|
|
|
interface KeywordsPickerProps {
|
|
keywords: string[];
|
|
value: string | null;
|
|
onChange: (val: string | null) => void;
|
|
}
|
|
const KeywordsPicker = ({ keywords, value, onChange }: KeywordsPickerProps) => {
|
|
return (
|
|
<div className="mx-2 mt-2">
|
|
<span className="text-xs text-black">
|
|
Collections
|
|
</span>
|
|
<ul className="flex gap-1 flex-wrap mt-1 mb-2">
|
|
{keywords.map((keyword) => {
|
|
const selected = value === keyword;
|
|
return (
|
|
<li key={keyword}>
|
|
<button
|
|
className={classNames(
|
|
`py-[5px] px-3 rounded-full text-sm`,
|
|
`text-black border border-black`,
|
|
selected
|
|
? "bg-transparentblack font-bold"
|
|
: `bg-white
|
|
hover:bg-transparentblack`
|
|
)}
|
|
onClick={() => (selected ? onChange(null) : onChange(keyword))}
|
|
type="button"
|
|
>
|
|
{keyword}{" "}
|
|
{/* {selected && (
|
|
<Checkmark
|
|
UNSAFE_className="mx-1"
|
|
UNSAFE_style={{ width: "15px" }}
|
|
aria-hidden="true"
|
|
/>
|
|
)} */}
|
|
</button>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default KeywordsPicker;
|