tab select with demo

theme/components/Tag/Tag.ts

@@ -3,9 +3,11 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
+import { mode } from '@chakra-ui/theme-tools';
 
 import getDefaultTransitionProps from '../../utils/getDefaultTransitionProps';
 import Badge from '../Badge';
+
 const transitionProps = getDefaultTransitionProps();
 
 const { defineMultiStyleConfig, definePartsStyle } =
@@ -15,6 +17,22 @@ const variants = {
   subtle: definePartsStyle((props) => ({
     container: Badge.variants?.subtle(props),
   })),
+  select: definePartsStyle((props) => ({
+    container: {
+      bg: mode('gray.100', 'gray.800')(props),
+      color: 'text_secondary',
+      _hover: {
+        color: 'link',
+        opacity: 0.76,
+      },
+    },
+  })),
+  selectActive: definePartsStyle((props) => ({
+    container: {
+      bg: mode('blue.500', 'blue.900')(props),
+      color: 'whiteAlpha.800',
+    },
+  })),
 };
 
 const sizes = {

ui/pages/Home.tsx

@@ -8,13 +8,15 @@ import LatestZkEvmL2Batches from 'ui/home/LatestZkEvmL2Batches';
 import Stats from 'ui/home/Stats';
 import Transactions from 'ui/home/Transactions';
 import AdBanner from 'ui/shared/ad/AdBanner';
+import TagGroupSelect from 'ui/shared/tagGroupSelect/TagGroupSelect';
 import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
 import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop';
 
 const rollupFeature = config.features.rollup;
 
 const Home = () => {
+  const onSelect = React.useCallback(() => {}, []);
   return (
     <Box as="main">
       <Box
@@ -47,6 +49,7 @@ const Home = () => {
         </Flex>
         <SearchBar isHomepage/>
       </Box>
+      <TagGroupSelect items={ [ '11', '22', '33' ] } defaultValue="1" onChange={ onSelect } my={ 2 }/>
       <Stats/>
       <ChainIndicators/>
       <AdBanner mt={ 6 } mx="auto" display="flex" justifyContent="center"/>

ui/shared/tagGroupSelect/TagGroupSelect.tsx

@@ -0,0 +1,55 @@
+import { HStack, Tag, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+type Props = {
+  items: Array<string>;
+  defaultValue: string | Array<string>;
+  isMulti?: boolean;
+  onChange: (value: Array<string>) => void;
+  className?: string;
+}
+
+const TagGroupSelect = ({ items, defaultValue, isMulti, onChange, className }: Props) => {
+  const [ value, setValue ] = React.useState<Array<string>>(Array.isArray(defaultValue) ? defaultValue : [ defaultValue ]);
+
+  const onItemClick = React.useCallback((event: React.SyntheticEvent) => {
+    const itemValue = (event.currentTarget as HTMLDivElement).getAttribute('data-id') as string;
+    setValue((prevValue) => {
+      let newValue;
+      if (isMulti) {
+        if (prevValue.includes(itemValue)) {
+          newValue = prevValue.filter(i => i !== itemValue);
+        } else {
+          newValue = [ ...prevValue, itemValue ];
+        }
+      } else {
+        newValue = [ itemValue ];
+      }
+      onChange(newValue);
+      return newValue;
+    });
+
+  }, [ isMulti, onChange ]);
+
+  return (
+    <HStack className={ className }>
+      { items.map(item => {
+        const isActive = value.includes(item);
+        return (
+          <Tag
+            key={ item }
+            data-id={ item }
+            variant={ isActive ? 'selectActive' : 'select' }
+            fontWeight={ 500 }
+            cursor="pointer"
+            onClick={ onItemClick }
+          >
+            { item }
+          </Tag>
+        );
+      }) }
+    </HStack>
+  );
+};
+
+export default chakra(TagGroupSelect);