56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import { GameInfo } from "@/service/game-database";
|
|
import { FormattedMessage } from "react-intl";
|
|
import { IconButton } from "../buttons";
|
|
import GameInfoCard from "../game-info";
|
|
import { SearchCategory } from "./category-search";
|
|
import { StreamInput } from "./input";
|
|
import { TagsInput } from "react-tag-input-component";
|
|
|
|
export default function CategoryInput({
|
|
tags,
|
|
game,
|
|
gameId,
|
|
setTags,
|
|
setGame,
|
|
setGameId,
|
|
}: {
|
|
tags: Array<string>;
|
|
game: GameInfo | undefined;
|
|
gameId: string | undefined;
|
|
setTags: (v: Array<string>) => void;
|
|
setGame: (g: GameInfo | undefined) => void;
|
|
setGameId: (id: string | undefined) => void;
|
|
}) {
|
|
return (
|
|
<>
|
|
<StreamInput label={<FormattedMessage defaultMessage="Category" />}>
|
|
{!gameId && (
|
|
<SearchCategory
|
|
onSelect={g => {
|
|
setGame(g);
|
|
setGameId(g.id);
|
|
}}
|
|
/>
|
|
)}
|
|
{gameId && (
|
|
<div className="flex justify-between rounded-xl px-3 py-2 border border-layer-2">
|
|
<GameInfoCard gameInfo={game} gameId={gameId} imageSize={80} />
|
|
<IconButton
|
|
iconName="x"
|
|
iconSize={12}
|
|
className="text-layer-4"
|
|
onClick={() => {
|
|
setGame(undefined);
|
|
setGameId(undefined);
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
</StreamInput>
|
|
<StreamInput label={<FormattedMessage defaultMessage="Tags" />}>
|
|
<TagsInput value={tags} onChange={setTags} placeHolder="Music,DJ,English" separators={["Enter", ","]} />
|
|
</StreamInput>
|
|
</>
|
|
);
|
|
}
|