simplified usage of selection bubbles v2

packages/fakeyou.com/src/components/common/SelectionBubblesV2/SelectionBubblesV2.tsx

@@ -36,10 +36,10 @@ export default function SelectionBubblesV2({
   const bubblesRef = useRef<HTMLDivElement>(null);
 
   const handleSelect = (
-    event: React.MouseEvent<HTMLButtonElement>,
+    event: React.MouseEvent<HTMLButtonElement> | null,
     optionLabel: string
   ) => {
-    event.preventDefault();
+    event?.preventDefault();
     setSelectedOption(optionLabel);
     onSelect(optionLabel);
   };
@@ -71,6 +71,13 @@ export default function SelectionBubblesV2({
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
+  useEffect(() => {
+    if (options.length > 0 && selectedOption !== null) {
+      onSelect(options[0].label);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <div
       className={`selection-bubbles-wrapper ${

packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioVST/StudioVSTPage.tsx

@@ -73,31 +73,33 @@ export default function PageVSTApp() {
     };
   }
 
-  const styleOptions = {
-    Anime: {
+  const styleOptions = [
+    {
       label: "Anime",
       imageUrl: "/images/dummy-image.jpg",
-      token: "weight_yqexh77ntqyawzgh9fzash798",
+      token: "weight_yqexh77ntqyawzgh9fzash7981",
     },
-    Pixel: {
+    {
       label: "Pixel",
       imageUrl: "/images/dummy-image-2.jpg",
-      token: "weight_yqexh77ntqyawzgh9fzash798",
+      token: "weight_yqexh77ntqyawzgh9fzash7982",
     },
-    Painting: {
+    {
       label: "Painting",
       imageUrl: "/images/dummy-image-3.jpg",
-      token: "weight_yqexh77ntqyawzgh9fzash798",
+      token: "weight_yqexh77ntqyawzgh9fzash7983",
     },
-    Test: {
+    {
       label: "Ink",
       imageUrl: "/images/dummy-image-4.jpg",
-      token: "weight_yqexh77ntqyawzgh9fzash798",
+      token: "weight_yqexh77ntqyawzgh9fzash7984",
     },
-  } as { [key: string]: { label: string; imageUrl: string; token: string } };
+  ];
 
-  const handleStyleSelection = (selected: string) => {
-    const selectedOption = styleOptions[selected];
+  const handleStyleSelection = (selectedLabel: any) => {
+    const selectedOption = styleOptions.find(
+      option => option.label === selectedLabel
+    );
     const selectedSdModelToken = selectedOption ? selectedOption.token : null;
     if (selectedSdModelToken) {
       setVstValues(curr => ({ ...curr, sdModelToken: selectedSdModelToken }));