create-nextblock 0.16.1 → 0.16.3

package/templates/nextblock-template/app/cms/components/PaymentsReminderBanner.tsx

@@ -1,58 +1,58 @@
-'use client';
-
-import Link from 'next/link';
-import { useState } from 'react';
-import { Button } from '@nextblock-cms/ui';
-import { CreditCard, X } from 'lucide-react';
-import { useAuth } from '../../../context/AuthContext';
-import type { PaymentsReminder } from '../../../lib/cms/payments-reminder';
-
-/**
- * Shown when commerce is active but a payment provider isn't ready, so published
- * products cannot actually be bought. ADMIN-only: /cms/payments is an admin route, so a
- * WRITER would get a reminder they cannot act on. Dismissible for the session only —
- * this is a real revenue problem and should come back until it's fixed.
- */
-export default function PaymentsReminderBanner({ reminder }: { reminder: PaymentsReminder }) {
-  const { isAdmin } = useAuth();
-  const [dismissed, setDismissed] = useState(false);
-
-  if (!isAdmin || dismissed) return null;
-
-  const providerSummary = reminder.blocked
-    .map(({ label, missing }) => (missing.length ? `${label} (missing: ${missing.join(', ')})` : label))
-    .join(' and ');
-
-  return (
-    <div className="mb-6 flex items-start gap-3 rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 text-amber-900 dark:border-amber-700/60 dark:bg-amber-900/20 dark:text-amber-200">
-      <CreditCard className="mt-0.5 h-5 w-5 shrink-0" />
-      <div className="min-w-0 flex-1">
-        <p className="text-sm font-medium">
-          Your store can&rsquo;t take payments yet.
-        </p>
-        <p className="text-xs opacity-90">
-          {providerSummary} still needs setting up.{' '}
-          {reminder.affectedProducts > 0
-            ? `${reminder.affectedProducts} published ${
-                reminder.affectedProducts === 1 ? 'product' : 'products'
-              } cannot be bought — visitors see a "Contact the seller" form instead of Add to cart.`
-            : 'Products you publish will show visitors a "Contact the seller" form instead of Add to cart.'}
-        </p>
-      </div>
-      <div className="flex shrink-0 items-center gap-2">
-        <Button asChild size="sm" variant="outline" className="border-amber-400">
-          <Link href="/cms/payments">Set up payments</Link>
-        </Button>
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={() => setDismissed(true)}
-          aria-label="Dismiss for now"
-          className="h-8 w-8"
-        >
-          <X className="h-4 w-4" />
-        </Button>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { Button } from '@nextblock-cms/ui';
+import { CreditCard, X } from 'lucide-react';
+import { useAuth } from '../../../context/AuthContext';
+import type { PaymentsReminder } from '../../../lib/cms/payments-reminder';
+
+/**
+ * Shown when commerce is active but a payment provider isn't ready, so published
+ * products cannot actually be bought. ADMIN-only: /cms/payments is an admin route, so a
+ * WRITER would get a reminder they cannot act on. Dismissible for the session only —
+ * this is a real revenue problem and should come back until it's fixed.
+ */
+export default function PaymentsReminderBanner({ reminder }: { reminder: PaymentsReminder }) {
+  const { isAdmin } = useAuth();
+  const [dismissed, setDismissed] = useState(false);
+
+  if (!isAdmin || dismissed) return null;
+
+  const providerSummary = reminder.blocked
+    .map(({ label, missing }) => (missing.length ? `${label} (missing: ${missing.join(', ')})` : label))
+    .join(' and ');
+
+  return (
+    <div className="mb-6 flex items-start gap-3 rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 text-amber-900 dark:border-amber-700/60 dark:bg-amber-900/20 dark:text-amber-200">
+      <CreditCard className="mt-0.5 h-5 w-5 shrink-0" />
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-medium">
+          Your store can&rsquo;t take payments yet.
+        </p>
+        <p className="text-xs opacity-90">
+          {providerSummary} still needs setting up.{' '}
+          {reminder.affectedProducts > 0
+            ? `${reminder.affectedProducts} published ${
+                reminder.affectedProducts === 1 ? 'product' : 'products'
+              } cannot be bought — visitors see a "Contact the seller" form instead of Add to cart.`
+            : 'Products you publish will show visitors a "Contact the seller" form instead of Add to cart.'}
+        </p>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        <Button asChild size="sm" variant="outline" className="border-amber-400">
+          <Link href="/cms/payments">Set up payments</Link>
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setDismissed(true)}
+          aria-label="Dismiss for now"
+          className="h-8 w-8"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/components/SeoScoreBadge.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Badge } from "@nextblock-cms/ui";
+
+interface SeoScoreBadgeProps {
+  score: number;
+  className?: string;
+}
+
+export default function SeoScoreBadge({ score, className = "" }: SeoScoreBadgeProps) {
+  const normalizedScore = Math.max(0, Math.min(100, Math.round(score)));
+
+  let colorClass = "";
+  let dotClass = "";
+  let title = "";
+
+  if (normalizedScore >= 90) {
+    colorClass = "bg-emerald-100 text-emerald-800 border-emerald-200 dark:bg-emerald-950/50 dark:text-emerald-300 dark:border-emerald-800/60";
+    dotClass = "bg-emerald-500";
+    title = `SEO Score: ${normalizedScore}% — Optimal`;
+  } else if (normalizedScore >= 70) {
+    colorClass = "bg-amber-100 text-amber-800 border-amber-200 dark:bg-amber-950/50 dark:text-amber-300 dark:border-amber-800/60";
+    dotClass = "bg-amber-500";
+    title = `SEO Score: ${normalizedScore}% — Good (Minor warnings)`;
+  } else {
+    colorClass = "bg-rose-100 text-rose-800 border-rose-200 dark:bg-rose-950/50 dark:text-rose-300 dark:border-rose-800/60";
+    dotClass = "bg-rose-500";
+    title = `SEO Score: ${normalizedScore}% — Needs improvement`;
+  }
+
+  return (
+    <Badge
+      variant="outline"
+      title={title}
+      className={`inline-flex items-center px-2 py-0.5 text-xs font-semibold rounded-full border transition-colors ${colorClass} ${className}`}
+    >
+      <span className={`w-1.5 h-1.5 rounded-full mr-1.5 shrink-0 ${dotClass}`} />
+      {normalizedScore}%
+    </Badge>
+  );
+}

package/templates/nextblock-template/app/cms/components/TablePagination.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import {
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@nextblock-cms/ui";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+interface TablePaginationProps {
+  currentPage: number;
+  pageSize: number;
+  totalCount: number;
+  basePath: string;
+  itemLabel?: string;
+  pageSizeOptions?: number[];
+}
+
+export default function TablePagination({
+  currentPage,
+  pageSize,
+  totalCount,
+  basePath,
+  itemLabel = "items",
+  pageSizeOptions = [10, 25, 50, 100],
+}: TablePaginationProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+  const from = totalCount === 0 ? 0 : (currentPage - 1) * pageSize + 1;
+  const to = Math.min(totalCount, currentPage * pageSize);
+
+  const navigateTo = (newPage: number, newPageSize?: number) => {
+    const current = new URLSearchParams(Array.from(searchParams.entries()));
+
+    if (newPage > 1) {
+      current.set("page", newPage.toString());
+    } else {
+      current.delete("page");
+    }
+
+    const effectivePageSize = newPageSize ?? pageSize;
+    if (effectivePageSize !== 25) {
+      current.set("pageSize", effectivePageSize.toString());
+    } else {
+      current.delete("pageSize");
+    }
+
+    const query = current.toString();
+    router.push(`${basePath}${query ? `?${query}` : ""}`);
+  };
+
+  const handlePageSizeChange = (val: string) => {
+    const nextSize = parseInt(val, 10);
+    if (!Number.isNaN(nextSize) && nextSize > 0) {
+      // Reset to page 1 when changing page size
+      navigateTo(1, nextSize);
+    }
+  };
+
+  return (
+    <div className="flex flex-col sm:flex-row items-center justify-between gap-4 px-4 py-3 bg-muted/20 border-t border-slate-200 dark:border-slate-700 text-xs sm:text-sm text-muted-foreground">
+      {/* Item summary */}
+      <div className="flex items-center gap-1">
+        <span>Showing</span>
+        <span className="font-medium text-foreground">{from}</span>
+        <span>to</span>
+        <span className="font-medium text-foreground">{to}</span>
+        <span>of</span>
+        <span className="font-medium text-foreground">{totalCount}</span>
+        <span>{itemLabel}</span>
+      </div>
+
+      {/* Controls: Page size + Pagination buttons */}
+      <div className="flex items-center gap-4 sm:gap-6 flex-wrap">
+        {/* Rows per page selector */}
+        <div className="flex items-center gap-2">
+          <span className="text-xs">Rows per page:</span>
+          <Select
+            value={pageSize.toString()}
+            onValueChange={handlePageSizeChange}
+          >
+            <SelectTrigger className="h-8 w-[72px] text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {pageSizeOptions.map((opt) => (
+                <SelectItem key={opt} value={opt.toString()} className="text-xs">
+                  {opt}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Page counter */}
+        <div className="flex items-center gap-1 text-xs">
+          <span>Page</span>
+          <span className="font-medium text-foreground">{currentPage}</span>
+          <span>of</span>
+          <span className="font-medium text-foreground">{totalPages}</span>
+        </div>
+
+        {/* Prev / Next buttons */}
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8 w-8 p-0"
+            disabled={currentPage <= 1}
+            onClick={() => navigateTo(currentPage - 1)}
+            aria-label="Previous page"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8 w-8 p-0"
+            disabled={currentPage >= totalPages}
+            onClick={() => navigateTo(currentPage + 1)}
+            aria-label="Next page"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/components/VisibilityBadge.tsx

@@ -1,62 +1,62 @@
-import { Badge } from "@nextblock-cms/ui";
-import {
-  LIVE_STATUS,
-  resolveVisibilityState,
-  type PublishableType,
-  type VisibilityState,
-} from "@nextblock-cms/utils";
-
-/**
- * Status badge for the CMS list views.
- *
- * Reads the same (status, published_at) pair as the editor's top-bar control, so a
- * scheduled row is labelled "Scheduled" here instead of claiming to be published
- * while its URL still 404s.
- */
-
-const LABEL: Record<VisibilityState, string> = {
-  draft: "Draft",
-  scheduled: "Scheduled",
-  published: "Published",
-  archived: "Archived",
-};
-
-const CLASS_NAME: Record<VisibilityState, string> = {
-  published:
-    "bg-green-100 text-green-700 dark:bg-green-700/30 dark:text-green-300 dark:border-green-700/50",
-  scheduled:
-    "bg-amber-100 text-amber-700 dark:bg-amber-700/30 dark:text-amber-300 dark:border-amber-700/50",
-  draft:
-    "bg-yellow-100 text-yellow-700 dark:bg-yellow-700/30 dark:text-yellow-300 dark:border-yellow-700/50",
-  archived:
-    "bg-slate-100 text-slate-700 dark:bg-slate-700/30 dark:text-slate-300 dark:border-slate-600",
-};
-
-const VARIANT: Record<VisibilityState, "default" | "secondary" | "destructive"> = {
-  published: "default",
-  scheduled: "secondary",
-  draft: "secondary",
-  archived: "destructive",
-};
-
-export default function VisibilityBadge({
-  type,
-  status,
-  publishedAt,
-}: {
-  type: PublishableType;
-  status: string;
-  publishedAt?: string | null;
-}) {
-  const state = resolveVisibilityState({
-    status,
-    publishedAt,
-    liveStatus: LIVE_STATUS[type],
-  });
-
-  return (
-    <Badge variant={VARIANT[state]} className={CLASS_NAME[state]}>
-      {LABEL[state]}
-    </Badge>
-  );
-}
+import { Badge } from "@nextblock-cms/ui";
+import {
+  LIVE_STATUS,
+  resolveVisibilityState,
+  type PublishableType,
+  type VisibilityState,
+} from "@nextblock-cms/utils";
+
+/**
+ * Status badge for the CMS list views.
+ *
+ * Reads the same (status, published_at) pair as the editor's top-bar control, so a
+ * scheduled row is labelled "Scheduled" here instead of claiming to be published
+ * while its URL still 404s.
+ */
+
+const LABEL: Record<VisibilityState, string> = {
+  draft: "Draft",
+  scheduled: "Scheduled",
+  published: "Published",
+  archived: "Archived",
+};
+
+const CLASS_NAME: Record<VisibilityState, string> = {
+  published:
+    "bg-green-100 text-green-700 dark:bg-green-700/30 dark:text-green-300 dark:border-green-700/50",
+  scheduled:
+    "bg-amber-100 text-amber-700 dark:bg-amber-700/30 dark:text-amber-300 dark:border-amber-700/50",
+  draft:
+    "bg-yellow-100 text-yellow-700 dark:bg-yellow-700/30 dark:text-yellow-300 dark:border-yellow-700/50",
+  archived:
+    "bg-slate-100 text-slate-700 dark:bg-slate-700/30 dark:text-slate-300 dark:border-slate-600",
+};
+
+const VARIANT: Record<VisibilityState, "default" | "secondary" | "destructive"> = {
+  published: "default",
+  scheduled: "secondary",
+  draft: "secondary",
+  archived: "destructive",
+};
+
+export default function VisibilityBadge({
+  type,
+  status,
+  publishedAt,
+}: {
+  type: PublishableType;
+  status: string;
+  publishedAt?: string | null;
+}) {
+  const state = resolveVisibilityState({
+    status,
+    publishedAt,
+    liveStatus: LIVE_STATUS[type],
+  });
+
+  return (
+    <Badge variant={VARIANT[state]} className={CLASS_NAME[state]}>
+      {LABEL[state]}
+    </Badge>
+  );
+}