Skip to content

Commit 1a65397

Browse files
leerobleerob
authored
Update dependencies. (vercel#1314)
1 parent 2347c52 commit 1a65397

File tree

14 files changed

+1089
-784
lines changed

14 files changed

+1089
-784
lines changed

‎app/error.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
export default function Error({ reset }: { reset: () => void }) {
44
return (
5-
<div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12">
5+
<div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12 dark:border-neutral-800 dark:bg-black">
66
<h2 className="text-xl font-bold">Oh no!</h2>
77
<p className="my-2">
88
There was an issue with our storefront. This could be a temporary issue, please try your

‎app/product/[handle]/page.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -82,14 +82,20 @@ export default async function ProductPage({ params }: { params: { handle: string
8282
}}
8383
/>
8484
<div className="mx-auto max-w-screen-2xl px-4">
85-
<div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8">
85+
<div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12 lg:flex-row lg:gap-8 dark:border-neutral-800 dark:bg-black">
8686
<div className="h-full w-full basis-full lg:basis-4/6">
87-
<Gallery
88-
images={product.images.map((image: Image) => ({
89-
src: image.url,
90-
altText: image.altText
91-
}))}
92-
/>
87+
<Suspense
88+
fallback={
89+
<div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden" />
90+
}
91+
>
92+
<Gallery
93+
images={product.images.map((image: Image) => ({
94+
src: image.url,
95+
altText: image.altText
96+
}))}
97+
/>
98+
</Suspense>
9399
</div>
94100

95101
<div className="basis-full lg:basis-2/6">

‎app/search/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Suspense } from 'react';
77
export default function SearchLayout({ children }: { children: React.ReactNode }) {
88
return (
99
<Suspense>
10-
<div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row">
10+
<div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black md:flex-row dark:text-white">
1111
<div className="order-first w-full flex-none md:max-w-[125px]">
1212
<Collections />
1313
</div>

‎components/cart/modal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
6464
leaveFrom="translate-x-0"
6565
leaveTo="translate-x-full"
6666
>
67-
<Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl dark:border-neutral-700 dark:bg-black/80 dark:text-white md:w-[390px]">
67+
<Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl md:w-[390px] dark:border-neutral-700 dark:bg-black/80 dark:text-white">
6868
<div className="flex items-center justify-between">
6969
<p className="text-lg font-semibold">My Cart</p>
7070

‎components/layout/footer-menu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const FooterMenuItem = ({ item }: { item: Menu }) => {
1919
<Link
2020
href={item.path}
2121
className={clsx(
22-
'block p-2 text-lg underline-offset-4 hover:text-black hover:underline dark:hover:text-neutral-300 md:inline-block md:text-sm',
22+
'block p-2 text-lg underline-offset-4 hover:text-black hover:underline md:inline-block md:text-sm dark:hover:text-neutral-300',
2323
{
2424
'text-black dark:text-neutral-300': active
2525
}

‎components/layout/footer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ export default async function Footer() {
1616

1717
return (
1818
<footer className="text-sm text-neutral-500 dark:text-neutral-400">
19-
<div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm dark:border-neutral-700 md:flex-row md:gap-12 md:px-4 min-[1320px]:px-0">
19+
<div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm md:flex-row md:gap-12 md:px-4 min-[1320px]:px-0 dark:border-neutral-700">
2020
<div>
21-
<Link className="flex items-center gap-2 text-black dark:text-white md:pt-1" href="/">
21+
<Link className="flex items-center gap-2 text-black md:pt-1 dark:text-white" href="/">
2222
<LogoSquare size="sm" />
2323
<span className="uppercase">{SITE_NAME}</span>
2424
</Link>

‎components/layout/navbar/index.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Menu } from 'lib/shopify/types';
66
import Link from 'next/link';
77
import { Suspense } from 'react';
88
import MobileMenu from './mobile-menu';
9-
import Search from './search';
9+
import Search, { SearchSkeleton } from './search';
1010
const { SITE_NAME } = process.env;
1111

1212
export default async function Navbar() {
@@ -15,7 +15,9 @@ export default async function Navbar() {
1515
return (
1616
<nav className="relative flex items-center justify-between p-4 lg:px-6">
1717
<div className="block flex-none md:hidden">
18-
<MobileMenu menu={menu} />
18+
<Suspense fallback={null}>
19+
<MobileMenu menu={menu} />
20+
</Suspense>
1921
</div>
2022
<div className="flex w-full items-center">
2123
<div className="flex w-full md:w-1/3">
@@ -41,7 +43,9 @@ export default async function Navbar() {
4143
) : null}
4244
</div>
4345
<div className="hidden justify-center md:flex md:w-1/3">
44-
<Search />
46+
<Suspense fallback={<SearchSkeleton />}>
47+
<Search />
48+
</Suspense>
4549
</div>
4650
<div className="flex justify-end md:w-1/3">
4751
<Suspense fallback={<OpenCart />}>

‎components/layout/navbar/mobile-menu.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
import { Dialog, Transition } from '@headlessui/react';
44
import Link from 'next/link';
55
import { usePathname, useSearchParams } from 'next/navigation';
6-
import { Fragment, useEffect, useState } from 'react';
6+
import { Fragment, Suspense, useEffect, useState } from 'react';
77

88
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
99
import { Menu } from 'lib/shopify/types';
10-
import Search from './search';
10+
import Search, { SearchSkeleton } from './search';
1111

1212
export default function MobileMenu({ menu }: { menu: Menu[] }) {
1313
const pathname = usePathname();
@@ -35,7 +35,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
3535
<button
3636
onClick={openMobileMenu}
3737
aria-label="Open mobile menu"
38-
className="flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white md:hidden"
38+
className="flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors md:hidden dark:border-neutral-700 dark:text-white"
3939
>
4040
<Bars3Icon className="h-4" />
4141
</button>
@@ -72,7 +72,9 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
7272
</button>
7373

7474
<div className="mb-4 w-full">
75-
<Search />
75+
<Suspense fallback={<SearchSkeleton />}>
76+
<Search />
77+
</Suspense>
7678
</div>
7779
{menu.length ? (
7880
<ul className="flex w-full flex-col">

‎components/layout/navbar/search.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,17 @@ export default function Search() {
4141
</form>
4242
);
4343
}
44+
45+
export function SearchSkeleton() {
46+
return (
47+
<form className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
48+
<input
49+
placeholder="Search for products..."
50+
className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-neutral-500 dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
51+
/>
52+
<div className="absolute right-0 top-0 mr-3 flex h-full items-center">
53+
<MagnifyingGlassIcon className="h-4" />
54+
</div>
55+
</form>
56+
);
57+
}

‎components/layout/search/filter/index.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { SortFilterItem } from 'lib/constants';
2+
import { Suspense } from 'react';
23
import FilterItemDropdown from './dropdown';
34
import { FilterItem } from './item';
45

@@ -20,15 +21,19 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
2021
<>
2122
<nav>
2223
{title ? (
23-
<h3 className="hidden text-xs text-neutral-500 dark:text-neutral-400 md:block">
24+
<h3 className="hidden text-xs text-neutral-500 md:block dark:text-neutral-400">
2425
{title}
2526
</h3>
2627
) : null}
2728
<ul className="hidden md:block">
28-
<FilterItemList list={list} />
29+
<Suspense fallback={null}>
30+
<FilterItemList list={list} />
31+
</Suspense>{' '}
2932
</ul>
3033
<ul className="md:hidden">
31-
<FilterItemDropdown list={list} />
34+
<Suspense fallback={null}>
35+
<FilterItemDropdown list={list} />
36+
</Suspense>{' '}
3237
</ul>
3338
</nav>
3439
</>

0 commit comments

Comments
 (0)