Skip to content

Commit 7d43085

Browse files
gottasellemall69gottasellemall69
committed
hh
1 parent 273fb87 commit 7d43085

3 files changed

Lines changed: 59 additions & 49 deletions

File tree

‎components/Yugioh/Card.js‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,16 @@ const Card = ( { cardData } ) => {
2626
} }
2727
passHref
2828
>
29-
<div className="hover:scale-95 hover:duration-100 transition-transform">
30-
<img
31-
className="lg:object-cover object-scale-down object-top w-full h-72 aspect-video"
32-
as="image"
33-
priority="true"
34-
unoptimized="true"
35-
src={ getLocalImagePath( cardData.id ) }
36-
alt={ `Card Image - ${ cardData.productName }` }
37-
width={ "auto" }
38-
height={ "auto" }
39-
/>
40-
</div>
29+
<img
30+
className="lg:object-cover object-scale-down object-top w-full h-72 aspect-video"
31+
as="image"
32+
priority="true"
33+
unoptimized="true"
34+
src={ getLocalImagePath( cardData.id ) }
35+
alt={ `Card Image - ${ cardData.productName }` }
36+
width={ "100%" }
37+
height={ "full" }
38+
/>
4139
</Link>
4240
</>
4341
);

‎pages/yugioh/my-collection.js‎

Lines changed: 45 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -453,25 +453,27 @@ const MyCollection = () => {
453453
}, [ hasCards ] );
454454

455455
const renderViewToggle = () => (
456-
<div className="rounded-sm border border-white/20 bg-white/10 text-sm font-semibold text-white/80">
457-
<button
458-
type="button"
459-
onClick={ () => setViewMode( "grid" ) }
460-
className={ ` flex items-center gap-2 px-4 py-2 transition ${ viewMode === "grid" ? "bg-purple-600 text-white" : "hover:bg-white/10"
461-
}` }
462-
>
463-
<Grid className="h-4 w-4" />
464-
Grid
465-
</button>
466-
<button
467-
type="button"
468-
onClick={ () => setViewMode( "table" ) }
469-
className={ `flex items-center gap-2 px-4 py-2 transition ${ viewMode === "table" ? "bg-purple-600 text-white rounded-lg" : "hover:bg-white/10"
470-
}` }
471-
>
472-
<List className="h-4 w-4" />
473-
Table
474-
</button>
456+
<div className="flex-grow ml-5 w-full flex items-center justify-around md:justify-between space-x-4">
457+
<span className="inline-flex">
458+
<button
459+
type="button"
460+
onClick={ () => setViewMode( "grid" ) }
461+
className={ `p-2 inline-flex justify-center items-center transition ${ viewMode === "grid" ? "bg-purple-600 text-white" : "hover:bg-white/10"
462+
}` }
463+
>
464+
<Grid className="h-4 w-4" />
465+
Grid
466+
</button>
467+
<button
468+
type="button"
469+
onClick={ () => setViewMode( "table" ) }
470+
className={ `p-2 ml-2 inline-flex justify-center items-center transition ${ viewMode === "table" ? "bg-purple-600 text-white rounded-lg" : "hover:bg-white/10"
471+
}` }
472+
>
473+
<List className="h-4 w-4" />
474+
Table
475+
</button>
476+
</span>
475477
</div>
476478
);
477479

@@ -503,16 +505,16 @@ const MyCollection = () => {
503505
} else {
504506
content = (
505507
<div className="space-y-10 mx-auto h-full yugioh-bg bg-fixed bg-center bg-no-repeat">
506-
<header className="space-y-6 rounded-3xl border border-white/10 bg-black/30 backdrop">
507-
<div className="space-y-2">
508+
<header className="space-y-6 rounded-3xl border border-white/10 bg-black/30 backdrop p-2">
509+
<div className="space-y-2 text-center sm:text-left text-pretty">
508510
<h1 className="text-3xl font-bold text-shadow md:text-4xl">My Yu-Gi-Oh! Collection</h1>
509511
<p className="text-white/70">
510512
Track cards, monitor market prices, and manage your collection with powerful tools.
511513
</p>
512514
</div>
513515

514-
<div className="max-w-full w-[80%] sm:w-full mx-auto sm:mx-0 flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
515-
<div className="grid w-auto gap-4 sm:grid-cols-3">
516+
<div className="max-w-full sm:w-fit mx-auto inline-flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-items-stretch">
517+
<div className="grid gap-4 sm:grid-cols-3">
516518
<div className="glass rounded-2xl border border-white/10 p-5">
517519
<p className="text-xs uppercase tracking-wide text-white/60">Total cards</p>
518520
<p className="mt-2 text-3xl font-semibold text-white">{ totalOwnedCards }</p>
@@ -532,9 +534,9 @@ const MyCollection = () => {
532534
</header>
533535

534536
<section className="space-y-6 border border-white/10 p-6 backdrop mx-auto">
535-
<div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
536-
<div className="relative w-auto max-w-xl">
537-
<Search className="pointer-events-none absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-white/50" />
537+
<div className="py-5 sm:px-4 flex flex-col-reverse md:flex-row items-center justify-between">
538+
<div className="flex-shrink-0 mt-5 md:mt-0 max-w-sm sm:max-w-none w-full md:w-auto grid sm:grid-flow-col grid-cols-1 sm:auto-cols-fr gap-4">
539+
<Search className="pointer-events-none absolute mt-4 ml-5 h-5 w-5 text-white/50" />
538540
<input
539541
type="text"
540542
value={ searchValue }
@@ -547,15 +549,7 @@ const MyCollection = () => {
547549

548550
</div>
549551

550-
{ activeFilterBadges.length > 0 && (
551-
<div className="flex flex-wrap gap-2 text-sm text-white/70">
552-
{ activeFilterBadges.map( ( badge ) => (
553-
<span key={ badge.id } className="glass rounded-full px-3 py-1">
554-
{ badge.label }
555-
</span>
556-
) ) }
557-
</div>
558-
) }
552+
559553

560554
<div className="flex flex-wrap items-center gap-3">
561555
<button
@@ -605,7 +599,9 @@ const MyCollection = () => {
605599
Clear filters
606600
</button>
607601
) }
602+
608603
</div>
604+
609605
{ totalItems > ITEMS_PER_PAGE && (
610606
<YugiohPagination
611607
currentPage={ currentPage }
@@ -638,12 +634,22 @@ const MyCollection = () => {
638634
<p className="mt-2">Add cards to start tracking your inventory and market prices.</p>
639635
</div>
640636
<div className="flex max-h-24 h-fit items-center gap-3">
637+
641638
<CardFilter
642639
filters={ filters }
643640
updateFilters={ handleFilterChange }
644641
isModalOpen={ isFilterMenuOpen }
645642
setIsModalOpen={ setIsFilterMenuOpen }
646643
/>
644+
{ activeFilterBadges.length > 0 && (
645+
<div className="flex flex-wrap gap-2 text-sm text-white/70">
646+
{ activeFilterBadges.map( ( badge ) => (
647+
<span key={ badge.id } className="glass rounded-full px-3 py-1">
648+
{ badge.label }
649+
</span>
650+
) ) }
651+
</div>
652+
) }
647653
{ activeFilterBadges.length > 0 && (
648654
<button
649655
type="button"
@@ -653,9 +659,13 @@ const MyCollection = () => {
653659
Clear filters
654660
</button>
655661
) }
662+
656663
</div>
664+
657665
</>
666+
658667
) }
668+
659669
</section>
660670
</div>
661671
);

‎tailwind.config.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
/** @type {import('tailwindcss').Config} */
2+
23
module.exports = {
34
darkMode: [ "class" ],
45
content: [
56
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
67
"./components/**/*.{js,ts,jsx,tsx,mdx}",
78
"./app/**/*.{js,ts,jsx,tsx,mdx}",
89
],
10+
911
theme: {
1012
extend: {
1113
colors: {
@@ -189,8 +191,8 @@ module.exports = {
189191
},
190192
borderRadius: {
191193
lg: 'var(--radius)',
192-
md: 'calc(var(--radius) - 2px)',
193-
sm: 'calc(var(--radius) - 4px)'
194+
md: 'calc(var(--radius) - 2%)',
195+
sm: 'calc(var(--radius) - 4%)'
194196
}
195197
}
196198
},

0 commit comments

Comments
 (0)