Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

conditional load react scan #79

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
134 changes: 134 additions & 0 deletions src/app/(scan)/scan/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
import type { Metadata } from "next";
import "@/app/(app)/globals.css";
import { SearchDropdownComponent } from "@/components/search-dropdown";
import { MenuIcon } from "lucide-react";
import { Suspense } from "react";
import { Cart } from "@/components/cart";
import { Link } from "@/components/ui/link";
import { Analytics } from "@vercel/analytics/react";
import { Toaster } from "sonner";
import { GeistSans } from "geist/font/sans";
import { GeistMono } from "geist/font/mono";
import { AuthServer } from "@/app/(app)/auth.server";
import { WelcomeToast } from "@/app/(app)/welcome-toast";

export const metadata: Metadata = {
title: {
template: "%s | NextFaster",
default: "NextFaster",
},
description: "A performant site built with Next.js",
};

export const revalidate = 86400; // One day

export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" className="h-full">
<head>
<script src="https://unpkg.com/react-scan/dist/auto.global.js" async />
</head>
<body
className={`${GeistSans.variable} ${GeistMono.variable} flex flex-col overflow-y-auto overflow-x-hidden antialiased`}
>
<div>
<header className="fixed top-0 z-10 flex h-[90px] w-[100vw] flex-grow items-center justify-between border-b-2 border-accent2 bg-background p-2 pb-[4px] pt-2 sm:h-[70px] sm:flex-row sm:gap-4 sm:p-4 sm:pb-[4px] sm:pt-0">
<div className="flex flex-grow flex-col">
<div className="absolute right-2 top-2 flex justify-end pt-2 font-sans text-sm hover:underline sm:relative sm:right-0 sm:top-0">
<Suspense
fallback={
<button className="flex flex-row items-center gap-1">
<div className="h-[20px]" />
<svg viewBox="0 0 10 6" className="h-[6px] w-[10px]">
<polygon points="0,0 5,6 10,0"></polygon>
</svg>
</button>
}
>
<AuthServer />
</Suspense>
</div>
<div className="flex w-full flex-col items-start justify-center sm:w-auto sm:flex-row sm:items-center sm:gap-2">
<Link
prefetch={true}
href="/"
className="text-4xl font-bold text-accent1"
>
NextFaster
</Link>
<div className="items flex w-full flex-row items-center justify-between gap-4">
<div className="mx-0 flex-grow sm:mx-auto sm:flex-grow-0">
<SearchDropdownComponent />
</div>
<div className="flex flex-row justify-between space-x-4">
<div className="relative">
<Link
prefetch={true}
href="/order"
className="text-lg text-accent1 hover:underline"
>
ORDER
</Link>
<Suspense>
<Cart />
</Suspense>
</div>
<Link
prefetch={true}
href="/order-history"
className="hidden text-lg text-accent1 hover:underline md:block"
>
ORDER HISTORY
</Link>
<Link
prefetch={true}
href="/order-history"
aria-label="Order History"
className="block text-lg text-accent1 hover:underline md:hidden"
>
<MenuIcon />
</Link>
</div>
</div>
</div>
</div>
</header>
<div className="pt-[85px] sm:pt-[70px]">{children}</div>
</div>
<footer className="fixed bottom-0 flex h-12 w-screen flex-col items-center justify-between space-y-2 border-t border-gray-400 bg-background px-4 font-sans text-[11px] sm:h-6 sm:flex-row sm:space-y-0">
<div className="flex flex-wrap justify-center space-x-2 pt-2 sm:justify-start">
<span className="hover:bg-accent2 hover:underline">Home</span>
<span>|</span>
<span className="hover:bg-accent2 hover:underline">FAQ</span>
<span>|</span>
<span className="hover:bg-accent2 hover:underline">Returns</span>
<span>|</span>
<span className="hover:bg-accent2 hover:underline">Careers</span>
<span>|</span>
<span className="hover:bg-accent2 hover:underline">Contact</span>
</div>
<div className="text-center sm:text-right">
By using this website, you agree to check out the{" "}
<Link
href="https://github.com/ethanniser/NextFaster"
className="font-bold text-accent1 hover:underline"
target="_blank"
>
Source Code
</Link>
</div>
</footer>
{/* does putting this in suspense do anything? */}
<Suspense fallback={null}>
<Toaster closeButton />
<WelcomeToast />
</Suspense>
<Analytics scriptSrc="/insights/events.js" endpoint="/hfi/events" />
</body>
</html>
);
}
7 changes: 0 additions & 7 deletions src/app/scan/page.tsx → src/app/(scan)/scan/page.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,8 @@
"use client";

import { scan } from "react-scan"; // import this BEFORE react
import React from "react";
import Link from "next/link";

if (typeof window !== "undefined") {
scan({
enabled: true,
});
}

export default function ScanPage() {
return (
<div className="flex h-screen flex-col items-center justify-center">
Expand Down
Loading