Skip to content

Commit c385f34

Browse files
gottasellemall69gottasellemall69
committed
hh
1 parent 3fb27de commit c385f34

4 files changed

Lines changed: 365 additions & 148 deletions

File tree

‎components/Yugioh/CardFilter.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const CardFilter = ( {
4848
{/* 📌 trigger button */ }
4949
<button
5050
type="button"
51-
className="px-1 py-1 m-2 glass font-semibold text-black bg-white hover:bg-black hover:text-white rounded-xs"
51+
className="px-1.5 py-1.5 my-2 glass font-semibold text-black bg-white hover:bg-black hover:text-white rounded-xs"
5252
onClick={ () => setIsModalOpen( true ) }
5353
>
5454
Open Filters

‎package-lock.json‎

Lines changed: 33 additions & 32 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎pages/yugioh/my-collection.js‎

Lines changed: 71 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -297,7 +297,7 @@ const MyCollection = () => {
297297

298298

299299
{/* Main Content */ }
300-
<div className="mx-auto">
300+
<div className="mx-auto w-auto">
301301

302302
{/* Page Header */ }
303303
<div className="px-6 py-8">
@@ -308,63 +308,45 @@ const MyCollection = () => {
308308
<p className="text-white/80">Manage and track your card collection</p>
309309

310310
{/* Controls */ }
311-
<div className="w-fit sm:max-w-dvw mt-6">
312-
<div className="p-4 rounded-lg border border-white/20">
313-
<div className="flex flex-col lg:flex-row gap-4">
314-
{/* View Toggle */ }
315-
<div className="glass flex border border-white/20 rounded-lg overflow-hidden">
316-
<button
317-
onClick={ () => setViewMode( 'grid' ) }
318-
className={ `float-left p-3 transition-colors ${ viewMode === 'grid'
319-
? 'bg-purple-600 text-white'
320-
: 'text-white/60 hover:text-white hover:bg-white/10'
321-
}` }
322-
>
323-
<Grid size={ 16 } />
324-
</button>
325-
<button
326-
onClick={ () => setViewMode( 'table' ) }
327-
className={ `float-right p-3 transition-colors ${ viewMode === 'table'
328-
? 'bg-purple-600 text-white'
329-
: 'text-white/60 hover:text-white hover:bg-white/10'
330-
}` }
331-
>
332-
<List size={ 16 } />
333-
</button>
334-
</div>
335-
336-
{/* Action Buttons */ }
337-
<div className="flex flex-wrap gap-2">
338-
<button
339-
onClick={ handleUpdatePrices }
340-
disabled={ isUpdatingPrices }
341-
className={ `flex items-center space-x-2 px-4 py-2 rounded-lg font-semibold transition-colors ${ isUpdatingPrices
342-
? 'bg-gray-500 cursor-not-allowed'
343-
: 'bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700'
344-
}` }
345-
>
346-
<TrendingUp size={ 16 } />
347-
<span>{ isUpdatingPrices ? 'Updating...' : 'Update Prices' }</span>
348-
</button>
349-
350-
<DownloadYugiohCSVButton
351-
aggregatedData={ aggregatedData }
352-
userCardList={ [] }
353-
/>
354-
355-
<button
356-
onClick={ onDeleteAllCards }
357-
className="flex items-center space-x-2 px-4 py-2 bg-gradient-to-r from-red-600 to-red-700 rounded-lg hover:from-red-700 hover:to-red-800 transition-colors font-semibold"
358-
>
359-
<span>Delete All</span>
360-
</button>
311+
{ isAuthenticated && (
312+
<div className="mx-auto mt-6">
313+
<div className="p-4 rounded-lg border border-white/20">
314+
<div className=" inline-flex flex-wrap flex-col lg:flex-row gap-4">
315+
316+
317+
{/* Action Buttons */ }
318+
<div className="mx-auto flex flex-wrap gap-2">
319+
<button
320+
onClick={ handleUpdatePrices }
321+
disabled={ isUpdatingPrices }
322+
className={ `flex items-center space-x-2 px-4 py-2 rounded-lg font-semibold transition-colors ${ isUpdatingPrices
323+
? 'bg-gray-500 cursor-not-allowed'
324+
: 'bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700'
325+
}` }
326+
>
327+
<TrendingUp size={ 16 } />
328+
<span>{ isUpdatingPrices ? 'Updating...' : 'Update Prices' }</span>
329+
</button>
330+
331+
<DownloadYugiohCSVButton
332+
aggregatedData={ aggregatedData }
333+
userCardList={ [] }
334+
/>
335+
336+
<button
337+
onClick={ onDeleteAllCards }
338+
className="flex items-center space-x-2 px-4 py-2 bg-gradient-to-r from-red-600 to-red-700 rounded-lg hover:from-red-700 hover:to-red-800 transition-colors font-semibold"
339+
>
340+
<span>Delete All</span>
341+
</button>
342+
</div>
361343
</div>
362344
</div>
363345
</div>
364-
</div>
346+
) }
365347
</div>
366348
{/* Collection Stats */ }
367-
<div className="p-4 mt-8">
349+
<div className="w-3/4 sm:max-w-[55%] mx-auto p-4 mt-8">
368350
<div className="glass p-4 rounded-lg">
369351
<h3 className="text-sm font-semibold text-white/80 mb-3">Collection Value</h3>
370352
<div className="space-y-2">
@@ -385,28 +367,53 @@ const MyCollection = () => {
385367

386368

387369

388-
{/* Search */ }
389-
<div className="px-6 mb-6">
390-
<YugiohSearchBar
391-
searchTerm={ searchTerm }
392-
onSearch={ handleSearch }
393-
/>
394-
</div>
370+
395371

396372
{/* Content Area */ }
397-
<main className="mx-auto max-w-screen-xl px-6 pb-8">
373+
<main className="mx-auto w-full px-6 pb-8">
398374
{ isAuthenticated ? (
399375
<>
400376

401-
377+
{/* Search */ }
378+
<div className="px-6 mb-6">
379+
<YugiohSearchBar
380+
searchTerm={ searchTerm }
381+
onSearch={ handleSearch }
382+
/>
383+
</div>
402384
{/* Filter */ }
403-
<div className="mb-6">
385+
<div className="px-3 py-3 mb-6">
404386
<CardFilter
405387
updateFilters={ handleFilterChange }
406388
filters={ filters }
407389
isModalOpen={ isFilterMenuOpen }
408390
setIsModalOpen={ setIsFilterMenuOpen }
409391
/>
392+
{/* View Toggle */ }
393+
<div className="glass flex border border-white/20 rounded-lg overflow-ellipsis w-fit">
394+
<div className='float-left w-1/2'>
395+
<button
396+
onClick={ () => setViewMode( 'grid' ) }
397+
className={ `p-3 transition-colors ${ viewMode === 'grid'
398+
? 'bg-purple-600 text-white'
399+
: 'text-white/60 hover:text-white hover:bg-white/10'
400+
}` }
401+
>
402+
<Grid size={ 16 } />
403+
</button>
404+
</div>
405+
<div className='float-right w-1/2'>
406+
<button
407+
onClick={ () => setViewMode( 'table' ) }
408+
className={ `p-3 transition-colors ${ viewMode === 'table'
409+
? 'bg-purple-600 text-white'
410+
: 'text-white/60 hover:text-white hover:bg-white/10'
411+
}` }
412+
>
413+
<List size={ 16 } />
414+
</button>
415+
</div>
416+
</div>
410417
</div>
411418

412419
{/* Content */ }
@@ -421,6 +428,7 @@ const MyCollection = () => {
421428
/>
422429
</div>
423430

431+
424432
<GridView
425433
aggregatedData={ paginatedData.map( card => ( {
426434
...card,

0 commit comments

Comments
 (0)