lux/explore
2
0
Fork 0
mirror of https://github.com/luxfi/explore.git synced 2026-09-24 00:28:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix network menu

Browse Source
This commit is contained in:
isstuev
2025-08-22 15:45:32 +02:00
parent 1fec67160f
commit 171fdebdf3
1 changed files with 110 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/snippets/networkMenu/NetworkMenuContent.tsx
+110 -76
View File
@@ -26,84 +26,118 @@ const NetworkMenuContent = ({ items, tabs }: Props) => {
setValue(value as NetworkGroup);
}, []);
const content = !items || items.length === 0 ? (
<>
<Flex alignItems="center">
<Flex h="32px" w="105px" bgColor={{ base: 'blackAlpha.50', _dark: 'whiteAlpha.50' }} borderRadius="base" px={ 4 } py={ 2 }>
<Skeleton loading h="16px" w="100%"/>
</Flex>
<Skeleton loading h="16px" w="68px" mx={ 4 }/>
<Skeleton loading h="16px" w="45px" mx={ 4 }/>
</Flex>
<Flex mt={ 3 } flexDir="column" rowGap={ 2 }>
<Flex mx={ 3 } my={ 2 } alignItems="center">
<Skeleton loading h="30px" w="30px" borderRadius="full"/>
<Skeleton loading h="16px" w="120px" ml={ 3 }/>
</Flex>
<Flex mx={ 3 } my={ 2 } alignItems="center">
<Skeleton loading h="30px" w="30px" borderRadius="full"/>
<Skeleton loading h="16px" w="180px" ml={ 3 }/>
</Flex>
<Flex mx={ 3 } my={ 2 } alignItems="center">
<Skeleton loading h="30px" w="30px" borderRadius="full"/>
<Skeleton loading h="16px" w="150px" ml={ 3 }/>
</Flex>
</Flex>
</>
) : (
<TabsRoot
variant="segmented"
width="full"
fitted
size="sm"
lazyMount
value={ value }
onValueChange={ handleTabChange }
>
{ tabs.length > 1 && (
<TabsList mb={ 2 } width="full">
{ tabs.map((tab) => (
<TabsTrigger
key={ tab }
textTransform="capitalize"
value={ tab }
const content = (() => {
if (!items || items.length === 0) {
return (
<>
<Flex alignItems="center">
<Flex h="32px" w="105px" bgColor={{ base: 'blackAlpha.50', _dark: 'whiteAlpha.50' }} borderRadius="base" px={ 4 } py={ 2 }>
<Skeleton loading h="16px" w="100%"/>
</Flex>
<Skeleton loading h="16px" w="68px" mx={ 4 }/>
<Skeleton loading h="16px" w="45px" mx={ 4 }/>
</Flex>
<Flex mt={ 3 } flexDir="column" rowGap={ 2 }>
<Flex mx={ 3 } my={ 2 } alignItems="center">
<Skeleton loading h="30px" w="30px" borderRadius="full"/>
<Skeleton loading h="16px" w="120px" ml={ 3 }/>
</Flex>
<Flex mx={ 3 } my={ 2 } alignItems="center">
<Skeleton loading h="30px" w="30px" borderRadius="full"/>
<Skeleton loading h="16px" w="180px" ml={ 3 }/>
</Flex>
<Flex mx={ 3 } my={ 2 } alignItems="center">
<Skeleton loading h="30px" w="30px" borderRadius="full"/>
<Skeleton loading h="16px" w="150px" ml={ 3 }/>
</Flex>
</Flex>
</>
);
}
if (tabs.length === 1) {
return (
<VStack as="ul" gap={ 1 } alignItems="stretch" overflowY="scroll" maxH="516px">
{ items
.filter((network) => network.group === tabs[0])
.map((network) => (
<NetworkMenuLink
key={ network.title }
{ ...network }
/>
)) }
{ config.UI.featuredNetworks.allLink && (
<Link
href={ config.UI.featuredNetworks.allLink }
external
noIcon
variant="secondary"
my={ 2 }
px={ 2 }
fontSize="xs"
>
{ tab }
</TabsTrigger>
View all chains
</Link>
) }
</VStack>
);
}
return (
<TabsRoot
variant="segmented"
width="full"
fitted
size="sm"
lazyMount
value={ value }
onValueChange={ handleTabChange }
>
{ tabs.length > 1 && (
<TabsList mb={ 2 } width="full">
{ tabs.map((tab) => (
<TabsTrigger
key={ tab }
textTransform="capitalize"
value={ tab }
>
{ tab }
</TabsTrigger>
)) }
</TabsList>
) }
<Box>
{ tabs.map((tab) => (
<TabsContent key={ tab } value={ tab } p={ 0 }>
<VStack as="ul" gap={ 1 } alignItems="stretch" overflowY="scroll" maxH="516px">
{ items
.filter((network) => network.group === tab)
.map((network) => (
<NetworkMenuLink
key={ network.title }
{ ...network }
/>
)) }
{ config.UI.featuredNetworks.allLink && (
<Link
href={ config.UI.featuredNetworks.allLink }
external
noIcon
variant="secondary"
my={ 2 }
px={ 2 }
fontSize="xs"
>
View all chains
</Link>
) }
</VStack>
</TabsContent>
)) }
</TabsList>
) }
<Box>
{ tabs.map((tab) => (
<TabsContent key={ tab } value={ tab } p={ 0 }>
<VStack as="ul" gap={ 1 } alignItems="stretch" overflowY="scroll" maxH="516px">
{ items
.filter((network) => network.group === tab)
.map((network) => (
<NetworkMenuLink
key={ network.title }
{ ...network }
/>
)) }
{ config.UI.featuredNetworks.allLink && (
<Link
href={ config.UI.featuredNetworks.allLink }
external
noIcon
variant="secondary"
my={ 2 }
px={ 2 }
fontSize="xs"
>
View all chains
</Link>
) }
</VStack>
</TabsContent>
)) }
</Box>
</TabsRoot>
);
</Box>
</TabsRoot>
);
})();
return (
<PopoverContent w="290px" maxH="unset">