From 0f38ca644e3cc1344f40b1bce5e27f196172cedc Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Sun, 28 Jul 2024 11:31:43 -0500 Subject: [PATCH] Add toast --- app/layout.tsx | 10 +++++++-- app/product/[handle]/page.tsx | 2 +- components/layout/footer.tsx | 4 +++- components/layout/navbar/index.tsx | 2 +- components/welcome-toast.tsx | 36 ++++++++++++++++++++++++++++++ package.json | 3 ++- pnpm-lock.yaml | 14 ++++++++++++ 7 files changed, 65 insertions(+), 6 deletions(-) create mode 100644 components/welcome-toast.tsx diff --git a/app/layout.tsx b/app/layout.tsx index f11923b52..3b09ab7e4 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,10 +1,12 @@ import { CartProvider } from 'components/cart/cart-context'; -import Navbar from 'components/layout/navbar'; +import { Navbar } from 'components/layout/navbar'; +import { WelcomeToast } from 'components/welcome-toast'; import { GeistSans } from 'geist/font/sans'; import { getCart } from 'lib/shopify'; import { ensureStartsWith } from 'lib/utils'; import { cookies } from 'next/headers'; import { ReactNode } from 'react'; +import { Toaster } from 'sonner'; import './globals.css'; const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env; @@ -44,7 +46,11 @@ export default async function RootLayout({ children }: { children: ReactNode }) -
{children}
+
+ {children} + + +
diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx index 8b2d5c2cf..dd964ccf5 100644 --- a/app/product/[handle]/page.tsx +++ b/app/product/[handle]/page.tsx @@ -88,7 +88,7 @@ export default async function ProductPage({ params }: { params: { handle: string } > ({ + images={product.images.slice(0, 5).map((image: Image) => ({ src: image.url, altText: image.altText }))} diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx index ef1b1e8c7..1759d1ea6 100644 --- a/components/layout/footer.tsx +++ b/components/layout/footer.tsx @@ -56,7 +56,9 @@ export default async function Footer() { {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved.

-

Designed in California

+

+ View the source +

Crafted by ▲ Vercel diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx index c10ba8c43..6c7f3dead 100644 --- a/components/layout/navbar/index.tsx +++ b/components/layout/navbar/index.tsx @@ -9,7 +9,7 @@ import Search, { SearchSkeleton } from './search'; const { SITE_NAME } = process.env; -export default async function Navbar() { +export async function Navbar() { const menu = await getMenu('next-js-frontend-header-menu'); return ( diff --git a/components/welcome-toast.tsx b/components/welcome-toast.tsx new file mode 100644 index 000000000..c8ecba372 --- /dev/null +++ b/components/welcome-toast.tsx @@ -0,0 +1,36 @@ +'use client'; + +import { useEffect } from 'react'; +import { toast } from 'sonner'; + +export function WelcomeToast() { + useEffect(() => { + // ignore if screen height is too small + if (window.innerHeight < 650) return; + if (!document.cookie.includes('welcome-toast=2')) { + console.log('Welcome to Next.js Commerce!'); + toast('🛍️ Welcome to Next.js Commerce!', { + id: 'welcome-toast', + duration: Infinity, + onDismiss: () => { + document.cookie += 'welcome-toast=2;max-age=31536000'; + }, + description: ( + <> + This is a high-performance, SSR storefront powered by Shopify, Next.js, and Vercel.{' '} + + Get the Source + + . + + ) + }); + } + }, []); + + return null; +} diff --git a/package.json b/package.json index 7f65c1cf6..71d33f9e5 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,8 @@ "geist": "^1.3.1", "next": "14.2.5", "react": "18.3.1", - "react-dom": "18.3.1" + "react-dom": "18.3.1", + "sonner": "^1.5.0" }, "devDependencies": { "@tailwindcss/container-queries": "^0.1.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3275538eb..9163eb23b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,6 +29,9 @@ importers: react-dom: specifier: 18.3.1 version: 18.3.1(react@18.3.1) + sonner: + specifier: ^1.5.0 + version: 1.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) devDependencies: '@tailwindcss/container-queries': specifier: ^0.1.1 @@ -749,6 +752,12 @@ packages: resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==} engines: {node: '>=14'} + sonner@1.5.0: + resolution: {integrity: sha512-FBjhG/gnnbN6FY0jaNnqZOMmB73R+5IiyYAw8yBj7L54ER7HB3fOSE5OFiQiE2iXWxeXKvg6fIP4LtVppHEdJA==} + peerDependencies: + react: ^18.0.0 + react-dom: ^18.0.0 + source-map-js@1.2.0: resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==} engines: {node: '>=0.10.0'} @@ -1435,6 +1444,11 @@ snapshots: signal-exit@4.1.0: {} + sonner@1.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + source-map-js@1.2.0: {} streamsearch@1.1.0: {}