Skip to content

Commit 191da7a

Browse files
RigidityRigidity
authored
Merge pull request #705 from xch-dev/offer-card
Add a card around offers page
2 parents 9c1d626 + 4c1b854 commit 191da7a

File tree

1 file changed

+139
-124
lines changed

1 file changed

+139
-124
lines changed

‎src/pages/Offers.tsx‎

Lines changed: 139 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { ViewOfferDialog } from '@/components/dialogs/ViewOfferDialog';
99
import Header from '@/components/Header';
1010
import { OfferRowCard } from '@/components/OfferRowCard';
1111
import { Button } from '@/components/ui/button';
12+
import { Card } from '@/components/ui/card';
1213
import { Dialog, DialogTrigger } from '@/components/ui/dialog';
1314
import {
1415
Select,
@@ -227,136 +228,150 @@ export function Offers() {
227228
}
228229
/>
229230
<Container>
230-
<div className='flex flex-col gap-10'>
231-
<div className='flex flex-col items-center justify-center pt-10 text-center gap-4'>
232-
<HandCoins
233-
className='h-12 w-12 text-muted-foreground'
234-
aria-hidden='true'
235-
/>
236-
<div>
237-
<h2 className='text-lg font-semibold'>
238-
{offers.length > 0 ? (
239-
<Trans>Manage offers</Trans>
240-
) : (
241-
<Trans>No offers yet</Trans>
242-
)}
243-
</h2>
244-
<p className='mt-2 text-sm text-muted-foreground'>
245-
<Trans>
246-
Create a new offer to get started with peer-to-peer trading.
247-
</Trans>
248-
</p>
249-
<p className='mt-1 text-sm text-muted-foreground'>
250-
<Trans>You can also paste an offer using</Trans>{' '}
251-
<kbd>{platform() === 'macos' ? '⌘+V' : 'Ctrl+V'}</kbd>.
252-
</p>
253-
</div>
254-
<div className='flex gap-2'>
255-
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
256-
<DialogTrigger asChild>
257-
<Button variant='outline' className='flex items-center gap-1'>
258-
<Trans>View Offer</Trans>
231+
<Card className='p-6'>
232+
<div className='flex flex-col gap-10'>
233+
<div className='flex flex-col items-center justify-center pt-4 text-center gap-4'>
234+
<HandCoins
235+
className='h-12 w-12 text-muted-foreground'
236+
aria-hidden='true'
237+
/>
238+
<div>
239+
<h2 className='text-lg font-semibold'>
240+
{offers.length > 0 ? (
241+
<Trans>Manage offers</Trans>
242+
) : (
243+
<Trans>No offers yet</Trans>
244+
)}
245+
</h2>
246+
<p className='mt-2 text-sm text-muted-foreground'>
247+
<Trans>
248+
Create a new offer to get started with peer-to-peer trading.
249+
</Trans>
250+
</p>
251+
<p className='mt-1 text-sm text-muted-foreground'>
252+
<Trans>You can also paste an offer using</Trans>{' '}
253+
<kbd>{platform() === 'macos' ? '⌘+V' : 'Ctrl+V'}</kbd>.
254+
</p>
255+
</div>
256+
<div className='flex gap-2'>
257+
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
258+
<DialogTrigger asChild>
259+
<Button
260+
variant='outline'
261+
className='flex items-center gap-1'
262+
>
263+
<Trans>View Offer</Trans>
264+
</Button>
265+
</DialogTrigger>
266+
<ViewOfferDialog
267+
open={dialogOpen}
268+
onOpenChange={setDialogOpen}
269+
offerString={offerString}
270+
setOfferString={setOfferString}
271+
onSubmit={handleViewOffer}
272+
/>
273+
</Dialog>
274+
<Link to='/offers/make' replace={true}>
275+
<Button>
276+
<Trans>Create Offer</Trans>
259277
</Button>
260-
</DialogTrigger>
261-
<ViewOfferDialog
262-
open={dialogOpen}
263-
onOpenChange={setDialogOpen}
264-
offerString={offerString}
265-
setOfferString={setOfferString}
266-
onSubmit={handleViewOffer}
267-
/>
268-
</Dialog>
269-
<Link to='/offers/make' replace={true}>
270-
<Button>
271-
<Trans>Create Offer</Trans>
272-
</Button>
273-
</Link>
278+
</Link>
279+
</div>
274280
</div>
275-
</div>
276281

277-
{offers.length > 0 && (
278-
<div className='flex flex-col gap-4'>
279-
<div className='flex flex-row items-center justify-between gap-4'>
280-
<div className='flex items-center gap-2'>
281-
<FilterIcon
282-
className='h-4 w-4 text-muted-foreground'
283-
aria-hidden='true'
284-
/>
285-
<Select value={statusFilter} onValueChange={setStatusFilter}>
286-
<SelectTrigger className='w-[180px]'>
287-
<SelectValue placeholder='Filter by status' />
288-
</SelectTrigger>
289-
<SelectContent>
290-
<SelectItem value='all'>All Offers</SelectItem>
291-
<SelectItem value='active'>Active</SelectItem>
292-
<SelectItem value='completed'>Completed</SelectItem>
293-
<SelectItem value='cancelled'>Cancelled</SelectItem>
294-
<SelectItem value='expired'>Expired</SelectItem>
295-
</SelectContent>
296-
</Select>
282+
{offers.length > 0 && (
283+
<div className='flex flex-col gap-4'>
284+
<div className='flex flex-row items-center justify-between gap-4'>
285+
<div className='flex items-center gap-2'>
286+
<FilterIcon
287+
className='h-4 w-4 text-muted-foreground'
288+
aria-hidden='true'
289+
/>
290+
<Select
291+
value={statusFilter}
292+
onValueChange={setStatusFilter}
293+
>
294+
<SelectTrigger className='w-[180px]'>
295+
<SelectValue placeholder='Filter by status' />
296+
</SelectTrigger>
297+
<SelectContent>
298+
<SelectItem value='all'>All Offers</SelectItem>
299+
<SelectItem value='active'>Active</SelectItem>
300+
<SelectItem value='completed'>Completed</SelectItem>
301+
<SelectItem value='cancelled'>Cancelled</SelectItem>
302+
<SelectItem value='expired'>Expired</SelectItem>
303+
</SelectContent>
304+
</Select>
305+
</div>
306+
<div className='flex items-center gap-2 min-w-fit'>
307+
{filteredOffers.some(
308+
(offer) => offer.status === 'active',
309+
) && (
310+
<TooltipProvider>
311+
<Tooltip>
312+
<TooltipTrigger asChild>
313+
<Button
314+
variant='outline'
315+
size='sm'
316+
className='flex items-center gap-1'
317+
onClick={() => setIsCancelAllOpen(true)}
318+
>
319+
<CircleOff
320+
className='h-4 w-4'
321+
aria-hidden='true'
322+
/>
323+
<span className='hidden sm:inline'>
324+
<Trans>Cancel All Active</Trans>
325+
</span>
326+
</Button>
327+
</TooltipTrigger>
328+
<TooltipContent>
329+
<Trans>Cancel All Active Offers</Trans>
330+
</TooltipContent>
331+
</Tooltip>
332+
</TooltipProvider>
333+
)}
334+
{filteredOffers.length > 0 && (
335+
<TooltipProvider>
336+
<Tooltip>
337+
<TooltipTrigger asChild>
338+
<Button
339+
variant='destructive'
340+
size='sm'
341+
className='flex items-center gap-1'
342+
onClick={() => setIsDeleteAllOpen(true)}
343+
>
344+
<TrashIcon
345+
className='h-4 w-4'
346+
aria-hidden='true'
347+
/>
348+
<span className='hidden sm:inline'>
349+
<Trans>Delete All</Trans>
350+
</span>
351+
</Button>
352+
</TooltipTrigger>
353+
<TooltipContent>
354+
<Trans>Delete All Filtered Offers</Trans>
355+
</TooltipContent>
356+
</Tooltip>
357+
</TooltipProvider>
358+
)}
359+
</div>
297360
</div>
298-
<div className='flex items-center gap-2 min-w-fit'>
299-
{filteredOffers.some(
300-
(offer) => offer.status === 'active',
301-
) && (
302-
<TooltipProvider>
303-
<Tooltip>
304-
<TooltipTrigger asChild>
305-
<Button
306-
variant='outline'
307-
size='sm'
308-
className='flex items-center gap-1'
309-
onClick={() => setIsCancelAllOpen(true)}
310-
>
311-
<CircleOff className='h-4 w-4' aria-hidden='true' />
312-
<span className='hidden sm:inline'>
313-
<Trans>Cancel All Active</Trans>
314-
</span>
315-
</Button>
316-
</TooltipTrigger>
317-
<TooltipContent>
318-
<Trans>Cancel All Active Offers</Trans>
319-
</TooltipContent>
320-
</Tooltip>
321-
</TooltipProvider>
322-
)}
323-
{filteredOffers.length > 0 && (
324-
<TooltipProvider>
325-
<Tooltip>
326-
<TooltipTrigger asChild>
327-
<Button
328-
variant='destructive'
329-
size='sm'
330-
className='flex items-center gap-1'
331-
onClick={() => setIsDeleteAllOpen(true)}
332-
>
333-
<TrashIcon className='h-4 w-4' aria-hidden='true' />
334-
<span className='hidden sm:inline'>
335-
<Trans>Delete All</Trans>
336-
</span>
337-
</Button>
338-
</TooltipTrigger>
339-
<TooltipContent>
340-
<Trans>Delete All Filtered Offers</Trans>
341-
</TooltipContent>
342-
</Tooltip>
343-
</TooltipProvider>
344-
)}
345-
</div>
346-
</div>
347361

348-
<div className='flex flex-col gap-2'>
349-
{filteredOffers.map((record) => (
350-
<OfferRowCard
351-
record={record}
352-
key={record.offer_id}
353-
refresh={updateOffers}
354-
/>
355-
))}
362+
<div className='flex flex-col gap-2'>
363+
{filteredOffers.map((record) => (
364+
<OfferRowCard
365+
record={record}
366+
key={record.offer_id}
367+
refresh={updateOffers}
368+
/>
369+
))}
370+
</div>
356371
</div>
357-
</div>
358-
)}
359-
</div>
372+
)}
373+
</div>
374+
</Card>
360375
</Container>
361376

362377
<NfcScanDialog open={showScanUi} onOpenChange={setShowScanUi} />

0 commit comments

Comments
 (0)