create-nextblock 0.16.3 → 0.17.0

package/templates/nextblock-template/components/DeferredGlobalSearch.tsx

@@ -1,68 +1,68 @@
-"use client";
-
-import dynamic from "next/dynamic";
-import { Search } from "lucide-react";
-import { useEffect, useState } from "react";
-import { Button } from "@nextblock-cms/ui";
-import { cn } from "@nextblock-cms/utils";
-
-type TriggerVariant = "desktop" | "mobile";
-
-interface DeferredGlobalSearchProps {
-  isEcommerceActive: boolean;
-  variant: TriggerVariant;
-}
-
-const GlobalSearch = dynamic(() => import("./GlobalSearch"), {
-  ssr: false,
-  loading: () => null,
-});
-
-export function DeferredGlobalSearch(props: DeferredGlobalSearchProps) {
-  const [shouldLoad, setShouldLoad] = useState(false);
-  const [openOnMount, setOpenOnMount] = useState(false);
-
-  const openSearch = () => {
-    setOpenOnMount(true);
-    setShouldLoad(true);
-  };
-
-  useEffect(() => {
-    if (props.variant !== "desktop") {
-      return;
-    }
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
-        event.preventDefault();
-        openSearch();
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [props.variant]);
-
-  if (shouldLoad) {
-    return <GlobalSearch {...props} openOnMount={openOnMount} />;
-  }
-
-  return (
-    <Button
-      type="button"
-      variant="outline"
-      size={props.variant === "mobile" ? "icon" : "default"}
-      className={cn(
-        "shrink-0 border-foreground/15 bg-background/70",
-        props.variant === "desktop" && "h-9 gap-2 px-3 text-sm",
-        props.variant === "mobile" && "h-10 w-10"
-      )}
-      aria-label="Search"
-      aria-keyshortcuts="Control+K Meta+K"
-      onClick={openSearch}
-    >
-      <Search className="h-4 w-4" />
-      {props.variant === "desktop" ? <span>Search</span> : null}
-    </Button>
-  );
-}
+"use client";
+
+import dynamic from "next/dynamic";
+import { Search } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "@nextblock-cms/ui";
+import { cn } from "@nextblock-cms/utils";
+
+type TriggerVariant = "desktop" | "mobile";
+
+interface DeferredGlobalSearchProps {
+  isEcommerceActive: boolean;
+  variant: TriggerVariant;
+}
+
+const GlobalSearch = dynamic(() => import("./GlobalSearch"), {
+  ssr: false,
+  loading: () => null,
+});
+
+export function DeferredGlobalSearch(props: DeferredGlobalSearchProps) {
+  const [shouldLoad, setShouldLoad] = useState(false);
+  const [openOnMount, setOpenOnMount] = useState(false);
+
+  const openSearch = () => {
+    setOpenOnMount(true);
+    setShouldLoad(true);
+  };
+
+  useEffect(() => {
+    if (props.variant !== "desktop") {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        openSearch();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [props.variant]);
+
+  if (shouldLoad) {
+    return <GlobalSearch {...props} openOnMount={openOnMount} />;
+  }
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      size={props.variant === "mobile" ? "icon" : "default"}
+      className={cn(
+        "shrink-0 border-foreground/15 bg-background/70",
+        props.variant === "desktop" && "h-9 gap-2 px-3 text-sm",
+        props.variant === "mobile" && "h-10 w-10"
+      )}
+      aria-label="Search"
+      aria-keyshortcuts="Control+K Meta+K"
+      onClick={openSearch}
+    >
+      <Search className="h-4 w-4" />
+      {props.variant === "desktop" ? <span>Search</span> : null}
+    </Button>
+  );
+}

package/templates/nextblock-template/components/DeferredGoogleAnalytics.tsx

@@ -1,70 +1,70 @@
-"use client";
-
-import { useEffect, useState, type ComponentType } from "react";
-
-interface DeferredGoogleAnalyticsProps {
-  gaId?: string;
-  nonce?: string;
-}
-
-const interactionEvents: Array<keyof WindowEventMap> = [
-  "pointerdown",
-  "keydown",
-  "scroll",
-  "touchstart",
-];
-
-type GoogleAnalyticsComponent = ComponentType<{
-  gaId: string;
-  nonce?: string;
-}>;
-
-export function DeferredGoogleAnalytics({
-  gaId,
-  nonce,
-}: DeferredGoogleAnalyticsProps) {
-  const [GoogleAnalytics, setGoogleAnalytics] =
-    useState<GoogleAnalyticsComponent | null>(null);
-
-  useEffect(() => {
-    if (!gaId) {
-      return;
-    }
-
-    let isMounted = true;
-
-    function removeListeners() {
-      interactionEvents.forEach((eventName) => {
-        window.removeEventListener(eventName, enableGa);
-      });
-    }
-
-    function enableGa() {
-      removeListeners();
-
-      void import("@next/third-parties/google").then(({ GoogleAnalytics }) => {
-        if (isMounted) {
-          setGoogleAnalytics(() => GoogleAnalytics as GoogleAnalyticsComponent);
-        }
-      });
-    }
-
-    interactionEvents.forEach((eventName) => {
-      window.addEventListener(eventName, enableGa, {
-        once: true,
-        passive: true,
-      });
-    });
-
-    return () => {
-      isMounted = false;
-      removeListeners();
-    };
-  }, [gaId]);
-
-  if (!gaId || !GoogleAnalytics) {
-    return null;
-  }
-
-  return <GoogleAnalytics gaId={gaId} nonce={nonce} />;
-}
+"use client";
+
+import { useEffect, useState, type ComponentType } from "react";
+
+interface DeferredGoogleAnalyticsProps {
+  gaId?: string;
+  nonce?: string;
+}
+
+const interactionEvents: Array<keyof WindowEventMap> = [
+  "pointerdown",
+  "keydown",
+  "scroll",
+  "touchstart",
+];
+
+type GoogleAnalyticsComponent = ComponentType<{
+  gaId: string;
+  nonce?: string;
+}>;
+
+export function DeferredGoogleAnalytics({
+  gaId,
+  nonce,
+}: DeferredGoogleAnalyticsProps) {
+  const [GoogleAnalytics, setGoogleAnalytics] =
+    useState<GoogleAnalyticsComponent | null>(null);
+
+  useEffect(() => {
+    if (!gaId) {
+      return;
+    }
+
+    let isMounted = true;
+
+    function removeListeners() {
+      interactionEvents.forEach((eventName) => {
+        window.removeEventListener(eventName, enableGa);
+      });
+    }
+
+    function enableGa() {
+      removeListeners();
+
+      void import("@next/third-parties/google").then(({ GoogleAnalytics }) => {
+        if (isMounted) {
+          setGoogleAnalytics(() => GoogleAnalytics as GoogleAnalyticsComponent);
+        }
+      });
+    }
+
+    interactionEvents.forEach((eventName) => {
+      window.addEventListener(eventName, enableGa, {
+        once: true,
+        passive: true,
+      });
+    });
+
+    return () => {
+      isMounted = false;
+      removeListeners();
+    };
+  }, [gaId]);
+
+  if (!gaId || !GoogleAnalytics) {
+    return null;
+  }
+
+  return <GoogleAnalytics gaId={gaId} nonce={nonce} />;
+}

package/templates/nextblock-template/components/FeatureImageHero.tsx

@@ -1,47 +1,47 @@
-import Image from "next/image";
-
-const DEFAULT_FRAME_CLASS_NAME =
-  "bg-[radial-gradient(circle_at_top,_rgba(59,130,246,0.18),_transparent_45%),linear-gradient(135deg,#020617,#111827_55%,#1f2937)]";
-
-interface FeatureImageHeroProps {
-  alt: string;
-  blurDataURL?: string | null;
-  frameClassName?: string;
-  height?: number | null;
-  imageClassName?: string;
-  imageUrl: string;
-  priority?: boolean;
-  width?: number | null;
-}
-
-export default function FeatureImageHero({
-  alt,
-  blurDataURL,
-  frameClassName = DEFAULT_FRAME_CLASS_NAME,
-  height,
-  imageClassName = "h-full w-full object-cover",
-  imageUrl,
-  priority = false,
-  width,
-}: FeatureImageHeroProps) {
-  return (
-    <div
-      className={`overflow-hidden rounded-[2rem] border border-slate-200/80 shadow-[0_28px_80px_-32px_rgba(15,23,42,0.45)] dark:border-white/10 ${frameClassName}`}
-    >
-      <div className="relative aspect-[16/10] md:aspect-[2.35/1]">
-        <Image
-          src={imageUrl}
-          alt={alt}
-          width={width && width > 0 ? width : 1600}
-          height={height && height > 0 ? height : 900}
-          placeholder={blurDataURL ? "blur" : "empty"}
-          blurDataURL={blurDataURL ?? undefined}
-          sizes="(max-width: 768px) 100vw, 1200px"
-          className={imageClassName}
-          priority={priority}
-        />
-        <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-slate-950/70 via-slate-950/10 to-transparent" />
-      </div>
-    </div>
-  );
-}
+import Image from "next/image";
+
+const DEFAULT_FRAME_CLASS_NAME =
+  "bg-[radial-gradient(circle_at_top,_rgba(59,130,246,0.18),_transparent_45%),linear-gradient(135deg,#020617,#111827_55%,#1f2937)]";
+
+interface FeatureImageHeroProps {
+  alt: string;
+  blurDataURL?: string | null;
+  frameClassName?: string;
+  height?: number | null;
+  imageClassName?: string;
+  imageUrl: string;
+  priority?: boolean;
+  width?: number | null;
+}
+
+export default function FeatureImageHero({
+  alt,
+  blurDataURL,
+  frameClassName = DEFAULT_FRAME_CLASS_NAME,
+  height,
+  imageClassName = "h-full w-full object-cover",
+  imageUrl,
+  priority = false,
+  width,
+}: FeatureImageHeroProps) {
+  return (
+    <div
+      className={`overflow-hidden rounded-[2rem] border border-slate-200/80 shadow-[0_28px_80px_-32px_rgba(15,23,42,0.45)] dark:border-white/10 ${frameClassName}`}
+    >
+      <div className="relative aspect-[16/10] md:aspect-[2.35/1]">
+        <Image
+          src={imageUrl}
+          alt={alt}
+          width={width && width > 0 ? width : 1600}
+          height={height && height > 0 ? height : 900}
+          placeholder={blurDataURL ? "blur" : "empty"}
+          blurDataURL={blurDataURL ?? undefined}
+          sizes="(max-width: 768px) 100vw, 1200px"
+          className={imageClassName}
+          priority={priority}
+        />
+        <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-slate-950/70 via-slate-950/10 to-transparent" />
+      </div>
+    </div>
+  );
+}