fix(SW-696): split up surprises into more components for readability

add tsparticles for confetti

components/MyPages/Surprises/Navigation.tsx

@@ -0,0 +1,45 @@
+import { useIntl } from "react-intl"
+
+import { ChevronRightSmallIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+
+import styles from "./surprises.module.css"
+
+import type { NavigationProps } from "@/types/components/blocks/surprises"
+
+export default function Navigation({
+  selectedSurprise,
+  totalSurprises,
+  showSurprise,
+}: NavigationProps) {
+  const intl = useIntl()
+
+  return (
+    <nav className={styles.nav}>
+      <Button
+        variant="icon"
+        intent="tertiary"
+        disabled={selectedSurprise === 0}
+        onPress={() => showSurprise(-1)}
+        size="small"
+      >
+        <ChevronRightSmallIcon
+          className={styles.chevron}
+          width={20}
+          height={20}
+        />
+        {intl.formatMessage({ id: "Previous" })}
+      </Button>
+      <Button
+        variant="icon"
+        intent="tertiary"
+        disabled={selectedSurprise === totalSurprises - 1}
+        onPress={() => showSurprise(1)}
+        size="small"
+      >
+        {intl.formatMessage({ id: "Next" })}
+        <ChevronRightSmallIcon width={20} height={20} />
+      </Button>
+    </nav>
+  )
+}