feat: display user snapshot position by category (#2459)

* feat: display user snapshot position by category * add badge
KyberNetwork · Dec 26, 2023 · c987dde · c987dde
1 parent ffac488
commit c987dde
Show file tree

Hide file tree

Showing 3 changed files with 735 additions and 8 deletions.
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
@@ -14,6 +14,8 @@ interface TabsProps {
  onChange: (activeKey: string | number) => void
  className?: string
  horizontalWrapperStyle?: CSSProperties
+ tabItemStyle?: CSSProperties
+ tabItemActiveStyle?: CSSProperties
 }
 
 const Wrapper = styled.div(({ theme }) => ({
@@ -41,7 +43,15 @@ const TabHeaderItem = styled.div<{ active: boolean }>(({ theme, active }) => ({
  cursor: 'pointer',
 }))
 
-const Tabs: FC<TabsProps> = ({ activeKey, items, className, onChange, horizontalWrapperStyle = {} }) => {
+const Tabs: FC<TabsProps> = ({
+ activeKey,
+ items,
+ className,
+ onChange,
+ horizontalWrapperStyle = {},
+ tabItemStyle = {},
+ tabItemActiveStyle = {},
+}) => {
  return (
  <Wrapper className={className}>
  <TabHeader>
@@ -51,7 +61,11 @@ const Tabs: FC<TabsProps> = ({ activeKey, items, className, onChange, horizontal
  renderItem={key => {
  const label = items.find(i => +i.key === +key)?.label || ''
  return (
- <TabHeaderItem onClick={() => onChange(key)} active={+key === +activeKey}>
+ <TabHeaderItem
+ onClick={() => onChange(key)}
+ active={+key === +activeKey}
+ style={+key !== +activeKey ? tabItemStyle : tabItemActiveStyle}
+ >
  {label}
  </TabHeaderItem>
  )