feat: dashboard intro

src/pages/dashboard/intro/step2.tsx

@@ -0,0 +1,60 @@
+import { FormattedMessage } from "react-intl";
+import StepHeader from "./step-header";
+import { DefaultButton } from "@/element/buttons";
+import { DefaultProvider } from "@/providers";
+import { useEffect, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import CategoryInput from "@/element/stream-editor/category-input";
+import { GameInfo } from "@/service/game-database";
+import { extractGameTag, sortStreamTags } from "@/utils";
+import { appendDedupe } from "@snort/shared";
+
+export default function DashboardIntroStep2() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [game, setGame] = useState<GameInfo>();
+  const [gameId, setGameId] = useState<string>();
+  const [tags, setTags] = useState<Array<string>>([]);
+
+  useEffect(() => {
+    DefaultProvider.info().then(i => {
+      const { regularTags, prefixedTags } = sortStreamTags(i.streamInfo?.tags ?? []);
+      const { gameInfo, gameId } = extractGameTag(prefixedTags);
+      setGame(gameInfo);
+      setGameId(gameId);
+      setTags(regularTags);
+    });
+  }, []);
+
+  return (
+    <div className="mx-auto flex flex-col items-center ">
+      <StepHeader />
+      <div className="flex flex-col gap-4 w-[30rem]">
+        <h2 className="text-center">
+          <FormattedMessage defaultMessage="Choose a category" />
+        </h2>
+        <CategoryInput
+          tags={tags}
+          game={game}
+          gameId={gameId}
+          setTags={setTags}
+          setGame={setGame}
+          setGameId={setGameId}
+        />
+        <DefaultButton
+          onClick={async () => {
+            const newState = {
+              ...location.state,
+              tags: appendDedupe(tags, gameId ? [gameId] : undefined),
+            };
+            await DefaultProvider.updateStream(newState);
+            navigate("/dashboard/step-3", {
+              state: newState,
+            });
+          }}>
+          <FormattedMessage defaultMessage="Continue" />
+        </DefaultButton>
+      </div>
+    </div>
+  );
+}