feat: dashboard intro

src/element/stream-editor/category-input.tsx

@@ -0,0 +1,55 @@
+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>
+    </>
+  );
+}