Skip to content

Commit 11ec336

Browse files
gottasellemall69gottasellemall69
committed
hh
1 parent 2ec3d0d commit 11ec336

7 files changed

Lines changed: 284 additions & 259 deletions

File tree

‎components/Layout.js‎

Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -21,30 +21,18 @@ export default function Layout( { children } ) {
2121
<div className="fixed inset-0 flex">
2222
<DialogPanel
2323
transition
24-
className="relative mr-16 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-fit 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-16 justify-center pt-5 duration-300 ease-in-out data-closed:opacity-0">
27+
<div className="absolute top-0 left-full flex w-fit 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>
3030
<X title="Close" aria-hidden="true" className="size-7 text-red-600" />
3131
</button>
3232
</div>
3333
</TransitionChild>
3434
<div className="glass backdrop flex grow flex-col gap-y-5 overflow-y-auto pb-2 dark:bg-gray-900 dark:ring dark:ring-white/10 dark:before:pointer-events-none dark:before:absolute dark:before:inset-0 dark:before:bg-black/10">
35-
<div className="relative flex shrink-0 items-start">
36-
<img
37-
alt="Card Price App"
38-
src="images/logo-with-name-side.jpg"
39-
className="h-8 w-auto dark:hidden"
40-
/>
41-
<img
42-
alt="Card Price App"
43-
src="images/logo-with-name-side.jpg"
44-
className="hidden h-8 w-auto dark:block"
45-
/>
46-
</div>
47-
<nav className="relative flex flex-1 flex-col">
35+
<nav className="relative flex flex-1 flex-col mt-10">
4836
<SideNav />
4937
</nav>
5038
</div>
@@ -53,14 +41,7 @@ export default function Layout( { children } ) {
5341
</Dialog>
5442
<div className="glass hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col dark:bg-gray-900">
5543
<div className="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 px-6 dark:border-white/10 dark:bg-black/10">
56-
<div className="flex shrink-0 items-center">
57-
<img
58-
alt="Card Price App"
59-
src="images/logo-with-name-side.jpg"
60-
className="h-16 w-full object-cover rounded bg-fixed bg-clip-padding"
61-
/>
62-
</div>
63-
<nav className="flex flex-1 flex-col">
44+
<nav className="flex flex-1 flex-col mt-10">
6445
<SideNav />
6546
</nav>
6647
</div>

‎components/Navigation/SideNav.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Link from "next/link";
22
import Image from "next/image";
3-
import { useEffect, useState, useMemo } from "react";
3+
import { useEffect, useState, useMemo, useCallback } from "react";
44
import { useRouter } from "next/router";
55

66
const normalizePath = ( path ) => {
@@ -75,7 +75,7 @@ export default function SideNav() {
7575

7676

7777

78-
useMemo( () => {
78+
useEffect( () => {
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-full">
108+
<nav className="mx-auto w-auto">
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 -px-10">
114+
<li key={ item.href } className="navButton max-w-full text-nowrap">
115115
<Link
116116
href={ item.href }
117117
title={ item.title }

‎components/Notification.js‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
"use client";
22
import { useEffect, useState } from "react";
3+
import { createPortal } from "react-dom";
34
import { XMarkIcon } from "@heroicons/react/20/solid";
45

56
const HIDE_DELAY_MS = 2500;
7+
const HIDE_TRANSITION_MS = 200;
68

79
const Notification = ( { show = false, setShow = () => { }, message = "" } ) => {
8-
const [ isVisible, setIsVisible ] = useState( show );
10+
const [ isMounted, setIsMounted ] = useState( false );
11+
const [ isVisible, setIsVisible ] = useState( false );
12+
13+
useEffect( () => {
14+
setIsMounted( true );
15+
return () => setIsMounted( false );
16+
}, [] );
917

1018
useEffect( () => {
1119
if ( show ) {
@@ -17,40 +25,45 @@ const Notification = ( { show = false, setShow = () => { }, message = "" } ) =>
1725
return () => clearTimeout( timer );
1826
}
1927

20-
const hideTimer = setTimeout( () => setIsVisible( false ), 200 );
21-
return () => clearTimeout( hideTimer );
22-
}, [ show, setShow ] );
28+
if ( isVisible ) {
29+
const hideTimer = setTimeout( () => setIsVisible( false ), HIDE_TRANSITION_MS );
30+
return () => clearTimeout( hideTimer );
31+
}
32+
return undefined;
33+
}, [ show, setShow, isVisible ] );
2334

24-
if ( !isVisible && !show ) {
35+
if ( !isMounted || ( !isVisible && !show ) ) {
2536
return null;
2637
}
2738

28-
return (
39+
const toast = (
2940
<div
3041
aria-live="assertive"
31-
className="pointer-events-none fixed inset-0 z-[2000] flex items-center justify-center p-4"
42+
className="pointer-events-none fixed inset-0 z-[2000] flex items-start justify-end px-4 pt-6 pb-4 sm:items-start sm:px-6"
3243
>
3344
<div
34-
className={ `pointer-events-auto w-full max-w-md transform rounded-lg bg-white/10 glass backdrop px-6 py-8 text-white shadow-2xl ring-1 ring-black/20 transition-all duration-200 ${ show ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-3" }` }
45+
className={ `pointer-events-auto w-full max-w-sm transform rounded-2xl glass bg-white backdrop px-6 py-4 text-slate-900 shadow-2xl ring-1 ring-black/20 transition-all duration-200 ${ show ? "translate-y-0 opacity-100" : "-translate-y-3 opacity-0" }` }
3546
role="status"
3647
>
3748
<div className="flex items-start gap-4">
38-
<p className="flex-1 text-base font-semibold leading-6">{ message }</p>
49+
<p className="flex-1 text-lg font-medium leading-6">{ message }</p>
3950
<button
4051
type="button"
41-
className="rounded-md p-1 text-slate-300 transition hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-200 focus-visible:ring-offset-slate-900"
52+
className="rounded-md p-1 text-slate-600 transition hover:text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-200 focus-visible:ring-offset-slate-900"
4253
onClick={ () => {
4354
setIsVisible( false );
4455
setShow( false );
4556
} }
4657
>
4758
<span className="sr-only">Dismiss notification</span>
48-
<XMarkIcon className="h-5 w-5" aria-hidden="true" />
59+
<XMarkIcon className="h-5 w-5 text-red-700/80" aria-hidden="true" />
4960
</button>
5061
</div>
5162
</div>
5263
</div>
5364
);
65+
66+
return createPortal( toast, document.body );
5467
};
5568

5669
export default Notification;

‎components/Yugioh/CardFilter.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -88,12 +88,12 @@ const CardFilter = ( {
8888

8989
<div className="fixed inset-0 overflow-hidden">
9090
<div className="absolute inset-0 overflow-hidden">
91-
<div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
91+
<div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-12 sm:pl-2 glass backdrop">
9292
<DialogPanel
9393
transition
9494
className="pointer-events-auto w-screen max-w-md transform transition duration-500 ease-in-out data-closed:translate-x-full sm:duration-700"
9595
>
96-
<div className="relative flex h-full flex-col overflow-y-auto backdrop glass py-6 shadow-xl dark:bg-gray-800 dark:after:absolute dark:after:inset-y-0 dark:after:left-0 dark:after:w-px dark:after:bg-white/10">
96+
<div className="relative flex h-full flex-col overflow-y-auto py-6 shadow-xl dark:bg-gray-800 dark:after:absolute dark:after:inset-y-0 dark:after:left-0 dark:after:w-px dark:after:bg-white/10">
9797
<div className="px-4 sm:px-6">
9898
<div className="flex items-start justify-between">
9999
<DialogTitle className="text-base font-semibold text-white">
@@ -113,8 +113,8 @@ const CardFilter = ( {
113113
</div>
114114
</div>
115115
</div>
116-
<div className="relative mt-6 flex-1 px-4 sm:px-6 ">
117-
<div className="space-y-6 backdrop">
116+
<div className="relative mt-6 flex-1 px-4 sm:px-6">
117+
<div className="space-y-6">
118118
{ filtersDef.map( filter => (
119119
<div key={ filter.id } className="space-y-3">
120120
<p className="text-sm font-semibold text-white">{ filter.label }</p>

‎components/Yugioh/TableView.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -156,12 +156,12 @@ 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">{ card?.productName }</td>
160-
<td className="p-2 text-center border-t border-gray-100 text-xs lg:text-sm sm:text-left">{ card?.setName }</td>
161-
<td className="p-2 text-center border-t border-gray-100 text-xs lg:text-sm sm:text-left">{ card?.number }</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>
160+
<td className="p-2 text-center border-t border-gray-100 text-xs lg:text-sm sm:text-left text-nowrap">{ card?.setName }</td>
161+
<td className="p-2 text-center border-t border-gray-100 text-xs lg:text-sm sm:text-left text-nowrap">{ card?.number }</td>
162162
<td className="p-2 text-center border-t border-gray-100 text-xs lg:text-sm sm:text-left">{ card?.printing }</td>
163163
<td className="p-2 text-center border-t border-gray-100 text-xs lg:text-sm sm:text-left">{ card?.rarity }</td>
164-
<td className="p-2 text-center border-t border-gray-100 text-xs lg:text-sm sm:text-left">{ card?.condition }</td>
164+
<td className="p-2 text-center border-t border-gray-100 text-xs lg:text-sm sm:text-left text-nowrap">{ card?.condition }</td>
165165
<td className="p-2 text-center border-t border-gray-100 text-xs lg:text-sm sm:text-left">{ card?.marketPrice }</td>
166166
<td className="text-white p-2 flex flex-row items-center gap-2">
167167
<input

‎pages/yugioh/my-collection.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -663,7 +663,7 @@ const MyCollection = () => {
663663
<title>My Collection | Yu-Gi-Oh! Tracker</title>
664664
</Head>
665665

666-
<div className="w-full max-w-7xl">
666+
<div className="w-full max-h-max">
667667
<div className="mx-auto">{ content }</div>
668668
</div>
669669
<SpeedInsights />

0 commit comments

Comments
 (0)