@cuemath/leap 3.3.0 → 3.3.2-2.beta-guru-01

package/dist/features/wins-dashboard/student-badges/animated-tabbar.js

@@ -0,0 +1,66 @@
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { memo as u } from "react";
+import r, { css as C } from "styled-components";
+import e from "../../ui/layout/flex-view.js";
+import b from "../../ui/text/text.js";
+const g = 725, B = r(e)`
+  flex: 1;
+  position: relative;
+`, I = r(e)`
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  padding-top: 16px;
+  padding-bottom: 12px;
+  flex: 1;
+  cursor: pointer;
+`, w = r.div`
+  width: ${({ $width: t }) => t}px;
+  height: 2px;
+  position: absolute;
+  bottom: 0;
+  background: BLACK;
+  transition: transform 300ms linear;
+  transform: translateX(${({ $left: t }) => t}px);
+`, A = r(e)`
+  ${({ $hideTabText: t }) => t && C`
+      display: none;
+    `}
+`, y = ({
+  onTabClick: t,
+  selectedTabId: d,
+  tabs: i,
+  currentScreenWidth: x
+}) => {
+  const l = i.findIndex((o) => o.id === d), { ref: c } = i[l] || {}, { clientWidth: s = 0 } = (c == null ? void 0 : c.current) || {}, m = s, $ = l * s + (s - m) / 2;
+  return /* @__PURE__ */ f(B, { $background: "WHITE", children: [
+    /* @__PURE__ */ n(e, { $flexDirection: "row", $width: "100%", children: i.map((o) => {
+      const { id: a, title: T, Icon: h } = o, p = a === d;
+      return /* @__PURE__ */ n(
+        I,
+        {
+          $justifyContent: "center",
+          onClick: () => t(a),
+          ref: o.ref,
+          children: /* @__PURE__ */ f(e, { $flexDirection: "row", $justifyContent: "center", $alignItems: "center", children: [
+            /* @__PURE__ */ n(h, { selected: p }),
+            /* @__PURE__ */ n(
+              A,
+              {
+                $gutter: 4,
+                $hideTabText: x <= g,
+                children: /* @__PURE__ */ n(b, { $renderAs: "eyebrow2", $color: p ? "BLACK" : "BLACK_75", children: T })
+              }
+            )
+          ] })
+        },
+        a
+      );
+    }) }),
+    /* @__PURE__ */ n(w, { $left: $, $width: m })
+  ] });
+}, v = u(y);
+export {
+  v as default
+};
+//# sourceMappingURL=animated-tabbar.js.map

package/dist/features/wins-dashboard/student-badges/animated-tabbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-tabbar.js","sources":["../../../../src/features/wins-dashboard/student-badges/animated-tabbar.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\n\nconst MIN_SCREEN_WIDTH_FOR_TAB_TEXT = 725;\n\nexport interface TabItem {\n  id: string;\n  ref: React.RefObject<HTMLDivElement | null>;\n  Icon: React.FC<{ selected: boolean }>;\n  title: string;\n}\n\ninterface IndicatorProps {\n  $width: number;\n  $left: number;\n}\n\nconst TabBarContainer = styled(FlexView)`\n  flex: 1;\n  position: relative;\n`;\n\nconst TabBarColumn = styled(FlexView)`\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  padding-top: 16px;\n  padding-bottom: 12px;\n  flex: 1;\n  cursor: pointer;\n`;\n\nconst Indicator = styled.div<IndicatorProps>`\n  width: ${({ $width }) => $width}px;\n  height: 2px;\n  position: absolute;\n  bottom: 0;\n  background: BLACK;\n  transition: transform 300ms linear;\n  transform: translateX(${({ $left }) => $left}px);\n`;\n\nconst TabTitleContainer = styled(FlexView)<{ $hideTabText: boolean }>`\n  ${({ $hideTabText }) =>\n    $hideTabText &&\n    css`\n      display: none;\n    `}\n`;\n\ninterface AnimatedTabBarProps {\n  onTabClick: (tabId: string) => void;\n  selectedTabId: string;\n  tabs: TabItem[];\n  currentScreenWidth: number;\n}\n\nconst AnimatedTabBar = ({\n  onTabClick,\n  selectedTabId,\n  tabs,\n  currentScreenWidth,\n}: AnimatedTabBarProps) => {\n  const selectedTabItemIndex = tabs.findIndex((tab: TabItem) => tab.id === selectedTabId);\n  const { ref } = tabs[selectedTabItemIndex] || {};\n  const { clientWidth = 0 } = ref?.current || {};\n  const indicatorWidth = clientWidth;\n\n  const indicatorTranslateX =\n    selectedTabItemIndex * clientWidth + (clientWidth - indicatorWidth) / 2;\n\n  return (\n    <TabBarContainer $background=\"WHITE\">\n      <FlexView $flexDirection=\"row\" $width={'100%'}>\n        {tabs.map((tab: TabItem) => {\n          const { id, title, Icon } = tab;\n          const selected = id === selectedTabId;\n\n          return (\n            <TabBarColumn\n              $justifyContent=\"center\"\n              key={id}\n              onClick={() => onTabClick(id)}\n              ref={tab.ref}\n            >\n              <FlexView $flexDirection=\"row\" $justifyContent=\"center\" $alignItems=\"center\">\n                <Icon selected={selected} />\n                <TabTitleContainer\n                  $gutter={4}\n                  $hideTabText={currentScreenWidth <= MIN_SCREEN_WIDTH_FOR_TAB_TEXT}\n                >\n                  <Text $renderAs=\"eyebrow2\" $color={selected ? 'BLACK' : 'BLACK_75'}>\n                    {title}\n                  </Text>\n                </TabTitleContainer>\n              </FlexView>\n            </TabBarColumn>\n          );\n        })}\n      </FlexView>\n      <Indicator $left={indicatorTranslateX} $width={indicatorWidth} />\n    </TabBarContainer>\n  );\n};\n\nexport default memo(AnimatedTabBar);\n"],"names":["MIN_SCREEN_WIDTH_FOR_TAB_TEXT","TabBarContainer","styled","FlexView","TabBarColumn","Indicator","$width","$left","TabTitleContainer","$hideTabText","css","AnimatedTabBar","onTabClick","selectedTabId","tabs","currentScreenWidth","selectedTabItemIndex","tab","ref","clientWidth","indicatorWidth","indicatorTranslateX","jsxs","jsx","id","title","Icon","selected","Text","AnimatedTabBar$1","memo"],"mappings":";;;;;AAMA,MAAMA,IAAgC,KAchCC,IAAkBC,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAKjCC,IAAeF,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU9BE,IAAYH,EAAO;AAAA,WACd,CAAC,EAAE,QAAAI,EAAO,MAAMA,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMP,CAAC,EAAE,OAAAC,EAAM,MAAMA,CAAK;AAAA,GAGxCC,IAAoBN,EAAOC,CAAQ;AAAA,IACrC,CAAC,EAAE,cAAAM,QACHA,KACAC;AAAA;AAAA,KAEC;AAAA,GAUCC,IAAiB,CAAC;AAAA,EACtB,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,MAAAC;AAAA,EACA,oBAAAC;AACF,MAA2B;AACzB,QAAMC,IAAuBF,EAAK,UAAU,CAACG,MAAiBA,EAAI,OAAOJ,CAAa,GAChF,EAAE,KAAAK,EAAI,IAAIJ,EAAKE,CAAoB,KAAK,CAAA,GACxC,EAAE,aAAAG,IAAc,EAAA,KAAMD,KAAA,gBAAAA,EAAK,YAAW,CAAA,GACtCE,IAAiBD,GAEjBE,IACJL,IAAuBG,KAAeA,IAAcC,KAAkB;AAGtE,SAAA,gBAAAE,EAACrB,GAAgB,EAAA,aAAY,SAC3B,UAAA;AAAA,IAAC,gBAAAsB,EAAApB,GAAA,EAAS,gBAAe,OAAM,QAAQ,QACpC,UAAKW,EAAA,IAAI,CAACG,MAAiB;AAC1B,YAAM,EAAE,IAAAO,GAAI,OAAAC,GAAO,MAAAC,EAAA,IAAST,GACtBU,IAAWH,MAAOX;AAGtB,aAAA,gBAAAU;AAAA,QAACnB;AAAA,QAAA;AAAA,UACC,iBAAgB;AAAA,UAEhB,SAAS,MAAMQ,EAAWY,CAAE;AAAA,UAC5B,KAAKP,EAAI;AAAA,UAET,4BAACd,GAAS,EAAA,gBAAe,OAAM,iBAAgB,UAAS,aAAY,UAClE,UAAA;AAAA,YAAA,gBAAAoB,EAACG,KAAK,UAAAC,GAAoB;AAAA,YAC1B,gBAAAJ;AAAA,cAACf;AAAA,cAAA;AAAA,gBACC,SAAS;AAAA,gBACT,cAAcO,KAAsBf;AAAA,gBAEpC,UAAA,gBAAAuB,EAACK,KAAK,WAAU,YAAW,QAAQD,IAAW,UAAU,YACrD,UACHF,EAAA,CAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA,GACF;AAAA,QAAA;AAAA,QAdKD;AAAA,MAAA;AAAA,IAiBV,CAAA,GACH;AAAA,IACC,gBAAAD,EAAAlB,GAAA,EAAU,OAAOgB,GAAqB,QAAQD,GAAgB;AAAA,EACjE,EAAA,CAAA;AAEJ,GAEeS,IAAAC,EAAKnB,CAAc;"}

package/dist/features/wins-dashboard/student-badges/hooks/use-student-badge-list-hook.js

@@ -0,0 +1,135 @@
+import { useRef as a, useMemo as R, useState as y, useEffect as j, useCallback as O } from "react";
+import { css as l } from "styled-components";
+import { STUDENT_BADGE_TYPE as e, BADGE_TYPE_TAB_ICON as W } from "../../constants.js";
+const b = 64, w = 48, A = b + w, m = {
+  TABLET: 768,
+  LAPTOP: 1024,
+  LAPTOPL: 1440
+}, $ = (n) => {
+  if (n > m.LAPTOPL)
+    return {
+      badgeWidth: 140,
+      badgeCategoryGap: 40,
+      badgeCategoryWidth: 1040,
+      maxBadgeNameLines: 1,
+      containerStyle: l`
+        grid-template-columns: repeat(auto-fit, 140px);
+        grid-column-gap: 40px;
+        margin-top: 32px;
+      `
+    };
+  if (n > m.LAPTOP) {
+    const u = (n - 440) / 6;
+    return {
+      badgeWidth: u,
+      badgeCategoryGap: 40,
+      badgeCategoryWidth: n - 2 * 120,
+      maxBadgeNameLines: 1,
+      containerStyle: l`
+        grid-template-columns: repeat(auto-fit, ${u}px);
+        grid-column-gap: 40px;
+        margin-top: 32px;
+      `
+    };
+  }
+  if (n > m.TABLET)
+    return {
+      badgeWidth: 104,
+      badgeCategoryGap: 24,
+      badgeCategoryWidth: 784,
+      maxBadgeNameLines: 2,
+      containerStyle: l`
+        grid-column-gap: 32px;
+        grid-template-columns: repeat(auto-fit, 104px);
+        margin-top: 24px;
+      `
+    };
+  const g = 40, p = (n - (2 * g + 5 * 26)) / 6;
+  return {
+    badgeWidth: p,
+    badgeCategoryGap: 24,
+    badgeCategoryWidth: n - 2 * g,
+    maxBadgeNameLines: 2,
+    containerStyle: l`
+      grid-column-gap: 26px;
+      grid-template-columns: repeat(auto-fit, ${p}px);
+      margin-top: 24px;
+    `
+  };
+};
+function q({
+  currentScreenWidth: n,
+  handleScrollTo: g,
+  scrollPosition: d,
+  userBadges: p
+}) {
+  const B = a(null), C = a(null), u = a(null), x = a(null), L = a(null), G = a(null), M = a(null), N = a(null), P = a(null), S = a(null), _ = a(null), H = a(null), I = R(
+    () => ({
+      [e.COMMON]: B,
+      [e.RARE]: C,
+      [e.EPIC]: u,
+      [e.LEGENDARY]: x,
+      [e.MYTHIC]: L,
+      [e.MYSTERY]: G
+    }),
+    []
+  ), c = R(
+    () => ({
+      [e.COMMON]: M,
+      [e.RARE]: N,
+      [e.EPIC]: P,
+      [e.LEGENDARY]: S,
+      [e.MYTHIC]: _,
+      [e.MYSTERY]: H
+    }),
+    []
+  ), [f, E] = y(!1), [T, Y] = y(
+    e.COMMON
+  );
+  j(() => {
+    const t = Object.keys(c).reverse().find((o) => {
+      var i;
+      const s = c[o], r = (i = s == null ? void 0 : s.current) == null ? void 0 : i.offsetTop;
+      return typeof r != "number" ? !1 : d >= r - (o === e.COMMON ? b : A);
+    });
+    t && t !== T && Y(t), t && !f && E(!0), !t && f && E(!1);
+  }, [c, T, d, f]);
+  const h = O(
+    (t) => {
+      var r;
+      const o = c[t], s = (r = o == null ? void 0 : o.current) == null ? void 0 : r.offsetTop;
+      if (typeof s == "number") {
+        const i = s - (t === e.COMMON ? b : A);
+        g(i);
+      }
+    },
+    [c, g]
+  ), D = O(() => {
+    g(0);
+  }, [g]), k = () => {
+    const t = [];
+    return Object.keys(p).forEach((o) => {
+      const s = W[o], r = I[o];
+      s && r && t.push({
+        id: o,
+        title: o,
+        Icon: s,
+        ref: r
+      });
+    }), t;
+  };
+  return {
+    badgeCategoryRefs: c,
+    categoryConfig: $(n),
+    currentSelectedBadgeType: T,
+    onTabClick: h,
+    scrollToTop: D,
+    showTabBar: f,
+    tabs: k(),
+    totalBadgeCategories: Object.keys(p).length
+  };
+}
+export {
+  q as default
+};
+//# sourceMappingURL=use-student-badge-list-hook.js.map

package/dist/features/wins-dashboard/student-badges/hooks/use-student-badge-list-hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-student-badge-list-hook.js","sources":["../../../../../src/features/wins-dashboard/student-badges/hooks/use-student-badge-list-hook.ts"],"sourcesContent":["import type { FC } from 'react';\nimport type React from 'react';\nimport type { RuleSet } from 'styled-components';\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { css } from 'styled-components';\n\nimport { BADGE_TYPE_TAB_ICON, STUDENT_BADGE_TYPE } from '../../constants';\n\nconst HEADER_HEIGHT = 64;\nconst TAB_BAR_HEIGHT = 48;\nconst TOTAL_TAB_BAR_HEIGHT = HEADER_HEIGHT + TAB_BAR_HEIGHT;\n\n// Screen sizes constants\nconst SCREEN_SIZES = {\n  TABLET: 768,\n  LAPTOP: 1024,\n  LAPTOPL: 1440,\n};\n\ninterface CategoryConfig {\n  badgeWidth: number;\n  badgeCategoryGap: number;\n  badgeCategoryWidth: number;\n  maxBadgeNameLines: number;\n  containerStyle: RuleSet<object>;\n}\n\nconst getBadgeContainerConfig = (containerWidth: number): CategoryConfig => {\n  if (containerWidth > SCREEN_SIZES.LAPTOPL) {\n    return {\n      badgeWidth: 140,\n      badgeCategoryGap: 40,\n      badgeCategoryWidth: 1040,\n      maxBadgeNameLines: 1,\n      containerStyle: css`\n        grid-template-columns: repeat(auto-fit, 140px);\n        grid-column-gap: 40px;\n        margin-top: 32px;\n      `,\n    };\n  }\n\n  if (containerWidth > SCREEN_SIZES.LAPTOP) {\n    const gutter = 120;\n    const badgeGap = 40;\n    const badgeWidth = (containerWidth - (2 * gutter + 5 * badgeGap)) / 6;\n\n    return {\n      badgeWidth,\n      badgeCategoryGap: 40,\n      badgeCategoryWidth: containerWidth - 2 * gutter,\n      maxBadgeNameLines: 1,\n      containerStyle: css`\n        grid-template-columns: repeat(auto-fit, ${badgeWidth}px);\n        grid-column-gap: 40px;\n        margin-top: 32px;\n      `,\n    };\n  }\n\n  if (containerWidth > SCREEN_SIZES.TABLET) {\n    return {\n      badgeWidth: 104,\n      badgeCategoryGap: 24,\n      badgeCategoryWidth: 784,\n      maxBadgeNameLines: 2,\n      containerStyle: css`\n        grid-column-gap: 32px;\n        grid-template-columns: repeat(auto-fit, 104px);\n        margin-top: 24px;\n      `,\n    };\n  }\n\n  const gutter = 40;\n  const badgeGap = 26;\n  const badgeWidth = (containerWidth - (2 * gutter + 5 * badgeGap)) / 6;\n\n  return {\n    badgeWidth,\n    badgeCategoryGap: 24,\n    badgeCategoryWidth: containerWidth - 2 * gutter,\n    maxBadgeNameLines: 2,\n    containerStyle: css`\n      grid-column-gap: 26px;\n      grid-template-columns: repeat(auto-fit, ${badgeWidth}px);\n      margin-top: 24px;\n    `,\n  };\n};\n\nexport default function useStudentBadgeListHook({\n  currentScreenWidth,\n  handleScrollTo,\n  scrollPosition,\n  userBadges,\n}: {\n  currentScreenWidth: number;\n  handleScrollTo: (position: number) => void;\n  scrollPosition: number;\n  userBadges: Record<string, unknown[]>;\n}) {\n  // Create refs for all possible badge categories\n  const commonTabRef = useRef<HTMLDivElement | null>(null);\n  const rareTabRef = useRef<HTMLDivElement | null>(null);\n  const epicTabRef = useRef<HTMLDivElement | null>(null);\n  const legendaryTabRef = useRef<HTMLDivElement | null>(null);\n  const mythicTabRef = useRef<HTMLDivElement | null>(null);\n  const mysteryTabRef = useRef<HTMLDivElement | null>(null);\n\n  const commonBadgeRef = useRef<HTMLDivElement | null>(null);\n  const rareBadgeRef = useRef<HTMLDivElement | null>(null);\n  const epicBadgeRef = useRef<HTMLDivElement | null>(null);\n  const legendaryBadgeRef = useRef<HTMLDivElement | null>(null);\n  const mythicBadgeRef = useRef<HTMLDivElement | null>(null);\n  const mysteryBadgeRef = useRef<HTMLDivElement | null>(null);\n\n  const tabBarRefs: Record<string, React.RefObject<HTMLDivElement | null>> = useMemo(\n    () => ({\n      [STUDENT_BADGE_TYPE.COMMON]: commonTabRef,\n      [STUDENT_BADGE_TYPE.RARE]: rareTabRef,\n      [STUDENT_BADGE_TYPE.EPIC]: epicTabRef,\n      [STUDENT_BADGE_TYPE.LEGENDARY]: legendaryTabRef,\n      [STUDENT_BADGE_TYPE.MYTHIC]: mythicTabRef,\n      [STUDENT_BADGE_TYPE.MYSTERY]: mysteryTabRef,\n    }),\n    [],\n  );\n\n  const badgeCategoryRefs: Record<string, React.RefObject<HTMLDivElement | null>> = useMemo(\n    () => ({\n      [STUDENT_BADGE_TYPE.COMMON]: commonBadgeRef,\n      [STUDENT_BADGE_TYPE.RARE]: rareBadgeRef,\n      [STUDENT_BADGE_TYPE.EPIC]: epicBadgeRef,\n      [STUDENT_BADGE_TYPE.LEGENDARY]: legendaryBadgeRef,\n      [STUDENT_BADGE_TYPE.MYTHIC]: mythicBadgeRef,\n      [STUDENT_BADGE_TYPE.MYSTERY]: mysteryBadgeRef,\n    }),\n    [],\n  );\n\n  const [showTabBar, setShowTabBar] = useState(false);\n  const [currentSelectedBadgeType, setCurrentSelectedBadgeType] = useState(\n    STUDENT_BADGE_TYPE.COMMON,\n  );\n\n  useEffect(() => {\n    const categoryReached = Object.keys(badgeCategoryRefs)\n      .reverse()\n      .find(category => {\n        const categoryRef = badgeCategoryRefs[category];\n        const categoryTopOffset = categoryRef?.current?.offsetTop;\n\n        if (typeof categoryTopOffset !== 'number') return false;\n\n        return (\n          scrollPosition >=\n          categoryTopOffset -\n            (category === STUDENT_BADGE_TYPE.COMMON ? HEADER_HEIGHT : TOTAL_TAB_BAR_HEIGHT)\n        );\n      });\n\n    if (categoryReached && categoryReached !== currentSelectedBadgeType) {\n      setCurrentSelectedBadgeType(categoryReached);\n    }\n\n    if (categoryReached && !showTabBar) {\n      setShowTabBar(true);\n    }\n\n    if (!categoryReached && showTabBar) {\n      setShowTabBar(false);\n    }\n  }, [badgeCategoryRefs, currentSelectedBadgeType, scrollPosition, showTabBar]);\n\n  const onTabClick = useCallback(\n    (category: string) => {\n      const categoryRef = badgeCategoryRefs[category];\n      const categoryTopOffset = categoryRef?.current?.offsetTop;\n\n      if (typeof categoryTopOffset === 'number') {\n        const scrollTopPosition =\n          categoryTopOffset -\n          (category === STUDENT_BADGE_TYPE.COMMON ? HEADER_HEIGHT : TOTAL_TAB_BAR_HEIGHT);\n\n        handleScrollTo(scrollTopPosition);\n      }\n    },\n    [badgeCategoryRefs, handleScrollTo],\n  );\n\n  const scrollToTop = useCallback(() => {\n    const scrollTopPosition = 0;\n\n    handleScrollTo(scrollTopPosition);\n  }, [handleScrollTo]);\n\n  const getTabBarData = (): Array<{\n    id: string;\n    title: string;\n    Icon: FC<{ color?: string; selected?: boolean }>;\n    ref: React.RefObject<HTMLDivElement | null>;\n  }> => {\n    const tabBarData: Array<{\n      id: string;\n      title: string;\n      Icon: FC<{ color?: string; selected?: boolean }>;\n      ref: React.RefObject<HTMLDivElement | null>;\n    }> = [];\n\n    Object.keys(userBadges).forEach(category => {\n      const Icon = BADGE_TYPE_TAB_ICON[category];\n      const ref = tabBarRefs[category];\n\n      if (Icon && ref) {\n        tabBarData.push({\n          id: category,\n          title: category,\n          Icon,\n          ref,\n        });\n      }\n    });\n\n    return tabBarData;\n  };\n\n  return {\n    badgeCategoryRefs,\n    categoryConfig: getBadgeContainerConfig(currentScreenWidth),\n    currentSelectedBadgeType,\n    onTabClick,\n    scrollToTop,\n    showTabBar,\n    tabs: getTabBarData(),\n    totalBadgeCategories: Object.keys(userBadges).length,\n  };\n}\n"],"names":["HEADER_HEIGHT","TAB_BAR_HEIGHT","TOTAL_TAB_BAR_HEIGHT","SCREEN_SIZES","getBadgeContainerConfig","containerWidth","css","badgeWidth","gutter","useStudentBadgeListHook","currentScreenWidth","handleScrollTo","scrollPosition","userBadges","commonTabRef","useRef","rareTabRef","epicTabRef","legendaryTabRef","mythicTabRef","mysteryTabRef","commonBadgeRef","rareBadgeRef","epicBadgeRef","legendaryBadgeRef","mythicBadgeRef","mysteryBadgeRef","tabBarRefs","useMemo","STUDENT_BADGE_TYPE","badgeCategoryRefs","showTabBar","setShowTabBar","useState","currentSelectedBadgeType","setCurrentSelectedBadgeType","useEffect","categoryReached","category","categoryRef","categoryTopOffset","_a","onTabClick","useCallback","scrollTopPosition","scrollToTop","getTabBarData","tabBarData","Icon","BADGE_TYPE_TAB_ICON","ref"],"mappings":"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"}

package/dist/features/wins-dashboard/student-badges/student-badge.js

@@ -0,0 +1,168 @@
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { memo as W, useState as O, useCallback as m } from "react";
+import r, { css as j } from "styled-components";
+import { useUIContext as H } from "../../ui/context/context.js";
+import i from "../../ui/layout/flex-view.js";
+import z from "../../ui/lottie-animation/lottie-animation.js";
+import F from "../../ui/separator/separator.js";
+import v from "../../ui/text/text.js";
+import { getTheme as K } from "../../ui/theme/get-theme.js";
+import { STUDENT_BADGE_STATUS as V, STUDENT_BADGE_TYPE as h, BADGE_TYPE_BADGE_ICON as k } from "../constants.js";
+const { colors: b } = K(), S = 20, X = r(i)`
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: ${b.ORANGE_3};
+  border-radius: 0px 8px;
+  padding: 2px 8px;
+  z-index: 1;
+`, Z = r(i)`
+  cursor: ${(e) => e.$isEarned ? "pointer" : "default"};
+`, q = r(i)`
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+`, J = r(i)`
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  background: ${({ $backgroundColor: e }) => e};
+  opacity: ${({ $badgeEarned: e }) => e ? 1 : 0.5};
+
+  ${({ $notEarnedMysterBadge: e }) => e && j`
+      mix-blend-mode: luminosity;
+    `}
+`, Q = r.img`
+  opacity: ${(e) => e.$mouseEntered ? 0 : 1};
+`, ee = r(i)`
+  position: absolute;
+  bottom: 0;
+`, te = r(i)`
+  position: relative;
+  overflow: hidden;
+`, oe = r(i)`
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  transition: width 300ms ease-in-out;
+`, A = r(v)`
+  display: -webkit-box;
+  -webkit-line-clamp: ${({ $numberOfLines: e }) => e};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`, ne = (e) => {
+  const {
+    is_recent: C,
+    badgeWidth: n,
+    animation_url: d,
+    maxBadgeNameLines: p = 1,
+    category: a,
+    current_count: E,
+    description: D,
+    image_url: $,
+    id: c,
+    invalidateRewardsHome: f,
+    name: N,
+    openModal: g,
+    state: I,
+    total_count: _
+  } = e, [B, w] = O(!1), { onEvent: l } = H(), t = I !== V.UNASSIGNED, x = E && _ ? E / _ * 100 : 0, M = a !== h.MYSTERY && !t && x > 0, y = t ? $ || k[a] : k[a], T = a === h.MYSTERY && !t, R = a === h.MYSTERY ? b.GREY_1 : b.WHITE, { badgeName: Y, badgeDescription: G } = T ? { badgeName: "????", badgeDescription: "----------------" } : { badgeName: N || "", badgeDescription: D || "" }, L = m(() => {
+    t && w(!0);
+  }, [t]), U = m(() => {
+    t && w(!1);
+  }, [t]), P = m(() => {
+    !t || !g || t && d && fetch(d).then((s) => s.json()).then((s) => {
+      g("student-badges", {
+        badges: [
+          {
+            ...e,
+            animationData: s || null
+          }
+        ],
+        invalidateRewardsHome: f
+      }), l("student_badge_clicked", {
+        studentBadgeId: c,
+        category: a,
+        badgeEarned: t
+      });
+    }).catch((s) => {
+      l("student_badge_animation_load_failed", {
+        studentBadgeId: c,
+        animationUrl: d,
+        error: s.message
+      });
+    });
+  }, [
+    t,
+    g,
+    d,
+    e,
+    c,
+    a,
+    l,
+    f
+  ]);
+  return /* @__PURE__ */ u(
+    Z,
+    {
+      onClick: P,
+      $width: n,
+      $isEarned: t,
+      children: [
+        /* @__PURE__ */ u(q, { children: [
+          /* @__PURE__ */ u(
+            J,
+            {
+              $backgroundColor: R,
+              $badgeEarned: t,
+              $notEarnedMysterBadge: T,
+              onMouseEnter: L,
+              onMouseLeave: U,
+              children: [
+                C && /* @__PURE__ */ o(X, { children: /* @__PURE__ */ o(v, { $renderAs: "cta2", children: "NEW" }) }),
+                t ? /* @__PURE__ */ o(
+                  Q,
+                  {
+                    $mouseEntered: B,
+                    src: $,
+                    alt: "badge-placeholder",
+                    width: n,
+                    height: n
+                  }
+                ) : /* @__PURE__ */ o("img", { src: y, alt: "badge-placeholder", width: n, height: n }),
+                d && t && /* @__PURE__ */ o(
+                  i,
+                  {
+                    $width: n + S,
+                    $height: n + S,
+                    $position: "absolute",
+                    children: /* @__PURE__ */ o(
+                      z,
+                      {
+                        src: d,
+                        width: n,
+                        height: n,
+                        settings: { autoplay: B, loop: !0 },
+                        animateOnIntersect: !1
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          M && /* @__PURE__ */ o(ee, { $width: n, children: /* @__PURE__ */ o(te, { $height: 4, $borderRadius: 2, $width: "100%", $background: "WHITE", children: /* @__PURE__ */ o(oe, { $width: `${x}%`, $borderRadius: 2, $background: "BLACK" }) }) })
+        ] }),
+        /* @__PURE__ */ o(F, { height: 8 }),
+        /* @__PURE__ */ o(A, { $renderAs: "cta2", $numberOfLines: p, children: Y }),
+        /* @__PURE__ */ o(A, { $renderAs: "body3", $numberOfLines: p + 1, children: G })
+      ]
+    },
+    c
+  );
+}, he = W(ne);
+export {
+  he as default
+};
+//# sourceMappingURL=student-badge.js.map

package/dist/features/wins-dashboard/student-badges/student-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"student-badge.js","sources":["../../../../src/features/wins-dashboard/student-badges/student-badge.tsx"],"sourcesContent":["import React, { memo, useCallback, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useUIContext } from '../../ui/context/context';\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { getTheme } from '../../ui/theme/get-theme';\nimport { BADGE_TYPE_BADGE_ICON, STUDENT_BADGE_STATUS, STUDENT_BADGE_TYPE } from '../constants';\n\nconst { colors } = getTheme();\n\nconst EXTRA_BADGE_SIZE = 20;\n\nconst NewTag = styled(FlexView)`\n  position: absolute;\n  top: 0;\n  right: 0;\n  background: ${colors.ORANGE_3};\n  border-radius: 0px 8px;\n  padding: 2px 8px;\n  z-index: 1;\n`;\n\ninterface StudentBadgeModalData {\n  badges: Array<{\n    animation_url?: string;\n    animationData?: object;\n    category: string;\n    current_count?: number;\n    description?: string;\n    id: string;\n    image_url?: string;\n    name?: string;\n    state?: string;\n    total_count?: number;\n  }>;\n  invalidateRewardsHome?: () => void;\n}\n\nexport interface StudentBadgeProps {\n  animation_url?: string;\n  category: string;\n  current_count?: number;\n  description?: string;\n  id: string;\n  image_url?: string;\n  invalidateRewardsHome?: () => void;\n  is_recent?: boolean;\n  name?: string;\n  openModal?: (modalType: string, data: StudentBadgeModalData) => void;\n  state?: string;\n  total_count?: number;\n  badgeWidth: number;\n  maxBadgeNameLines: number;\n}\n\nconst Wrapper = styled(FlexView)<{ $isEarned: boolean }>`\n  cursor: ${props => (props.$isEarned ? 'pointer' : 'default')};\n`;\nconst StudentBadgeWrapper = styled(FlexView)`\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n`;\n\nconst BadgeImageContainer = styled(FlexView)<{\n  $backgroundColor: string;\n  $badgeEarned: boolean;\n  $notEarnedMysterBadge: boolean;\n}>`\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  background: ${({ $backgroundColor }) => $backgroundColor};\n  opacity: ${({ $badgeEarned }) => ($badgeEarned ? 1 : 0.5)};\n\n  ${({ $notEarnedMysterBadge }) =>\n    $notEarnedMysterBadge &&\n    css`\n      mix-blend-mode: luminosity;\n    `}\n`;\n\nconst BadgeImage = styled.img<{ $mouseEntered?: boolean }>`\n  opacity: ${props => (props.$mouseEntered ? 0 : 1)};\n`;\n\nconst ProgressContainer = styled(FlexView)`\n  position: absolute;\n  bottom: 0;\n`;\n\nconst Background = styled(FlexView)`\n  position: relative;\n  overflow: hidden;\n`;\n\nconst Progress = styled(FlexView)`\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  transition: width 300ms ease-in-out;\n`;\n\nconst BadgeText = styled(Text)<{ $numberOfLines: number }>`\n  display: -webkit-box;\n  -webkit-line-clamp: ${({ $numberOfLines }) => $numberOfLines};\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n`;\n\nconst StudentBadge: React.FC<StudentBadgeProps> = props => {\n  const {\n    is_recent: isRecent,\n    badgeWidth,\n    animation_url: animationUrl,\n    maxBadgeNameLines = 1,\n    category,\n    current_count: currentCount,\n    description,\n    image_url: imageUrl,\n    id: studentBadgeId,\n    invalidateRewardsHome,\n    name,\n    openModal,\n    state,\n    total_count: totalCount,\n  } = props;\n  const [mouseEntered, setMouseEntered] = useState(false);\n\n  const { onEvent: trackEvent } = useUIContext();\n\n  const badgeEarned = state !== STUDENT_BADGE_STATUS.UNASSIGNED;\n  const badgeProgress = currentCount && totalCount ? (currentCount / totalCount) * 100 : 0;\n  const showProgress = category !== STUDENT_BADGE_TYPE.MYSTERY && !badgeEarned && badgeProgress > 0;\n  const badgeImage = badgeEarned\n    ? imageUrl || BADGE_TYPE_BADGE_ICON[category as keyof typeof BADGE_TYPE_BADGE_ICON]\n    : BADGE_TYPE_BADGE_ICON[category as keyof typeof BADGE_TYPE_BADGE_ICON];\n  const notEarnedMysterBadge = category === STUDENT_BADGE_TYPE.MYSTERY && !badgeEarned;\n  const badgeBackgroundColor =\n    category === STUDENT_BADGE_TYPE.MYSTERY ? colors.GREY_1 : colors.WHITE;\n  const { badgeName, badgeDescription } = notEarnedMysterBadge\n    ? { badgeName: '????', badgeDescription: '----------------' }\n    : { badgeName: name || '', badgeDescription: description || '' };\n\n  const onBadgeMouseEnter = useCallback(() => {\n    if (!badgeEarned) {\n      return;\n    }\n    setMouseEntered(true);\n  }, [badgeEarned]);\n\n  const onBadgeMouseLeave = useCallback(() => {\n    if (!badgeEarned) {\n      return;\n    }\n    setMouseEntered(false);\n  }, [badgeEarned]);\n\n  const onBadgeClick = useCallback(() => {\n    if (!badgeEarned || !openModal) {\n      return;\n    }\n\n    if (badgeEarned && animationUrl) {\n      fetch(animationUrl)\n        .then(response => response.json())\n        .then(data => {\n          openModal('student-badges', {\n            badges: [\n              {\n                ...props,\n                animationData: data || null,\n              },\n            ],\n            invalidateRewardsHome,\n          });\n\n          trackEvent('student_badge_clicked', {\n            studentBadgeId,\n            category,\n            badgeEarned,\n          });\n        })\n        .catch(error => {\n          trackEvent('student_badge_animation_load_failed', {\n            studentBadgeId,\n            animationUrl,\n            error: error.message,\n          });\n        });\n    }\n  }, [\n    badgeEarned,\n    openModal,\n    animationUrl,\n    props,\n    studentBadgeId,\n    category,\n    trackEvent,\n    invalidateRewardsHome,\n  ]);\n\n  return (\n    <Wrapper\n      onClick={onBadgeClick}\n      $width={badgeWidth}\n      $isEarned={badgeEarned}\n      key={studentBadgeId}\n    >\n      <StudentBadgeWrapper>\n        <BadgeImageContainer\n          $backgroundColor={badgeBackgroundColor}\n          $badgeEarned={badgeEarned}\n          $notEarnedMysterBadge={notEarnedMysterBadge}\n          onMouseEnter={onBadgeMouseEnter}\n          onMouseLeave={onBadgeMouseLeave}\n        >\n          {isRecent && (\n            <NewTag>\n              <Text $renderAs=\"cta2\">NEW</Text>\n            </NewTag>\n          )}\n          {badgeEarned ? (\n            <BadgeImage\n              $mouseEntered={mouseEntered}\n              src={imageUrl}\n              alt=\"badge-placeholder\"\n              width={badgeWidth}\n              height={badgeWidth}\n            />\n          ) : (\n            <img src={badgeImage} alt=\"badge-placeholder\" width={badgeWidth} height={badgeWidth} />\n          )}\n          {animationUrl && badgeEarned && (\n            <FlexView\n              $width={badgeWidth + EXTRA_BADGE_SIZE}\n              $height={badgeWidth + EXTRA_BADGE_SIZE}\n              $position=\"absolute\"\n            >\n              <LottieAnimation\n                src={animationUrl}\n                width={badgeWidth}\n                height={badgeWidth}\n                settings={{ autoplay: mouseEntered, loop: true }}\n                animateOnIntersect={false}\n              />\n            </FlexView>\n          )}\n        </BadgeImageContainer>\n        {showProgress && (\n          <ProgressContainer $width={badgeWidth}>\n            <Background $height={4} $borderRadius={2} $width={'100%'} $background=\"WHITE\">\n              <Progress $width={`${badgeProgress}%`} $borderRadius={2} $background=\"BLACK\" />\n            </Background>\n          </ProgressContainer>\n        )}\n      </StudentBadgeWrapper>\n      <Separator height={8} />\n      <BadgeText $renderAs=\"cta2\" $numberOfLines={maxBadgeNameLines}>\n        {badgeName}\n      </BadgeText>\n      <BadgeText $renderAs=\"body3\" $numberOfLines={maxBadgeNameLines + 1}>\n        {badgeDescription}\n      </BadgeText>\n    </Wrapper>\n  );\n};\n\nexport default memo(StudentBadge);\n"],"names":["colors","getTheme","EXTRA_BADGE_SIZE","NewTag","styled","FlexView","Wrapper","props","StudentBadgeWrapper","BadgeImageContainer","$backgroundColor","$badgeEarned","$notEarnedMysterBadge","css","BadgeImage","ProgressContainer","Background","Progress","BadgeText","Text","$numberOfLines","StudentBadge","isRecent","badgeWidth","animationUrl","maxBadgeNameLines","category","currentCount","description","imageUrl","studentBadgeId","invalidateRewardsHome","name","openModal","state","totalCount","mouseEntered","setMouseEntered","useState","trackEvent","useUIContext","badgeEarned","STUDENT_BADGE_STATUS","badgeProgress","showProgress","STUDENT_BADGE_TYPE","badgeImage","BADGE_TYPE_BADGE_ICON","notEarnedMysterBadge","badgeBackgroundColor","badgeName","badgeDescription","onBadgeMouseEnter","useCallback","onBadgeMouseLeave","onBadgeClick","response","data","error","jsxs","jsx","LottieAnimation","Separator","StudentBadge$1","memo"],"mappings":"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"}

package/dist/features/wins-dashboard/student-badges/student-badges-lists.js

@@ -0,0 +1,137 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { memo as G } from "react";
+import i, { css as F } from "styled-components";
+import S from "../../../assets/line-icons/icons/up.js";
+import o from "../../ui/layout/flex-view.js";
+import m from "../../ui/text/text.js";
+import { BADGE_TYPE_BACKGROUND as _, BADGE_TYPE_TAB_ICON as j } from "../constants.js";
+import L from "./animated-tabbar.js";
+import O from "./hooks/use-student-badge-list-hook.js";
+import R from "./student-badge.js";
+const g = 64, { innerHeight: N } = window, Y = i(o)`
+  width: 100%;
+  background-color: ${({ $backgroundColor: t }) => t};
+  padding: ${({ $badgeCategoryGap: t }) => t}px 0;
+  align-items: center;
+  ${({ $isLastCategory: t }) => t && F`
+      min-height: ${N - g}px;
+    `}
+`, v = i(o)`
+  position: fixed;
+  top: ${({ $topOffset: t }) => t}px;
+  width: ${({ $width: t }) => t}px;
+  z-index: 1;
+  transition: transform 200ms linear;
+  transform: translateY(${({ $visible: t }) => t ? g : 0}px);
+`, U = i(o)`
+  position: fixed;
+  top: ${window.innerHeight - 100}px;
+  right: 40px;
+  width: 48px;
+  height: 48px;
+  border: 1px solid black;
+  background: ${({ theme: t }) => t.colors.WHITE};
+  border-radius: 24px;
+  cursor: pointer;
+  opacity: ${({ $showTabBar: t }) => t ? 1 : 0};
+  transition: all 100ms linear;
+`, W = i.div`
+  display: grid;
+  grid-row-gap: 16px;
+  ${({ $containerStyle: t }) => t};
+`, z = ({
+  invalidateRewardsHome: t,
+  openModal: $,
+  topOffset: h = 0,
+  userBadges: n,
+  currentScreenWidth: a,
+  handleScrollTo: f,
+  scrollPosition: x
+}) => {
+  const {
+    badgeCategoryRefs: w,
+    categoryConfig: u,
+    currentSelectedBadgeType: y,
+    onTabClick: B,
+    scrollToTop: C,
+    showTabBar: c,
+    tabs: T,
+    totalBadgeCategories: b
+  } = O({
+    currentScreenWidth: a,
+    handleScrollTo: f,
+    scrollPosition: x,
+    userBadges: n
+  }), { badgeCategoryGap: I, badgeCategoryWidth: d, containerStyle: E, badgeWidth: k, maxBadgeNameLines: A } = u;
+  return /* @__PURE__ */ s(o, { $alignItems: "center", children: [
+    /* @__PURE__ */ e(
+      v,
+      {
+        $flexDirection: "row",
+        $background: "WHITE",
+        $visible: c,
+        $justifyContent: "center",
+        $width: a,
+        $topOffset: h,
+        children: /* @__PURE__ */ e(o, { $width: d, children: /* @__PURE__ */ e(
+          L,
+          {
+            tabs: T,
+            selectedTabId: y,
+            onTabClick: B,
+            currentScreenWidth: a
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ e(o, { $flexDirection: "row", $gap: 16, $width: d, children: /* @__PURE__ */ e(m, { $renderAs: "h5", children: "BADGES" }) }),
+    Object.keys(n).map((r, H) => {
+      const l = j[r];
+      return /* @__PURE__ */ e(
+        Y,
+        {
+          $backgroundColor: _[r] || "#FFFFFF",
+          $badgeCategoryGap: I,
+          $isLastCategory: H === b - 1,
+          ref: w[r],
+          children: /* @__PURE__ */ s(o, { $width: d, children: [
+            /* @__PURE__ */ s(o, { $flexDirection: "row", $flexGap: 8, $alignItems: "center", children: [
+              typeof l == "function" ? /* @__PURE__ */ e(l, {}) : null,
+              /* @__PURE__ */ e(m, { $renderAs: "eyebrow1", children: r })
+            ] }),
+            /* @__PURE__ */ e(W, { $containerStyle: E, children: (n[r] || []).map((p) => {
+              const { id: D } = p || {};
+              return /* @__PURE__ */ e(
+                R,
+                {
+                  ...p,
+                  category: r,
+                  openModal: $,
+                  badgeWidth: k,
+                  maxBadgeNameLines: A,
+                  invalidateRewardsHome: t
+                },
+                D
+              );
+            }) })
+          ] })
+        },
+        r
+      );
+    }),
+    /* @__PURE__ */ e(
+      U,
+      {
+        $justifyContent: "center",
+        $alignItems: "center",
+        $showTabBar: c,
+        onClick: C,
+        children: /* @__PURE__ */ e(S, {})
+      }
+    )
+  ] });
+}, et = G(z);
+export {
+  et as default
+};
+//# sourceMappingURL=student-badges-lists.js.map

package/dist/features/wins-dashboard/student-badges/student-badges-lists.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"student-badges-lists.js","sources":["../../../../src/features/wins-dashboard/student-badges/student-badges-lists.tsx"],"sourcesContent":["import type { Badge } from './mock/badges-list-mock';\nimport type { RuleSet } from 'styled-components';\n\nimport { memo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport UpIcon from '../../../assets/line-icons/icons/up';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport { BADGE_TYPE_BACKGROUND, BADGE_TYPE_TAB_ICON } from '../constants';\nimport AnimatedTabBar from './animated-tabbar';\nimport useStudentBadgeListHook from './hooks/use-student-badge-list-hook';\nimport StudentBadge from './student-badge';\n\nconst HEADER_HEIGHT = 64;\nconst { innerHeight: windowHeight } = window;\n\nconst StudentBadgesContainer = styled(FlexView)<{\n  $backgroundColor: string;\n  $badgeCategoryGap: number;\n  $isLastCategory: boolean;\n}>`\n  width: 100%;\n  background-color: ${({ $backgroundColor }) => $backgroundColor};\n  padding: ${({ $badgeCategoryGap }) => $badgeCategoryGap}px 0;\n  align-items: center;\n  ${({ $isLastCategory }) =>\n    $isLastCategory &&\n    css`\n      min-height: ${windowHeight - HEADER_HEIGHT}px;\n    `}\n`;\n\nconst TabBarContainer = styled(FlexView)<{\n  $topOffset: number;\n  $width: number;\n  $visible: boolean;\n}>`\n  position: fixed;\n  top: ${({ $topOffset }) => $topOffset}px;\n  width: ${({ $width }) => $width}px;\n  z-index: 1;\n  transition: transform 200ms linear;\n  transform: translateY(${({ $visible }) => ($visible ? HEADER_HEIGHT : 0)}px);\n`;\n\nconst ScrollTopButton = styled(FlexView)<{ $showTabBar: boolean }>`\n  position: fixed;\n  top: ${window.innerHeight - 100}px;\n  right: 40px;\n  width: 48px;\n  height: 48px;\n  border: 1px solid black;\n  background: ${({ theme }) => theme.colors.WHITE};\n  border-radius: 24px;\n  cursor: pointer;\n  opacity: ${({ $showTabBar }) => ($showTabBar ? 1 : 0)};\n  transition: all 100ms linear;\n`;\n\nconst CustomRow = styled.div<{ $containerStyle: RuleSet<object> }>`\n  display: grid;\n  grid-row-gap: 16px;\n  ${({ $containerStyle }) => $containerStyle};\n`;\n\ninterface StudentBadgeListProps {\n  invalidateRewardsHome: () => void;\n  openModal: (modal: string, props?: unknown) => void;\n  topOffset?: number;\n  userBadges: Record<string, Badge[]>;\n  currentScreenWidth: number;\n  handleScrollTo: (position: number) => void;\n  scrollPosition: number;\n}\n\nconst StudentBadgeList = ({\n  invalidateRewardsHome,\n  openModal,\n  topOffset = 0,\n  userBadges,\n  currentScreenWidth,\n  handleScrollTo,\n  scrollPosition,\n}: StudentBadgeListProps) => {\n  const {\n    badgeCategoryRefs,\n    categoryConfig,\n    currentSelectedBadgeType,\n    onTabClick,\n    scrollToTop,\n    showTabBar,\n    tabs,\n    totalBadgeCategories,\n  } = useStudentBadgeListHook({\n    currentScreenWidth,\n    handleScrollTo,\n    scrollPosition,\n    userBadges,\n  });\n\n  const { badgeCategoryGap, badgeCategoryWidth, containerStyle, badgeWidth, maxBadgeNameLines } =\n    categoryConfig;\n\n  return (\n    <FlexView $alignItems=\"center\">\n      <TabBarContainer\n        $flexDirection=\"row\"\n        $background=\"WHITE\"\n        $visible={showTabBar}\n        $justifyContent=\"center\"\n        $width={currentScreenWidth}\n        $topOffset={topOffset}\n      >\n        <FlexView $width={badgeCategoryWidth}>\n          <AnimatedTabBar\n            tabs={tabs}\n            selectedTabId={currentSelectedBadgeType}\n            onTabClick={onTabClick}\n            currentScreenWidth={currentScreenWidth}\n          />\n        </FlexView>\n      </TabBarContainer>\n      <FlexView $flexDirection=\"row\" $gap={16} $width={badgeCategoryWidth}>\n        <Text $renderAs=\"h5\">BADGES</Text>\n      </FlexView>\n      {Object.keys(userBadges).map((badge, index) => {\n        const BadgeCategoryIcon = BADGE_TYPE_TAB_ICON[badge];\n\n        return (\n          <StudentBadgesContainer\n            key={badge}\n            $backgroundColor={BADGE_TYPE_BACKGROUND[badge] || '#FFFFFF'}\n            $badgeCategoryGap={badgeCategoryGap}\n            $isLastCategory={index === totalBadgeCategories - 1}\n            ref={badgeCategoryRefs[badge]}\n          >\n            <FlexView $width={badgeCategoryWidth}>\n              <FlexView $flexDirection=\"row\" $flexGap={8} $alignItems=\"center\">\n                {typeof BadgeCategoryIcon === 'function' ? <BadgeCategoryIcon /> : null}\n                <Text $renderAs=\"eyebrow1\">{badge}</Text>\n              </FlexView>\n              <CustomRow $containerStyle={containerStyle}>\n                {(userBadges[badge] || []).map(badgeProps => {\n                  const { id: studentBadgeId } = badgeProps || {};\n\n                  return (\n                    <StudentBadge\n                      key={studentBadgeId}\n                      {...badgeProps}\n                      category={badge}\n                      openModal={openModal}\n                      badgeWidth={badgeWidth}\n                      maxBadgeNameLines={maxBadgeNameLines}\n                      invalidateRewardsHome={invalidateRewardsHome}\n                    />\n                  );\n                })}\n              </CustomRow>\n            </FlexView>\n          </StudentBadgesContainer>\n        );\n      })}\n      <ScrollTopButton\n        $justifyContent=\"center\"\n        $alignItems=\"center\"\n        $showTabBar={showTabBar}\n        onClick={scrollToTop}\n      >\n        <UpIcon />\n      </ScrollTopButton>\n    </FlexView>\n  );\n};\n\nexport default memo(StudentBadgeList);\n"],"names":["HEADER_HEIGHT","windowHeight","StudentBadgesContainer","styled","FlexView","$backgroundColor","$badgeCategoryGap","$isLastCategory","css","TabBarContainer","$topOffset","$width","$visible","ScrollTopButton","theme","$showTabBar","CustomRow","$containerStyle","StudentBadgeList","invalidateRewardsHome","openModal","topOffset","userBadges","currentScreenWidth","handleScrollTo","scrollPosition","badgeCategoryRefs","categoryConfig","currentSelectedBadgeType","onTabClick","scrollToTop","showTabBar","tabs","totalBadgeCategories","useStudentBadgeListHook","badgeCategoryGap","badgeCategoryWidth","containerStyle","badgeWidth","maxBadgeNameLines","jsxs","jsx","AnimatedTabBar","Text","badge","index","BadgeCategoryIcon","BADGE_TYPE_TAB_ICON","BADGE_TYPE_BACKGROUND","badgeProps","studentBadgeId","StudentBadge","UpIcon","studentBadgesLists","memo"],"mappings":"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"}