mirror of
https://github.com/luxfi/market.git
synced 2026-09-24 00:25:57 +00:00
artemis prime
92278b2f7f
gray = mix of radix (grayDark) and Zach's selected values primary = slate secondary = slateDark Voila! Since all original code used the Radix guidelines (which I references and link to in the config file), it all just works. So removed most of my mods to colors from first PR (checking intent and result of each carefully). Did not touch light theme (TODO?) NOTE: using the $ notation within the theme itself seems to break, so I grabbed the actual hex values from Radix.
108 lines
2.7 KiB
TypeScript
108 lines
2.7 KiB
TypeScript
import { useCollections } from '@reservoir0x/reservoir-kit-ui'
|
|
import { Box, Flex, Text } from '../primitives'
|
|
import { ComponentPropsWithoutRef, FC } from 'react'
|
|
import { TrendingCollectionItem } from './TrendingCollectionItem'
|
|
import LoadingSpinner from 'components/common/LoadingSpinner'
|
|
import { display } from '@datadog/browser-core'
|
|
|
|
export type TrendingCollections = ReturnType<typeof useCollections>['data']
|
|
|
|
type Props = {
|
|
collections: TrendingCollections
|
|
loading?: boolean
|
|
volumeKey: ComponentPropsWithoutRef<
|
|
typeof TrendingCollectionItem
|
|
>['volumeKey']
|
|
}
|
|
|
|
const TrendingCollectionsList: FC<Props> = ({
|
|
collections,
|
|
volumeKey,
|
|
loading,
|
|
}) => {
|
|
return (
|
|
<Box>
|
|
<Box
|
|
css={{
|
|
position: 'relative',
|
|
mb: '$3',
|
|
display: 'grid',
|
|
gridTemplateColumns: '1fr',
|
|
columnGap: 48,
|
|
rowGap: '$5',
|
|
'div:not(:first-child)': {
|
|
display: 'none',
|
|
},
|
|
'@bp900': {
|
|
gridTemplateColumns: '1fr 1fr',
|
|
'div:not(:first-child)': {
|
|
display: 'flex',
|
|
},
|
|
'div:last-child': { display: 'none' },
|
|
},
|
|
'@bp1100': {
|
|
gridTemplateColumns: '1fr 1fr 1fr',
|
|
'div:last-child': { display: 'flex' },
|
|
},
|
|
}}
|
|
>
|
|
{Array(3)
|
|
.fill(null)
|
|
.map(() => (
|
|
<Flex justify="between">
|
|
<Text style="subtitle3" color="subtle">
|
|
Collection
|
|
</Text>
|
|
<Text style="subtitle3" color="subtle">
|
|
Volume
|
|
</Text>
|
|
</Flex>
|
|
))}
|
|
</Box>
|
|
<Box
|
|
css={{
|
|
position: 'relative',
|
|
display: 'grid',
|
|
gridTemplateColumns: '1fr',
|
|
columnGap: 48,
|
|
rowGap: '$5',
|
|
'@bp900': {
|
|
gridTemplateColumns: '1fr 1fr',
|
|
},
|
|
'@bp1100': {
|
|
gridTemplateColumns: '1fr 1fr 1fr',
|
|
},
|
|
}}
|
|
>
|
|
{collections?.map((collection, i) => (
|
|
<TrendingCollectionItem
|
|
key={i}
|
|
collection={collection}
|
|
rank={i + 1}
|
|
volumeKey={volumeKey}
|
|
/>
|
|
))}
|
|
{loading && (
|
|
<Flex
|
|
css={{ width: '100%', height: '100%', position: 'absolute' }}
|
|
align="center"
|
|
justify="center"
|
|
>
|
|
<Box
|
|
css={{
|
|
inset: 0,
|
|
position: 'absolute',
|
|
background: '$grey10',
|
|
opacity: 0.9,
|
|
}}
|
|
><LoadingSpinner /></Box>
|
|
|
|
</Flex>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default TrendingCollectionsList
|