Skip to content

Commit fc0cbca

Browse files
gottasellemall69gottasellemall69
committed
hh
1 parent 2f05b92 commit fc0cbca

8 files changed

Lines changed: 198 additions & 211 deletions

File tree

‎components/Layout.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,7 @@ export default function Layout( { children } ) {
1414
<div className="w-full overflow-x-hidden bg-slate-950 text-white">
1515
<div className="relative flex min-h-screen w-full flex-wrap text-white">
1616
{/* Sidebar */ }
17-
<div
18-
className={ `fixed inset-y-0 left-0 z-50 w-auto max-w-xs transform transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] lg:relative lg:translate-x-0 ${ isSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
19-
}` }
20-
>
17+
<div className={ `fixed inset-y-0 left-0 z-50 w-auto max-w-xs transform transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] lg:relative lg:translate-x-0 ${ isSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0' }` }>
2118
<div className="glass-strong h-full border-r border-white/20 shadow-xl">
2219
<div className="flex items-center justify-between gap-4 border-b border-white/5 px-5 py-4 backdrop-blur">
2320
<Link

‎components/Sports/SportsTable.tsx‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -86,13 +86,13 @@ const SportsTable: React.FC<SportsTableProps> = ( {
8686
}
8787

8888
return (
89-
<div className="mx-auto w-full max-w-7xl space-y-6 px-2 sm:px-4">
89+
<div className="h-full mx-auto w-full max-w-7xl space-y-6 px-2 sm:px-4">
9090
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
9191
<SportsCSVButton sportsData={sportsData} />
92-
{showPagination && <div className="sm:ml-auto">{renderPagination()}</div>}
92+
{showPagination && <div className="w-fit mx-auto">{renderPagination()}</div>}
9393
</div>
9494

95-
<div className="grid gap-4 md:hidden">
95+
<div className="grid gap-4 md:hidden w-[85%] mx-auto">
9696
{paginatedData.map( ( product, index ) => {
9797
const isSelected = isCardSelected( product.id );
9898

@@ -108,9 +108,9 @@ const SportsTable: React.FC<SportsTableProps> = ( {
108108
toggleCardSelection( product );
109109
}
110110
}}
111-
className={`rounded-2xl border p-4 shadow-lg transition focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-0 ${ isSelected
112-
? 'border-indigo-500/60 bg-indigo-500/10'
113-
: 'border-white/10 bg-slate-900/60'
111+
className={`backdrop rounded-2xl border p-4 shadow-lg transition focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-0 ${ isSelected
112+
? 'border-indigo-500/60'
113+
: 'border-white/10'
114114
}`}
115115
>
116116
<div className="flex items-start justify-between gap-3">
@@ -150,7 +150,7 @@ const SportsTable: React.FC<SportsTableProps> = ( {
150150
<div className="table-container overflow-hidden">
151151
<div className="overflow-x-auto">
152152
<table className="glass text-shadow font-black min-w-full divide-y divide-white/10 text-left text-sm text-white">
153-
<thead className="bg-slate-900/40 text-xs uppercase tracking-wide text-white/60">
153+
<thead className="bg-transparent backdrop text-xs uppercase tracking-wide text-white/60">
154154
<tr>
155155
<TableHeader title="Name" sortKey="productName" onSort={handleSort} getSortIcon={getSortIcon} />
156156
<TableHeader
@@ -179,12 +179,6 @@ const SportsTable: React.FC<SportsTableProps> = ( {
179179
</div>
180180
</div>
181181
</div>
182-
183-
{showPagination && (
184-
<div className="flex justify-center sm:justify-end">
185-
{renderPagination()}
186-
</div>
187-
)}
188182
</div>
189183
);
190184
};

‎components/Yugioh/Card.js‎

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,19 @@ const Card = ( { cardData } ) => {
1414

1515
return (
1616
<>
17-
<Link
18-
href={ {
19-
pathname: "/yugioh/sets/[letter]/cards/card-details",
20-
query: {
21-
card: cardData.id,
22-
letter: letter,
23-
set_name: setName,
24-
source: "set", // flag so card-details knows this came from a set page
25-
},
26-
} }
27-
passHref
28-
>
29-
30-
31-
32-
33-
34-
<div className="hover:scale-95 hover:duration-100 transition-transform">
17+
<div className="hover:scale-95 hover:duration-100 transition-transform -p-5 ">
18+
<Link
19+
href={ {
20+
pathname: "/yugioh/sets/[letter]/cards/card-details",
21+
query: {
22+
card: cardData.id,
23+
letter: letter,
24+
set_name: setName,
25+
source: "set", // flag so card-details knows this came from a set page
26+
},
27+
} }
28+
passHref
29+
>
3530
<img
3631
className="object-scale-down object-center w-full h-full max-h-96"
3732
as="image"
@@ -42,8 +37,8 @@ const Card = ( { cardData } ) => {
4237
width={ 1600 }
4338
height={ 1600 }
4439
/>
45-
</div>
46-
</Link>
40+
</Link>
41+
</div>
4742
</>
4843
);
4944
};

‎components/Yugioh/GridView.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard } ) => {
113113
onChange={ ( e ) => setSortField( e.target.value ) }
114114
className="px-2 py-1 rounded bg-white text-black font-semibold text-start"
115115
>
116-
<option disabled aria-placeholder="">Sort by...</option>
116+
<option disabled aria-placeholder="Sort by..."></option>
117117
<option value="productName">Card Name</option>
118118
<option value="setName">Set Name</option>
119119
<option value="number">Card Number</option>
@@ -131,14 +131,14 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard } ) => {
131131
{ sortDirection === 'asc' ? '▲ Ascending' : '▼ Descending' }
132132
</button>
133133
</div>
134-
134+
<Notification
135+
show={ notification.show }
136+
setShow={ ( show ) => setNotification( ( prev ) => ( { ...prev, show } ) ) }
137+
message={ notification.message }
138+
/>
135139
<div className="container box-content w-full mx-auto flex flex-wrap flex-col gap-5 sm:grid sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
136140

137-
<Notification
138-
show={ notification.show }
139-
setShow={ ( show ) => setNotification( ( prev ) => ( { ...prev, show } ) ) }
140-
message={ notification.message }
141-
/>
141+
142142

143143

144144
{ memoizedAggregatedData?.map( ( card ) => {
@@ -153,11 +153,11 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard } ) => {
153153
className={ `glass rounded-md h-96 flip-card card group mx-auto ${ flippedCards[ card._id ] ? 'flipped' : '' }` }
154154
>
155155
<div
156-
className="flip-card-inner hover:cursor-pointer "
156+
className="flip-card-inner hover:cursor-pointer rounded-md"
157157
onClick={ () => toggleFlip( card._id ) }
158158
>
159159
{/* FRONT */ }
160-
<div className="flip-card-front">
160+
<div className="flip-card-front rounded-md">
161161
<img
162162
className="w-full h-auto aspect-auto object-scale-down object-center"
163163
as="image"
@@ -171,7 +171,7 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard } ) => {
171171
</div>
172172

173173
{/* BACK */ }
174-
<div className="flip-card-back h-96 p-5 mx-auto cursor-default glass backdrop-opacity-15 text-white text-shadow overflow-hidden">
174+
<div className="flip-card-back h-96 rounded-md p-5 mx-auto cursor-default glass backdrop-opacity-15 text-white text-shadow overflow-hidden">
175175

176176
<div>
177177
<h3 className="text-xl font-bold text-center">{ card.productName }</h3>

0 commit comments

Comments
 (0)