Skip to content

Commit 5585b0b

Browse files
gottasellemall69gottasellemall69
committed
hh
1 parent 5fa4ae1 commit 5585b0b

8 files changed

Lines changed: 224 additions & 136 deletions

File tree

‎components/Yugioh/Card.js‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const Card = ( { cardData } ) => {
1919

2020
return (
2121
<Link
22+
className="group/card block w-full [perspective:1500px]"
2223
href={ {
2324
pathname: "/yugioh/sets/[letter]/cards/card-details",
2425
query: {
@@ -32,17 +33,26 @@ const Card = ( { cardData } ) => {
3233
prefetch={ false }
3334
aria-label={ `View details for ${ productName }` }
3435
>
35-
<Image
36-
as="image"
37-
unoptimized="true"
38-
className="object-cover lg:object-scale-down object-top w-full mx-auto h-64 aspect-square"
39-
src={ imageSrc }
40-
alt={ `Card Image - ${ productName }` }
41-
width={ 1600 }
42-
height={ 500 }
43-
priority={ true }
44-
draggable={ false }
45-
/>
36+
<div className="relative mx-auto aspect-[260/360] w-full max-w-[16rem] overflow-hidden rounded-[6px] border border-white/10 bg-black/40 shadow-lg transition duration-300 [transform-style:preserve-3d] [contain:layout_paint_style] group-hover/card:border-indigo-400/60">
37+
<Image
38+
as="image"
39+
unoptimized="true"
40+
className="h-full w-full object-cover object-top lg:object-scale-down"
41+
src={ imageSrc }
42+
alt={ `Card Image - ${ productName }` }
43+
width={ 1600 }
44+
height={ 500 }
45+
priority={ true }
46+
draggable={ false }
47+
/>
48+
<div
49+
aria-hidden="true"
50+
className="absolute -inset-px rounded-[6px] bg-[linear-gradient(180deg,rgba(2,6,23,0.42),rgba(2,6,23,0.56)),linear-gradient(40deg,rgba(99,102,241,0.28),rgba(2,6,23,0.18))] opacity-95 transition-opacity duration-300 group-hover/card:opacity-100"
51+
/>
52+
<span className="absolute bottom-4 right-4 z-10 flex min-h-11 min-w-11 items-center justify-center rounded-[4px] border border-white/30 bg-black/75 px-4 py-2 text-center text-sm font-semibold uppercase leading-tight tracking-[0.08em] text-white shadow-lg transition duration-300 group-hover/card:border-indigo-400 group-hover/card:bg-indigo-500/20 group-hover/card:text-indigo-100">
53+
Details
54+
</span>
55+
</div>
4656
</Link>
4757
);
4858
};

‎components/Yugioh/GridView.js‎

Lines changed: 47 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard, sortConfig, han
204204
</div>
205205

206206
<div className="w-full rounded border border-white/10 bg-black/40 p-4 shadow-2xl sm:p-2">
207-
<div className="grid grid-cols-1 gap-2 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
207+
<div className="grid grid-cols-1 justify-items-center gap-x-8 gap-y-10 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
208208
{ memoizedAggregatedData.map( ( card ) => {
209209
if ( !card ) return null;
210210

@@ -282,14 +282,14 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard, sortConfig, han
282282
return (
283283
<div
284284
key={ card._id }
285-
className="group relative flex flex-wrap mx-auto sm:w-fit lg:w-full min-h-96 h-full flex-col rounded border border-white/10 bg-black/30 transition hover:border-indigo-400/50"
285+
className="group relative mx-auto flex h-full min-h-96 w-full max-w-[16rem] flex-col rounded-[6px] transition"
286286
>
287-
<div className="rounded relative mx-auto w-full max-w-[24rem] [perspective:1250px]">
287+
<div className="relative mx-auto w-full max-w-[16rem] [perspective:1500px]">
288288
<div
289-
className={ `grid w-full transition-transform duration-[800ms] [transform-style:preserve-3d] will-change-transform ${ isFlipped ? "[transform:rotateY(180deg)]" : "" }` }
289+
className={ `grid w-full transition-transform duration-[800ms] [transform-style:preserve-3d] [transition-timing-function:cubic-bezier(0.75,0,0.85,1)] ${ isFlipped ? "[transform:rotateY(180deg)]" : "" }` }
290290
>
291291
<div
292-
className="col-start-1 row-start-1 flex w-full flex-col rounded [backface-visibility:hidden]"
292+
className="col-start-1 row-start-1 flex w-full flex-col overflow-hidden rounded-[6px] shadow-lg [backface-visibility:hidden] [transform-style:preserve-3d]"
293293
role="button"
294294
tabIndex={ 0 }
295295
aria-pressed={ isFlipped }
@@ -301,22 +301,26 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard, sortConfig, han
301301
}
302302
} }
303303
>
304-
<div className="relative flex max-h-[31rem] h-full w-full items-center justify-center overflow-hidden rounded border border-white/10 bg-black/40 shadow-lg transition duration-200 group-hover:border-indigo-400/60 dark:border-white/20 dark:bg-gray-900/60">
304+
<div className="relative flex aspect-[260/360] h-full max-h-[31rem] w-full items-center justify-center overflow-hidden rounded-[6px] border border-white/10 bg-black/40 transition duration-300 group-hover:border-indigo-400/60 dark:border-white/20 dark:bg-gray-900/60">
305305
<img
306306
className="mx-auto h-full w-full object-top object-cover"
307307
src={ imageSrc }
308308
alt={ `Card Image - ${ card.productName }` }
309309
loading="lazy"
310310
/>
311+
<div
312+
aria-hidden="true"
313+
className="absolute -inset-px rounded-[6px] bg-gradient-to-t from-black/90 via-black/45 to-black/25 opacity-95 transition-opacity duration-300 group-hover:opacity-100"
314+
/>
311315
{ ( formatCurrency( card.marketPrice ) || card.rarity || card.printing ) && (
312-
<div className="pointer-events-none absolute inset-x-0 top-0 flex h-full items-end justify-start overflow-hidden rounded">
316+
<div className="pointer-events-none absolute inset-0 flex h-full items-end justify-start overflow-hidden rounded-[6px] [transform:translateZ(80px)]">
313317
<div
314318
aria-hidden="true"
315-
className="absolute inset-x-0 bottom-0 min-h-[24rem] bg-gradient-to-t from-black/80 via-black/30 to-transparent opacity-90"
319+
className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/35 to-transparent opacity-90"
316320
/>
317321

318-
<div className="relative flex flex-col gap-1 p-2 text-white text-shadow glass w-full bg-transparent">
319-
<h3 className="text-lg font-semibold text-pretty break-words">{ card.productName }</h3>
322+
<div className="relative flex w-full flex-col gap-1 p-4 text-left text-white text-shadow">
323+
<h3 className="line-clamp-3 text-base font-semibold leading-tight text-pretty break-words">{ card.productName }</h3>
320324
{ formatCurrency( card.marketPrice ) && (
321325
<div className="flex flex-wrap items-center justify-between gap-2">
322326
<p className="text-lg font-semibold">{ formatCurrency( card.marketPrice ) }</p>
@@ -330,47 +334,54 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard, sortConfig, han
330334
<p className="text-xs font-medium uppercase tracking-wide">
331335
{ [ card.rarity, card.printing ].filter( Boolean ).join( " • " ) }
332336
</p>
337+
<span className="mt-2 inline-flex min-h-10 w-fit min-w-10 items-center justify-center rounded-[4px] border border-white/35 bg-black/35 px-4 py-2 text-center text-xs font-semibold uppercase leading-tight tracking-[0.08em] text-white shadow-[0_0_6px_rgba(0,0,0,0.3)]">
338+
Details
339+
</span>
333340
</div>
334341
</div>
335342
) }
336343
</div>
337344
</div>
338-
<div className="col-start-1 row-start-1 flex w-full flex-col justify-between gap-3 rounded border border-white/10 bg-black p-4 text-white shadow-lg dark:border-white/20 dark:bg-gray-900/80 [backface-visibility:hidden] [transform:rotateY(180deg)]">
339-
<div className="space-y-3">
340-
<h3 className="text-lg font-semibold text-center text-pretty break-words">{ card.productName }</h3>
341-
<div className="space-y-1 text-xs text-white/70 sm:text-sm">
345+
<div className="col-start-1 row-start-1 flex aspect-[260/360] min-h-0 w-full flex-col overflow-hidden rounded-[6px] border border-white/10 bg-black p-5 text-white shadow-lg dark:border-white/20 dark:bg-gray-900/80 [backface-visibility:hidden] [transform:rotateY(180deg)] [transform-style:preserve-3d]">
346+
<div className="flex h-full min-h-0 flex-col justify-between gap-2 [transform:translateZ(80px)_scale(0.94)]">
347+
<div className="text-[0.8rem] font-semibold text-white">
348+
<h3 className="line-clamp-3 min-w-0 break-words text-center text-base font-semibold leading-tight text-white">
349+
{ card.productName }
350+
</h3>
351+
</div>
352+
<div className="min-h-0 flex-1 overflow-y-auto pr-2 text-[0.86rem] font-semibold leading-[1.4] text-white/80 [scrollbar-width:thin]">
342353
{ detailEntries.map( ( entry ) => (
343-
<div key={ entry.label } className="flex min-w-0 items-start justify-between gap-3 border-b border-white/5 pb-1 last:border-b-0">
344-
<span className="text-[0.65rem] font-semibold uppercase tracking-wide text-white/60 sm:text-xs">
354+
<div key={ entry.label } className="mb-2 rounded-[5px] border-b border-white/5 pb-2 last:border-b-0">
355+
<span className="block text-[0.65rem] font-bold uppercase tracking-wide text-white/60 sm:text-xs">
345356
{ entry.label }
346357
</span>
347-
<span className="min-w-0 text-right break-words text-white">{ entry.value }</span>
358+
<span className="block min-w-0 break-words text-white">{ entry.value }</span>
348359
</div>
349360
) ) }
350361
</div>
351-
</div>
352-
<div className="mx-auto mt-2 flex flex-wrap w-full gap-2 text-pretty sm:gap-3">
353-
<Link
354-
className="inline-flex w-full items-center justify-center rounded border border-white/20 bg-white/10 px-2 py-1 text-sm font-semibold text-white transition hover:border-indigo-400 hover:bg-indigo-500/20"
355-
href={ {
356-
pathname: "/yugioh/sets/[letter]/cards/card-details",
357-
query: cardDetailsQuery,
358-
} }
359-
>
360-
View Details
361-
</Link>
362-
<button
363-
type="button"
364-
className="inline-flex w-full items-center justify-center rounded border border-white/20 px-2 py-1 text-sm font-medium text-white transition hover:border-indigo-400 hover:text-indigo-200"
365-
onClick={ () => toggleFlip( card._id, false ) }
366-
>
367-
Show Card Front
368-
</button>
362+
<div className="mx-auto flex w-full flex-wrap gap-1.5 text-pretty">
363+
<Link
364+
className="inline-flex min-h-8 w-full items-center justify-center rounded-[4px] border border-white/20 bg-white/10 px-3 py-1.5 text-center text-xs font-semibold uppercase leading-tight tracking-[0.08em] text-white transition duration-300 hover:border-indigo-400 hover:bg-indigo-500/20 hover:text-indigo-100"
365+
href={ {
366+
pathname: "/yugioh/sets/[letter]/cards/card-details",
367+
query: cardDetailsQuery,
368+
} }
369+
>
370+
View Details
371+
</Link>
372+
<button
373+
type="button"
374+
className="inline-flex min-h-8 w-full items-center justify-center rounded-[4px] border border-white/20 bg-transparent px-3 py-1.5 text-center text-xs font-semibold uppercase leading-tight tracking-[0.08em] text-white transition duration-300 hover:border-indigo-400 hover:text-indigo-200"
375+
onClick={ () => toggleFlip( card._id, false ) }
376+
>
377+
Show Card Front
378+
</button>
379+
</div>
369380
</div>
370381
</div>
371382
</div>
372383
</div>
373-
<div className="mt-5 space-y-5 rounded border border-white/10 bg-white/5 p-4 text-sm text-white/80">
384+
<div className="mt-5 space-y-5 rounded-[6px] border border-white/10 bg-black/35 p-4 text-sm text-white/80">
374385
<div className="flex flex-wrap items-center justify-between gap-4">
375386
<span className="text-xs font-semibold uppercase tracking-wide text-white/60">Quantity</span>
376387
{ edit[ card._id ] === "quantity" ? (
@@ -443,19 +454,3 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard, sortConfig, han
443454
};
444455

445456
export default GridView;
446-
447-
448-
449-
450-
451-
452-
453-
454-
455-
456-
457-
458-
459-
460-
461-

0 commit comments

Comments
 (0)