Skip to content

Commit cd9fbae

Browse files
gottasellemall69gottasellemall69
committed
hh
1 parent ba3aad7 commit cd9fbae

25 files changed

Lines changed: 2791 additions & 1100 deletions

‎components/Layout.js‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,20 @@ export default function Layout( { children } ) {
1111
};
1212

1313
return (
14-
<div className="w-full">
15-
16-
17-
<div className="relative flex flex-wrap min-h-screen w-full text-white">
14+
<div className="w-full overflow-x-hidden bg-slate-950 text-white">
15+
<div className="relative flex min-h-screen w-full flex-wrap text-white">
1816
{/* Sidebar */ }
19-
<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' }` }
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+
}` }
2020
>
2121
<div className="glass-strong h-full border-r border-white/20 shadow-xl">
2222
<div className="flex items-center justify-between gap-4 border-b border-white/5 px-5 py-4 backdrop-blur">
23-
<Link className="group flex items-center gap-2 text-lg font-semibold tracking-wide" href="/" passHref>
23+
<Link
24+
className="group flex items-center gap-2 text-lg font-semibold tracking-wide"
25+
href="/"
26+
passHref
27+
>
2428
<span className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-purple-500/10 to-indigo-500/10 text-sm font-bold uppercase shadow-ring">
2529
CPA
2630
</span>
@@ -41,7 +45,7 @@ export default function Layout( { children } ) {
4145
</div>
4246

4347
{/* Main Content */ }
44-
<div className="flex w-full flex-1 flex-col">
48+
<div className="flex w-full flex-1 flex-col overflow-x-hidden">
4549
<header className="sticky top-0 z-30 flex items-center justify-between border-b border-white/50 bg-slate-900/10 px-4 py-3 backdrop-blur lg:hidden">
4650
<Link href="/" passHref className="text-base font-semibold tracking-wide">
4751
<span className="text-shadow backdrop font-semibold">CARD PRICE APP</span>
@@ -55,10 +59,9 @@ export default function Layout( { children } ) {
5559
</button>
5660
</header>
5761

58-
<main className="mx-auto w-full">
59-
<div className="w-full px-4 py-2">
60-
61-
<div className="backdrop text-shadow relative z-10">
62+
<main className="mx-auto w-full max-w-7xl">
63+
<div className="w-full">
64+
<div className="backdrop text-shadow relative p-2">
6265
{ children }
6366
</div>
6467
</div>
@@ -77,3 +80,4 @@ export default function Layout( { children } ) {
7780
</div>
7881
);
7982
}
83+

‎components/Navigation/SideNav.js‎

Lines changed: 26 additions & 25 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 } from "react";
3+
import { useEffect, useState, useMemo } from "react";
44
import { useRouter } from "next/router";
55

66
const normalizePath = ( path ) => {
@@ -64,7 +64,7 @@ export default function SideNav() {
6464
return match?.href ?? NAV_LINKS[ 0 ].href;
6565
} );
6666

67-
useEffect( () => {
67+
useMemo( () => {
6868
const checkAuth = async () => {
6969
try {
7070
const res = await fetch( "/api/auth/validate", {
@@ -102,13 +102,13 @@ export default function SideNav() {
102102
};
103103

104104
return (
105-
<nav className="mx-auto w-[300px] inline-flex max-h-screen flex-col justify-evenly">
105+
<nav className="mx-auto w-[300px] max-h-screen flex-col justify-evenly sm:block">
106106
<ul className="block flex-1 px-2 py-2 gap-3">
107107
{ NAV_LINKS.map( ( item ) => {
108108
const isActive = activeHref === item.href;
109109

110110
return (
111-
<li key={ item.href } className="navButton max-w-fit text-nowrap">
111+
<li key={ item.href } className="navButton max-w-full text-nowrap -px-10">
112112
<Link
113113
href={ item.href }
114114
title={ item.title }
@@ -132,29 +132,30 @@ export default function SideNav() {
132132
</li>
133133
);
134134
} ) }
135+
<div className="mt-6 space-y-3">
136+
{ isAuthenticated ? (
137+
<button
138+
onClick={ handleLogout }
139+
className="mx-auto block w-fit px-24 py-3 rounded-lg border border-white/10 bg-red-500/20 text-sm font-semibold tracking-wide text-red-100 transition hover:bg-red-500/30"
140+
title="Log out"
141+
>
142+
Log Out
143+
</button>
144+
) : (
145+
!isAuthenticated && (
146+
<Link
147+
href="/login"
148+
title="Log in"
149+
className="mx-auto block w-fit px-24 py-3 rounded-lg border border-white/10 bg-white/5 text-center text-sm font-semibold tracking-wide text-white/90 transition hover:bg-white/10"
150+
>
151+
Log In
152+
</Link>
153+
)
154+
) }
155+
</div>
135156
</ul>
136157

137-
<div className="mt-6 space-y-3">
138-
{ isAuthenticated ? (
139-
<button
140-
onClick={ handleLogout }
141-
className="block w-full max-w-prose rounded-lg border border-white/10 bg-red-500/20 px-2 py-2 text-sm font-semibold tracking-wide text-red-100 transition hover:bg-red-500/30"
142-
title="Log out"
143-
>
144-
Log Out
145-
</button>
146-
) : (
147-
!isAuthenticated && (
148-
<Link
149-
href="/login"
150-
title="Log in"
151-
className="block w-full max-w-prose rounded-lg border border-white/10 bg-white/5 px-2 py-2 text-center text-sm font-semibold tracking-wide text-white/90 transition hover:bg-white/10"
152-
>
153-
Log In
154-
</Link>
155-
)
156-
) }
157-
</div>
158+
158159
</nav>
159160
);
160161
}

‎components/Notification.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import React, { useState, useEffect } from 'react';
12
import { XMarkIcon } from '@heroicons/react/20/solid';
2-
import { useEffect } from 'react';
33

44
const Notification = ( { show, setShow, message } ) => {
55
useEffect( () => {
@@ -12,14 +12,14 @@ const Notification = ( { show, setShow, message } ) => {
1212
return (
1313
<div
1414
aria-live="assertive"
15-
className={ `mx-auto mt-24 z-50 pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 transition duration-300 ${ show ? 'opacity-100 translate-y-0 sm:translate-x-0' : 'opacity-0 translate-y-2 sm:translate-y-0 sm:translate-x-2' }` }
15+
className={ `pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 transition duration-300 ${ show ? 'opacity-100 translate-y-0 sm:translate-x-0' : 'opacity-0 translate-y-2 sm:translate-y-0 sm:translate-x-2' }` }
1616
>
17-
<div className=" z-50 flex w-full flex-col items-center space-y-4 sm:items-end">
18-
<div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg backdrop shadow-lg ring-1 ring-black ring-opacity-5">
19-
<div className="glass p-4">
17+
<div className="flex w-full flex-col items-center space-y-4 sm:items-center">
18+
<div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
19+
<div className="p-4">
2020
<div className="flex items-center">
2121
<div className="flex w-0 flex-1 justify-between">
22-
<p className=" w-0 flex-1 text-sm text-text-shadow font-semibold">{ message }</p>
22+
<p className="w-0 flex-1 text-sm font-medium text-gray-900">{ message }</p>
2323
</div>
2424
<div className="ml-4 flex flex-shrink-0">
2525
<button

‎components/Sports/SelectedCardsPanel.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ import { SelectedCard } from '@/types/Card';
33

44
interface SelectedCardsPanelProps {
55
selectedCards: SelectedCard[];
6-
onRemoveCard: (cardId: string) => void;
6+
onRemoveCard: ( cardId: string ) => void;
77
}
88

9-
const SelectedCardsPanel: React.FC<SelectedCardsPanelProps> = ({
9+
const SelectedCardsPanel: React.FC<SelectedCardsPanelProps> = ( {
1010
selectedCards,
1111
onRemoveCard
12-
}) => {
13-
if (selectedCards.length === 0) {
12+
} ) => {
13+
if ( selectedCards.length === 0 ) {
1414
return (
1515
<div className="p-4 text-center text-white">
1616
No cards selected
@@ -19,30 +19,30 @@ const SelectedCardsPanel: React.FC<SelectedCardsPanelProps> = ({
1919
}
2020

2121
return (
22-
<div className="bg-transparent rounded-lg p-4 mb-4">
22+
<div className=" rounded-lg p-4 mb-4">
2323
<h2 className="text-xl font-bold text-white mb-4">Selected Cards</h2>
2424
<div className="space-y-2">
25-
{selectedCards.map((card) => (
25+
{selectedCards.map( ( card ) => (
2626
<div
2727
key={card.id}
28-
className="flex items-center justify-between bg-transparent glass rounded p-2"
28+
className="flex items-center justify-between bg-zinc-900 rounded p-2"
2929
>
30-
<div className="flex-1">
30+
<div className="flex-1 backdrop text-shadow glass-card ">
3131
<p className="text-white">{card.productName}</p>
32-
<div className="text-sm text-gray-300 grid grid-cols-3 gap-2">
32+
<div className="text-sm text-gray-900 grid grid-cols-3 gap-2">
3333
<span>Ungraded: {card.price1}</span>
3434
<span>PSA 9: {card.price3}</span>
3535
<span>PSA 10: {card.price2}</span>
3636
</div>
3737
</div>
3838
<button
39-
onClick={() => onRemoveCard(card.id)}
39+
onClick={() => onRemoveCard( card.id )}
4040
className="ml-2 px-2 py-1 text-red-400 hover:text-red-300"
4141
>
4242
✕
4343
</button>
4444
</div>
45-
))}
45+
) )}
4646
</div>
4747
</div>
4848
);

0 commit comments

Comments
 (0)