-
Notifications
You must be signed in to change notification settings - Fork 200
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #406 from reservoirprotocol/armando/grwth-3585-tre…
…nding-mint-detail-page Armando/grwth 3585 trending mint detail page
- Loading branch information
Showing
7 changed files
with
690 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { ToggleGroupItem, ToggleGroupRoot } from 'components/primitives' | ||
| import { FC } from 'react' | ||
|
|
||
| export const MintTypeOptions = ['any', 'free', 'paid'] as const | ||
| export type MintTypeOption = (typeof MintTypeOptions)[number] | ||
|
|
||
| type Props = { | ||
| option: MintTypeOption | ||
| onOptionSelected: (option: MintTypeOption) => void | ||
| } | ||
|
|
||
| const MintTypeSelector: FC<Props> = ({ onOptionSelected, option }) => { | ||
| return ( | ||
| <ToggleGroupRoot | ||
| type="single" | ||
| defaultChecked | ||
| defaultValue="any" | ||
| css={{ | ||
| width: '100%', | ||
| }} | ||
| value={option} | ||
| onValueChange={(selectedOption) => | ||
| selectedOption && onOptionSelected(selectedOption as MintTypeOption) | ||
| } | ||
| > | ||
| {MintTypeOptions.map((option) => ( | ||
| <ToggleGroupItem | ||
| key={option} | ||
| value={option} | ||
| css={{ | ||
| flexGrow: 1, | ||
| height: '44px', | ||
| textTransform: 'capitalize', | ||
| px: '$4', | ||
| py: '$2', | ||
| background: '$gray3', | ||
| '&:first-of-type': { | ||
| borderRadius: '8px 0 0 8px', | ||
| }, | ||
| '&:last-of-type': { | ||
| borderRadius: '0 8px 8px 0', | ||
| }, | ||
| }} | ||
| > | ||
| {option} | ||
| </ToggleGroupItem> | ||
| ))} | ||
| </ToggleGroupRoot> | ||
| ) | ||
| } | ||
|
|
||
| export default MintTypeSelector |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| import { faChevronDown } from '@fortawesome/free-solid-svg-icons' | ||
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' | ||
| import * as DropdownMenu from '@radix-ui/react-dropdown-menu' | ||
| import { useTrendingMints } from '@reservoir0x/reservoir-kit-ui' | ||
| import { | ||
| DropdownMenuContent, | ||
| DropdownMenuItem, | ||
| } from 'components/primitives/Dropdown' | ||
| import { FC } from 'react' | ||
| import { Box, Button, Text } from '../primitives' | ||
|
|
||
| export type MintsSortingOption = NonNullable< | ||
| Exclude<Parameters<typeof useTrendingMints>[0], false | undefined>['period'] | ||
| > | ||
|
|
||
| const sortingOptions: MintsSortingOption[] = [ | ||
| '5m', | ||
| '10m', | ||
| '30m', | ||
| '1h', | ||
| '6h', | ||
| '24h', | ||
| ] | ||
|
|
||
| const nameForSortingOption = (option: MintsSortingOption, compact: boolean) => { | ||
| switch (option) { | ||
| case '24h': | ||
| return compact ? '24h' : '24 hours' | ||
| case '6h': | ||
| return compact ? '6h' : '6 hours' | ||
| case '1h': | ||
| return compact ? '1h' : '1 hour' | ||
| case '30m': | ||
| return compact ? '30m' : '30 minutes' | ||
| case '10m': | ||
| return compact ? '10m' : '10 minutes' | ||
| case '5m': | ||
| return compact ? '5m' : '5 minutes' | ||
| } | ||
| } | ||
|
|
||
| type Props = { | ||
| compact?: boolean | ||
| option: MintsSortingOption | ||
| onOptionSelected: (option: MintsSortingOption) => void | ||
| } | ||
|
|
||
| const MintsPeriodDropdown: FC<Props> = ({ | ||
| compact = false, | ||
| option, | ||
| onOptionSelected, | ||
| }) => { | ||
| return ( | ||
| <DropdownMenu.Root> | ||
| <DropdownMenu.Trigger asChild> | ||
| <Button | ||
| color="gray3" | ||
| css={{ | ||
| px: '14px', | ||
| justifyContent: 'space-between', | ||
| '@md': { | ||
| width: '220px', | ||
| minWidth: 'max-content', | ||
| px: '$4', | ||
| }, | ||
| }} | ||
| > | ||
| <Text style="body1">{nameForSortingOption(option, compact)}</Text> | ||
| <Box | ||
| css={{ | ||
| color: '$gray10', | ||
| transition: 'transform', | ||
| '[data-state=open] &': { transform: 'rotate(180deg)' }, | ||
| }} | ||
| > | ||
| <FontAwesomeIcon icon={faChevronDown} width={16} /> | ||
| </Box> | ||
| </Button> | ||
| </DropdownMenu.Trigger> | ||
| <DropdownMenuContent css={{ width: '220px', mt: '$2', zIndex: 1000 }}> | ||
| {sortingOptions.map((optionItem) => ( | ||
| <DropdownMenuItem | ||
| key={optionItem} | ||
| css={{ py: '$3' }} | ||
| onClick={() => onOptionSelected(optionItem as MintsSortingOption)} | ||
| > | ||
| {nameForSortingOption(optionItem, false)} | ||
| </DropdownMenuItem> | ||
| ))} | ||
| </DropdownMenuContent> | ||
| </DropdownMenu.Root> | ||
| ) | ||
| } | ||
|
|
||
| export default MintsPeriodDropdown |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
f94a29fThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
explorer – ./
explorer.reservoir.tools
explorer-git-main-unevenlabs.vercel.app
marketplace.reservoir.tools
banana.reservoir.tools
explorer-unevenlabs.vercel.app
testnets-marketplace.reservoir.tools