Skip to content

Commit afb617a

Browse files
NovaFox161NovaFox161
committed
Get pages loading now due to link changes in upgrade
1 parent a49ab38 commit afb617a

File tree

3 files changed

+221
-182
lines changed

3 files changed

+221
-182
lines changed

‎components/footer.tsx

Lines changed: 82 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -57,94 +57,107 @@ const navigation = {
5757

5858

5959
function Branding() {
60-
return <div className="space-y-8 xl:col-span-1">
61-
<img
62-
className="h-10"
63-
src="/logos/light/transparent/logo-type.png"
64-
alt="DisCal Bot"
65-
/>
66-
<p className="text-white text-base">
67-
The ultimate Discord calendar bot.
68-
</p>
69-
<div className="flex space-x-6">
70-
{navigation.social.map((item) => (
71-
<Link key={item.name} href={item.href}>
72-
<a className="text-discord-greyple hover:text-discal-blue">
60+
return (
61+
<div className="space-y-8 xl:col-span-1">
62+
<img
63+
className="h-10"
64+
src="/logos/light/transparent/logo-type.png"
65+
alt="DisCal Bot"
66+
/>
67+
<p className="text-white text-base">
68+
The ultimate Discord calendar bot.
69+
</p>
70+
<div className="flex space-x-6">
71+
{navigation.social.map((item) => (
72+
<Link
73+
key={item.name}
74+
href={item.href}
75+
className="text-discord-greyple hover:text-discal-blue">
76+
7377
<span className="sr-only">{item.name}</span>
7478
<item.icon className={"h-6 w-6"} aria-hidden="true"/>
75-
</a>
76-
</Link>
77-
))}
79+
80+
</Link>
81+
))}
82+
</div>
7883
</div>
79-
</div>
84+
);
8085
}
8186

8287
function DiscalSection() {
83-
return <div>
84-
<h3 className="text-sm font-semibold text-white tracking-wider uppercase">DisCal</h3>
85-
<ul role="list" className="mt-4 space-y-4">
86-
{navigation.discal.map((item) => (
87-
<li key={item.name}>
88-
<Link href={item.href}>
89-
<a className="text-base text-discord-greyple hover:text-discal-blue">
88+
return (
89+
<div>
90+
<h3 className="text-sm font-semibold text-white tracking-wider uppercase">DisCal</h3>
91+
<ul role="list" className="mt-4 space-y-4">
92+
{navigation.discal.map((item) => (
93+
<li key={item.name}>
94+
<Link
95+
href={item.href}
96+
className="text-base text-discord-greyple hover:text-discal-blue">
9097
{item.name}
91-
</a>
92-
</Link>
93-
</li>
94-
))}
95-
</ul>
96-
</div>
98+
</Link>
99+
</li>
100+
))}
101+
</ul>
102+
</div>
103+
);
97104
}
98105

99106
function DevelopersSection() {
100-
return <div className="mt-12 md:mt-0">
101-
<h3 className="text-sm font-semibold text-white tracking-wider uppercase">Developers</h3>
102-
<ul role="list" className="mt-4 space-y-4">
103-
{navigation.developers.map((item) => (
104-
<li key={item.name}>
105-
<Link href={item.href}>
106-
<a className="text-base text-discord-greyple hover:text-discal-blue">
107+
return (
108+
<div className="mt-12 md:mt-0">
109+
<h3 className="text-sm font-semibold text-white tracking-wider uppercase">Developers</h3>
110+
<ul role="list" className="mt-4 space-y-4">
111+
{navigation.developers.map((item) => (
112+
<li key={item.name}>
113+
<Link
114+
href={item.href}
115+
className="text-base text-discord-greyple hover:text-discal-blue">
107116
{item.name}
108-
</a>
109-
</Link>
110-
</li>
111-
))}
112-
</ul>
113-
</div>
117+
</Link>
118+
</li>
119+
))}
120+
</ul>
121+
</div>
122+
);
114123
}
115124

116125
function CompanySection() {
117-
return <div>
118-
<h3 className="text-sm font-semibold text-white tracking-wider uppercase">Company</h3>
119-
<ul role="list" className="mt-4 space-y-4">
120-
{navigation.company.map((item) => (
121-
<li key={item.name}>
122-
<Link href={item.href}>
123-
<a className="text-base text-discord-greyple hover:text-discal-blue">
126+
return (
127+
<div>
128+
<h3 className="text-sm font-semibold text-white tracking-wider uppercase">Company</h3>
129+
<ul role="list" className="mt-4 space-y-4">
130+
{navigation.company.map((item) => (
131+
<li key={item.name}>
132+
<Link
133+
href={item.href}
134+
className="text-base text-discord-greyple hover:text-discal-blue">
124135
{item.name}
125-
</a>
126-
</Link>
127-
</li>
128-
))}
129-
</ul>
130-
</div>
136+
</Link>
137+
</li>
138+
))}
139+
</ul>
140+
</div>
141+
);
131142
}
132143

133144
function LegalSection() {
134-
return <div className="mt-12 md:mt-0">
135-
<h3 className="text-sm font-semibold text-white tracking-wider uppercase">Legal</h3>
136-
<ul role="list" className="mt-4 space-y-4">
137-
{navigation.legal.map((item) => (
138-
<li key={item.name}>
139-
<Link href={item.href}>
140-
<a className="text-base text-discord-greyple hover:text-discal-blue">
145+
return (
146+
<div className="mt-12 md:mt-0">
147+
<h3 className="text-sm font-semibold text-white tracking-wider uppercase">Legal</h3>
148+
<ul role="list" className="mt-4 space-y-4">
149+
{navigation.legal.map((item) => (
150+
<li key={item.name}>
151+
<Link
152+
href={item.href}
153+
className="text-base text-discord-greyple hover:text-discal-blue">
141154
{item.name}
142-
</a>
143-
</Link>
144-
</li>
145-
))}
146-
</ul>
147-
</div>
155+
</Link>
156+
</li>
157+
))}
158+
</ul>
159+
</div>
160+
);
148161
}
149162

150163
function LinksBlock() {

‎components/navbar.tsx

Lines changed: 103 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -40,42 +40,45 @@ export default function Navbar() {
4040
}
4141

4242
function BrandingImage() {
43-
return <div className="flex-shrink-0 flex items-center">
44-
<Link href={"/"}>
45-
<img
46-
className="block lg:hidden h-8 w-auto"
47-
src="/logos/dark/transparent/logo.png"
48-
alt="DisCal"
49-
/>
50-
<img
51-
className="hidden lg:block h-8 w-auto"
52-
src="/logos/dark/transparent/logo-type.png"
53-
alt="DisCal"
54-
/>
55-
<span className="sr-only">Homepage</span>
56-
</Link>
57-
</div>
43+
return (
44+
<div className="flex-shrink-0 flex items-center">
45+
<Link href={"/"}>
46+
<img
47+
className="block lg:hidden h-8 w-auto"
48+
src="/logos/dark/transparent/logo.png"
49+
alt="DisCal"
50+
/>
51+
<img
52+
className="hidden lg:block h-8 w-auto"
53+
src="/logos/dark/transparent/logo-type.png"
54+
alt="DisCal"
55+
/>
56+
<span className="sr-only">Homepage</span>
57+
</Link>
58+
</div>
59+
);
5860
}
5961

6062
function DesktopNavigationItems() {
61-
return <div className="hidden sm:block sm:ml-6">
62-
<div className="flex space-x-4">
63-
{navigation.map((item) => (
64-
<Link href={item.href} key={item.name}>
65-
<a
63+
return (
64+
<div className="hidden sm:block sm:ml-6">
65+
<div className="flex space-x-4">
66+
{navigation.map((item) => (
67+
<Link
68+
href={item.href}
69+
key={item.name}
6670
className={classNames(
6771
currentPage(router, item.href) ? 'bg-discal-dark-blue text-white' :
6872
'text-white hover:bg-discal-dark-grey hover:text-white',
6973
'px-3 py-2 rounded-md text-sm font-medium'
7074
)}
71-
aria-current={currentPage(router, item.href) ? 'page' : undefined}
72-
>
75+
aria-current={currentPage(router, item.href) ? 'page' : undefined}>
7376
{item.name}
74-
</a>
75-
</Link>
76-
))}
77+
</Link>
78+
))}
79+
</div>
7780
</div>
78-
</div>
81+
);
7982
}
8083

8184
function SupportButton() {
@@ -89,75 +92,86 @@ export default function Navbar() {
8992
}
9093

9194
function LoginButton(): JSX.Element {
92-
return <Link href="/login">
93-
<a className="bg-discal-dark-blue text-white px-3 py-2 rounded-md text-sm font-medium"
94-
onClick={() => saveToLocalStorage("previous_page", window.location.href)}>
95-
Login
96-
</a>
97-
</Link>
95+
return (
96+
<Link
97+
href="/login"
98+
className="bg-discal-dark-blue text-white px-3 py-2 rounded-md text-sm font-medium"
99+
onClick={() => saveToLocalStorage("previous_page", window.location.href)}>
100+
101+
Login
102+
103+
</Link>
104+
);
98105
}
99106

100107
function ProfileDropdown(props: {user: User}): JSX.Element {
101-
return <Menu as="div" className="ml-3 relative">
102-
<div>
103-
<Menu.Button
104-
className="bg-discal-dark-blue flex text-sm rounded-full focus:outline-none focus:ring-2
105-
focus:ring-offset-2 focus:ring-offset-discal-dark-grey focus:ring-white">
106-
<span className="sr-only">Open user menu</span>
107-
<img className="h-8 w-8 rounded-full"
108-
src={props.user.avatar}
109-
alt="Profile Photo"
110-
/>
111-
</Menu.Button>
112-
</div>
113-
<Transition
114-
as={Fragment}
115-
enter="transition ease-out duration-100"
116-
enterFrom="opacity-0 scale-95"
117-
enterTo="opacity-100 scale-100"
118-
leave="transition ease-in duration-75"
119-
leaveFrom="opacity-100 scale-100"
120-
leaveTo="opacity-0 scale-95"
121-
>
122-
<Menu.Items className="z-[999] origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1
123-
bg-discord-not-quite-black ring-1 ring-black ring-opacity-5 focus:outline-none">
124-
<Menu.Item>
125-
<p className="block px-4 py-2 text-sm text-discal-light-grey">
126-
{props.user.username}#{props.user.discriminator}
127-
</p>
128-
</Menu.Item>
129-
<Menu.Item>
130-
<Link href='/logout'>
131-
<a role={"button"} className="block px-4 py-2 text-sm text-discal-red">
132-
Sign out
133-
</a>
134-
</Link>
135-
</Menu.Item>
136-
</Menu.Items>
137-
</Transition>
138-
</Menu>
108+
return (
109+
<Menu as="div" className="ml-3 relative">
110+
<div>
111+
<Menu.Button
112+
className="bg-discal-dark-blue flex text-sm rounded-full focus:outline-none focus:ring-2
113+
focus:ring-offset-2 focus:ring-offset-discal-dark-grey focus:ring-white">
114+
<span className="sr-only">Open user menu</span>
115+
<img className="h-8 w-8 rounded-full"
116+
src={props.user.avatar}
117+
alt="Profile Photo"
118+
/>
119+
</Menu.Button>
120+
</div>
121+
<Transition
122+
as={Fragment}
123+
enter="transition ease-out duration-100"
124+
enterFrom="opacity-0 scale-95"
125+
enterTo="opacity-100 scale-100"
126+
leave="transition ease-in duration-75"
127+
leaveFrom="opacity-100 scale-100"
128+
leaveTo="opacity-0 scale-95"
129+
>
130+
<Menu.Items className="z-[999] origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1
131+
bg-discord-not-quite-black ring-1 ring-black ring-opacity-5 focus:outline-none">
132+
<Menu.Item>
133+
<p className="block px-4 py-2 text-sm text-discal-light-grey">
134+
{props.user.username}#{props.user.discriminator}
135+
</p>
136+
</Menu.Item>
137+
<Menu.Item>
138+
<Link
139+
href='/logout'
140+
role={"button"}
141+
className="block px-4 py-2 text-sm text-discal-red">
142+
143+
Sign out
144+
145+
</Link>
146+
</Menu.Item>
147+
</Menu.Items>
148+
</Transition>
149+
</Menu>
150+
);
139151
}
140152

141153
function MobileDropdownNav(): JSX.Element {
142-
return <Disclosure.Panel className="sm:hidden" onClick={() => setOpen(!open)}>
143-
<div className="px-2 pt-2 pb-3 space-y-1">
144-
{navigation.map((item) => (
145-
<Link href={item.href} key={item.name} passHref>
146-
<Disclosure.Button
147-
as="a"
148-
className={classNames(
149-
currentPage(router, item.href) ? 'bg-discal-dark-blue text-white' :
150-
'text-white hover:bg-discal-dark-grey hover:text-white',
151-
'block px-3 py-2 rounded-md text-base font-medium'
152-
)}
153-
aria-current={currentPage(router, item.href) ? 'page' : undefined}
154-
>
155-
{item.name}
156-
</Disclosure.Button>
157-
</Link>
158-
))}
159-
</div>
160-
</Disclosure.Panel>
154+
return (
155+
<Disclosure.Panel className="sm:hidden" onClick={() => setOpen(!open)}>
156+
<div className="px-2 pt-2 pb-3 space-y-1">
157+
{navigation.map((item) => (
158+
<Link href={item.href} key={item.name} passHref legacyBehavior>
159+
<Disclosure.Button
160+
as="a"
161+
className={classNames(
162+
currentPage(router, item.href) ? 'bg-discal-dark-blue text-white' :
163+
'text-white hover:bg-discal-dark-grey hover:text-white',
164+
'block px-3 py-2 rounded-md text-base font-medium'
165+
)}
166+
aria-current={currentPage(router, item.href) ? 'page' : undefined}
167+
>
168+
{item.name}
169+
</Disclosure.Button>
170+
</Link>
171+
))}
172+
</div>
173+
</Disclosure.Panel>
174+
);
161175
}
162176

163177
return <Disclosure as="nav" className="bg-discal-blue">

0 commit comments

Comments
 (0)