Skip to content

Commit d6b9d61

Browse files
gottasellemall69gottasellemall69
committed
hh
1 parent 11ec336 commit d6b9d61

14 files changed

Lines changed: 727 additions & 281 deletions

File tree

‎components/Layout.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ import { Dialog, DialogBackdrop, DialogPanel, TransitionChild } from '@headlessu
44
import { Bars3Icon as MenuIcon, XMarkIcon as X } from '@heroicons/react/24/outline';
55
import SideNav from '@/components/Navigation/SideNav';
66

7+
78
export default function Layout( { children } ) {
89
const [ isSidebarOpen, setIsSidebarOpen ] = useState( false );
9-
1010
const toggleSidebar = () => {
1111
setIsSidebarOpen( !isSidebarOpen );
1212
};
1313

1414
return (
15-
<div className=" w-full glass dark:bg-gray-900">
15+
<div className="h-full w-full glass dark:bg-gray-900">
1616
<Dialog open={ isSidebarOpen } onClose={ setIsSidebarOpen } className="relative z-50 lg:hidden">
1717
<DialogBackdrop
1818
transition
@@ -21,13 +21,13 @@ export default function Layout( { children } ) {
2121
<div className="fixed inset-0 flex">
2222
<DialogPanel
2323
transition
24-
className="relative flex w-fit max-w-xs flex-1 transform transition duration-300 ease-in-out data-closed:-translate-x-full"
24+
className="relative flex w-auto max-w-xs flex-1 transform transition duration-300 ease-in-out data-closed:-translate-x-full"
2525
>
2626
<TransitionChild>
27-
<div className="absolute top-0 left-full flex w-fit justify-center pt-5 duration-300 ease-in-out data-closed:opacity-0">
27+
<div className="absolute top-0 left-full flex w-auto justify-center pt-5 duration-300 ease-in-out data-closed:opacity-0">
2828
<button type="button" onClick={ toggleSidebar } className="-m-2.5 p-2.5">
2929
<span className="sr-only">Close sidebar</span>
30-
<X title="Close" aria-hidden="true" className="size-7 text-red-600" />
30+
<X title="Close" onClick={ setIsSidebarOpen } aria-hidden="true" className="size-7 text-red-600" />
3131
</button>
3232
</div>
3333
</TransitionChild>
@@ -51,7 +51,7 @@ export default function Layout( { children } ) {
5151
<button
5252
type="button"
5353
onClick={ toggleSidebar }
54-
className=" text-gray-700 hover:text-gray-900 lg:hidden dark:text-gray-400 dark:hover:text-white"
54+
className=" text-gray-700 hover:text-gray-900 lg:hidden dark:text-gray-400 dark:hover:text-white justify-self-end place-items-end"
5555
title="Open sidebar"
5656
>
5757
<span className="sr-only">Open sidebar</span>
@@ -61,11 +61,11 @@ export default function Layout( { children } ) {
6161
CARD PRICE APP
6262
</Link>
6363
<div className=" flex items-center">
64-
<span className="sr-only">User profile placeholder</span>
64+
<span className="">User profile placeholder</span>
6565
</div>
6666
</div>
6767
<main className="mx-auto">
68-
<div className=" mx-1 my-2 ">
68+
<div className="h-full mx-1 my-2 ">
6969
{ children }
7070
</div>
7171
</main>

‎components/Navigation/SideNav.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export default function SideNav() {
7575

7676

7777

78-
useEffect( () => {
78+
useMemo( () => {
7979
const checkAuth = async () => {
8080
try {
8181
const res = await fetch( "/api/auth/validate", {
@@ -105,13 +105,13 @@ export default function SideNav() {
105105
};
106106

107107
return (
108-
<nav className="mx-auto w-auto">
108+
<nav className="mx-auto w-full">
109109
<ul className="block flex-1 px-2 py-2 gap-3">
110110
{ NAV_LINKS.map( ( item ) => {
111111
const isActive = activeHref === item.href;
112112

113113
return (
114-
<li key={ item.href } className="navButton max-w-full text-nowrap">
114+
<li key={ item.href } className="navButton max-w-prose text-nowrap">
115115
<Link
116116
href={ item.href }
117117
title={ item.title }
@@ -139,7 +139,7 @@ export default function SideNav() {
139139
{ isAuthenticated ? (
140140
<button
141141
onClick={ handleLogout }
142-
className="mx-auto w-full block text-nowrap px-16 py-3 rounded-lg border border-white bg-red-500/20 text-center text-sm font-semibold tracking-wide text-red-100 transition hover:bg-red-500/30"
142+
className="mx-auto w-3/4 block text-nowrap px-16 py-3 rounded-lg border border-white bg-red-500/20 text-center text-sm font-semibold tracking-wide text-red-100 transition hover:bg-red-500/30"
143143
title="Log out"
144144
>
145145
Log Out
@@ -149,7 +149,7 @@ export default function SideNav() {
149149
<Link
150150
href="/login"
151151
title="Log in"
152-
className="mx-auto w-full text-nowrap block px-16 py-3 rounded-lg border border-white bg-white/5 text-center text-sm font-semibold tracking-wide text-white/90 transition hover:bg-white/10"
152+
className="mx-auto w-3/4 text-nowrap block px-16 py-3 rounded-lg border border-white bg-white/5 text-center text-sm font-semibold tracking-wide text-white/90 transition hover:bg-white/10"
153153
>
154154
Log In
155155
</Link>

‎components/Yugioh/Card.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
"use client";
1+
"use client";
22
import Link from 'next/link';
33
import { useRouter } from 'next/router';
44
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -151,7 +151,7 @@ const Card = ( { cardData } ) => {
151151
passHref
152152
>
153153
<img
154-
className=" max-w-full w-full h-full max-h-96"
154+
className=" max-w-full w-full h-96 max-h-96"
155155
src={ imageSource }
156156
onError={ handleImageError }
157157
alt={ `Card Image - ${ cardData.productName || cardData.name || 'Unknown' }` }

‎components/Yugioh/CardFilter.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ const CardFilter = ( {
113113
</div>
114114
</div>
115115
</div>
116-
<div className="relative mt-6 flex-1 px-4 sm:px-6">
116+
<div className="relative mt-6 flex-1 px-4 ">
117117
<div className="space-y-6">
118118
{ filtersDef.map( filter => (
119119
<div key={ filter.id } className="space-y-3">

‎components/Yugioh/GridView.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard } ) => {
131131
</button>
132132
</div>
133133

134-
<div className="container box-content w-full mx-auto flex flex-wrap flex-row gap-5 sm:grid sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
134+
<div className="container box-content glass sm:px-5 rounded-xl w-full mx-auto flex flex-wrap flex-row gap-5 sm:grid sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
135135

136136

137137

@@ -166,7 +166,7 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard } ) => {
166166
</div>
167167

168168
{/* BACK */ }
169-
<div className="flip-card-back h-full rounded-none p-2 mx-auto cursor-default glass backdrop-opacity-15 text-white text-shadow">
169+
<div className="flip-card-back h-full rounded-none p-2 mx-auto cursor-default glass text-white text-shadow">
170170

171171
<div>
172172
<h3 className="text-xl font-bold text-center">{ card.productName }</h3>
@@ -293,7 +293,7 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard } ) => {
293293
onClick={ () => handleEdit( card._id, 'deleteAmount' ) }
294294
onBlur={ () => handleDelete( card._id, 'deleteAmount' ) }
295295
>
296-
{ editValues[ card._id ]?.deleteAmount || 0 }
296+
{ editValues[ card._id ]?.deleteAmount || 1 }
297297
</span>
298298
) }
299299
</div>

‎components/Yugioh/TableView.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -156,13 +156,13 @@ const TableView = ( { aggregatedData, onDeleteCard, onUpdateCard } ) => {
156156
</span>
157157
) }
158158
</td>
159-
<td className="p-2 text-center border-t border-gray-100 text-xs lg:text-sm sm:text-left text-pretty">{ card?.productName }</td>
159+
<td className="p-2 text-center border-t border-gray-100 text-xs lg:text-sm sm:text-left text-nowrap">{ card?.productName }</td>
160160
<td className="p-2 text-center border-t border-gray-100 text-xs lg:text-sm sm:text-left text-nowrap">{ card?.setName }</td>
161161
<td className="p-2 text-center border-t border-gray-100 text-xs lg:text-sm sm:text-left text-nowrap">{ card?.number }</td>
162-
<td className="p-2 text-center border-t border-gray-100 text-xs lg:text-sm sm:text-left">{ card?.printing }</td>
163-
<td className="p-2 text-center border-t border-gray-100 text-xs lg:text-sm sm:text-left">{ card?.rarity }</td>
162+
<td className="p-2 text-center border-t border-gray-100 text-xs lg:text-sm sm:text-left text-nowrap">{ card?.printing }</td>
163+
<td className="p-2 text-center border-t border-gray-100 text-xs lg:text-sm sm:text-left text-nowrap">{ card?.rarity }</td>
164164
<td className="p-2 text-center border-t border-gray-100 text-xs lg:text-sm sm:text-left text-nowrap">{ card?.condition }</td>
165-
<td className="p-2 text-center border-t border-gray-100 text-xs lg:text-sm sm:text-left">{ card?.marketPrice }</td>
165+
<td className="p-2 text-center border-t border-gray-100 text-xs lg:text-sm sm:text-left text-nowrap">{ card?.marketPrice }</td>
166166
<td className="text-white p-2 flex flex-row items-center gap-2">
167167
<input
168168
type="number"

‎pages/_document.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default function Document() {
99
<meta name="keywords" content="javascript,nextjs,price-tracker,trading-card-game,tailwindcss" />
1010
<meta charSet="UTF-8" />
1111
</Head>
12-
<body className="mx-auto h-full max-w-full">
12+
<body className="mx-auto w-full">
1313
<Main />
1414
<NextScript />
1515
<SpeedInsights />

‎pages/login.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default function LoginPage() {
3939
};
4040

4141
return (
42-
<div className="mt-10 p-5 text-black min-h-screen flex flex-col items-center justify-items-start bg-transparent text-shadow">
42+
<div className="mt-10 p-5 text-black min-h-screen flex flex-col items-center justify-items-start bg-transparent backdrop text-shadow">
4343
<h1 className="text-3xl text-white font-bold mb-6">Login</h1>
4444
<form
4545
id="login-form"

‎pages/yugioh/my-collection.js‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ import dynamic from "next/dynamic";
44
import { useRouter } from "next/router";
55
import { SpeedInsights } from "@vercel/speed-insights/next";
66
import { Grid, List, Loader2, TrendingUp, Trash2, Search } from "lucide-react";
7-
7+
import Notification from '@/components/Notification';
88
import DownloadYugiohCSVButton from "@/components/Yugioh/Buttons/DownloadYugiohCSVButton";
99
import CardFilter from "@/components/Yugioh/CardFilter";
1010
import YugiohPagination from "@/components/Yugioh/YugiohPagination";
1111

1212
const TableView = dynamic( () => import( "@/components/Yugioh/TableView" ), {
1313
ssr: false,
1414
loading: () => (
15-
<div className="py-12 text-center text-lg font-semibold text-white/80">
15+
<div className="mx-auto justify-center items-center py-12 text-center text-lg font-semibold text-white/80">
1616
Loading table...
1717
</div>
1818
),
@@ -21,19 +21,19 @@ const TableView = dynamic( () => import( "@/components/Yugioh/TableView" ), {
2121
const GridView = dynamic( () => import( "@/components/Yugioh/GridView" ), {
2222
ssr: false,
2323
loading: () => (
24-
<div className="py-12 text-center text-lg font-semibold text-white/80">
24+
<div className="mx-auto justify-center items-center py-12 text-center text-lg font-semibold text-white/80">
2525
Loading cards...
2626
</div>
2727
),
2828
} );
2929

30-
const ITEMS_PER_PAGE = 20;
30+
const ITEMS_PER_PAGE = 12;
3131
const DEFAULT_FILTERS = { rarity: [], condition: [], printing: [] };
3232
const DEFAULT_SORT = { key: "number", direction: "ascending" };
3333

3434
const MyCollection = () => {
3535
const router = useRouter();
36-
36+
const [ notification, setNotification ] = useState( { show: false, message: '' } );
3737
const [ cards, setCards ] = useState( [] );
3838
const [ viewMode, setViewMode ] = useState( "grid" );
3939
const [ isAuthenticated, setIsAuthenticated ] = useState( false );
@@ -347,14 +347,15 @@ const MyCollection = () => {
347347
}
348348

349349
if ( !response.ok ) {
350+
setNotification( { show: true, message: 'Card deleted successfully!' } );
350351
throw new Error( "Failed to update card prices." );
351352
}
352353

353354
await refreshCollection();
354355
window.alert( "Prices updated successfully." );
355356
} catch ( error ) {
356357
console.error( "Error updating card prices:", error );
357-
window.alert( "An error occurred while updating prices. Please try again later." );
358+
setNotification( { show: true, message: 'Failed to update card prices! Please try again!' } );
358359
} finally {
359360
setIsUpdatingPrices( false );
360361
}
@@ -407,7 +408,7 @@ const MyCollection = () => {
407408
}
408409

409410
if ( !response.ok ) {
410-
throw new Error( "Failed to delete card" );
411+
setNotification( { show: true, message: 'Failed to delete card!' } );
411412
}
412413

413414
setCards( ( current ) => current.filter( ( card ) => card?._id !== cardId ) );
@@ -501,7 +502,7 @@ const MyCollection = () => {
501502
);
502503
} else {
503504
content = (
504-
<div className="space-y-10 mx-auto min-h-screen yugioh-bg bg-fixed bg-center bg-no-repeat">
505+
<div className="space-y-10 mx-auto h-full max-h-fit overflow-hidden yugioh-bg bg-fixed bg-center bg-no-repeat">
505506
<header className="space-y-6 rounded-3xl border border-white/10 bg-black/30 p-8 backdrop">
506507
<div className="space-y-2">
507508
<h1 className="text-3xl font-bold text-shadow md:text-4xl">My Yu-Gi-Oh! Collection</h1>
@@ -582,7 +583,7 @@ const MyCollection = () => {
582583
</div>
583584
</section>
584585

585-
<section className="rounded-3xl bg-fixed">
586+
<section className="sticky">
586587
{ hasCards ? (
587588
<>
588589
<div className="flex max-h-24 h-fit items-center gap-3">
@@ -660,12 +661,20 @@ const MyCollection = () => {
660661
return (
661662
<>
662663
<Head>
663-
<title>My Collection | Yu-Gi-Oh! Tracker</title>
664+
<title>
665+
My Collection | Yu-Gi-Oh! Tracker
666+
</title>
664667
</Head>
665668

666-
<div className="w-full max-h-max">
667-
<div className="mx-auto">{ content }</div>
669+
670+
<div className="mx-auto h-auto w-full">
671+
{ content }
668672
</div>
673+
<Notification
674+
show={ notification.show }
675+
setShow={ ( show ) => setNotification( ( prev ) => ( { ...prev, show } ) ) }
676+
message={ notification.message }
677+
/>
669678
<SpeedInsights />
670679
</>
671680
);

‎pages/yugioh/sets/[...letter].js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const SetsByLetterPage = () => {
5454

5555
return (
5656
<>
57-
<div className="mx-auto w-full yugioh-bg h-svh">
57+
<div className="mx-auto w-full yugioh-bg h-screen">
5858
<Breadcrumb />
5959
<div>
6060
<h1 className="my-10 text-xl font-black text-shadow">

0 commit comments

Comments
 (0)