2
1
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2023-12-13 21:00:40 +01:00

Added static design of sorting to offers in AdminX

refs https://github.com/TryGhost/Product/issues/4162
This commit is contained in:
Sodbileg Gansukh 2023-11-21 11:33:22 +08:00
parent 6316680127
commit ccd1e355e1

View file

@ -1,6 +1,7 @@
import useFeatureFlag from '../../../../hooks/useFeatureFlag';
import {Button, Tab, TabView} from '@tryghost/admin-x-design-system';
import {Modal} from '@tryghost/admin-x-design-system';
import {SortMenu} from '@tryghost/admin-x-design-system';
import {Tier, getPaidActiveTiers, useBrowseTiers} from '@tryghost/admin-x-framework/api/tiers';
import {currencyToDecimal, getSymbol} from '../../../../utils/currency';
import {getHomepageUrl} from '@tryghost/admin-x-framework/api/site';
@ -235,8 +236,21 @@ export const OffersIndexModal = () => {
<div className='mt-12 flex items-center justify-between border-b border-b-grey-300 pb-2.5'>
<h1 className='text-3xl'>{offersTabs.find(tab => tab.id === selectedTab)?.title} offers</h1>
<div className='flex gap-3'>
<Button icon='layout-module-1' iconColorClass={selectedLayout === 'card' ? 'text-black' : 'text-grey-500'} link={true} size='sm' onClick={() => setSelectedLayout('card')} />
<Button icon='layout-headline' iconColorClass={selectedLayout === 'list' ? 'text-black' : 'text-grey-500'} link={true} size='sm' onClick={() => setSelectedLayout('list')} />
<SortMenu
direction='desc'
items={[
{id: 'date-added', label: 'Date added', selected: true},
{id: 'name', label: 'Name'},
{id: 'redemptions', label: 'Redemptions'}
]}
position='right'
onDirectionChange={() => {}}
onSortChange={() => {}}
/>
<div className='flex gap-3'>
<Button icon='layout-module-1' iconColorClass={selectedLayout === 'card' ? 'text-black' : 'text-grey-500'} link={true} size='sm' onClick={() => setSelectedLayout('card')} />
<Button icon='layout-headline' iconColorClass={selectedLayout === 'list' ? 'text-black' : 'text-grey-500'} link={true} size='sm' onClick={() => setSelectedLayout('list')} />
</div>
</div>
</div>
</header>