create-nextblock 0.12.16 → 0.13.2

package/templates/nextblock-template/app/cms/users/new/page.tsx

@@ -0,0 +1,44 @@
+// app/cms/users/new/page.tsx
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
+import { Button } from "@nextblock-cms/ui";
+import { createClient } from "@nextblock-cms/db/server";
+import CreateUserForm from "../components/CreateUserForm";
+
+export default async function NewUserPage() {
+  const supabase = createClient();
+  const { data: { user: currentAdmin } } = await supabase.auth.getUser();
+
+  if (!currentAdmin) {
+    return <p>Access Denied. Not authenticated.</p>;
+  }
+
+  // User management is admin-only (mirrors the users list page). The CMS layout already
+  // gates ADMIN/WRITER; this blocks writers and direct-access attempts.
+  const { data: adminProfile } = await supabase
+    .from("profiles")
+    .select("role")
+    .eq("id", currentAdmin.id)
+    .single();
+  if (adminProfile?.role !== "ADMIN") {
+    return <p>Access Denied. Admin privileges required.</p>;
+  }
+
+  return (
+    <div className="max-w-xl mx-auto">
+      <div className="flex items-center gap-3 mb-6">
+        <Button variant="outline" size="icon" aria-label="Back to users" asChild>
+          <Link href="/cms/users">
+            <ArrowLeft className="h-4 w-4" />
+          </Link>
+        </Button>
+        <h1 className="text-2xl font-bold">Create User</h1>
+      </div>
+      <p className="text-sm text-muted-foreground mb-6">
+        Create an account directly. After creating, you can fill in the profile, addresses,
+        and avatar on the next screen.
+      </p>
+      <CreateUserForm />
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/users/page.tsx

@@ -11,7 +11,7 @@ import {
   TableRow,
 } from "@nextblock-cms/ui";
 import { Badge } from "@nextblock-cms/ui";
-import { MoreHorizontal, Edit3, Users } from "lucide-react";
+import { MoreHorizontal, Edit3, Users, PlusCircle } from "lucide-react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -110,7 +110,11 @@ export default async function CmsUsersListPage() {
     <div className="w-full">
       <div className="flex justify-between items-center mb-6">
         <h1 className="text-2xl font-semibold">Manage Users</h1>
-        {/* No "Create New User" button as users are created via sign-up flow. Admins manage roles. */}
+        <Button asChild>
+          <Link href="/cms/users/new" className="flex items-center">
+            <PlusCircle className="mr-2 h-4 w-4" /> Create User
+          </Link>
+        </Button>
       </div>
 
       {users.length === 0 ? (
@@ -118,8 +122,13 @@ export default async function CmsUsersListPage() {
           <Users className="mx-auto h-12 w-12 text-muted-foreground" />
           <h3 className="mt-2 text-sm font-medium text-foreground">No other users found</h3>
           <p className="mt-1 text-sm text-muted-foreground">
-            New users will appear here after they sign up.
+            Create a user, or new users will appear here after they sign up.
           </p>
+          <Button asChild className="mt-4">
+            <Link href="/cms/users/new" className="flex items-center">
+              <PlusCircle className="mr-2 h-4 w-4" /> Create User
+            </Link>
+          </Button>
         </div>
       ) : (
         <div className="rounded-lg border overflow-hidden">

package/templates/nextblock-template/app/lib/homepage.ts

@@ -0,0 +1,36 @@
+import type { SupabaseClient } from '@supabase/supabase-js';
+import type { Database } from '@nextblock-cms/db';
+
+/**
+ * The homepage is the default-language page at slug "home". Every one of its
+ * translation-group siblings — whatever slug each one uses (e.g. "accueil",
+ * "startseite", "inicio") — is ALSO served at "/". This returns that shared
+ * `translation_group_id` so callers can recognise every language variation of
+ * the homepage instead of hardcoding per-locale slugs.
+ *
+ * Returns `null` when there is no default-language "home" page (e.g. a fresh
+ * install), in which case callers should fall back to their prior slug-literal
+ * behaviour.
+ */
+export async function getHomepageTranslationGroupId(
+  supabase: SupabaseClient<Database>,
+): Promise<string | null> {
+  const { data: defaultLang } = await supabase
+    .from('languages')
+    .select('id')
+    .eq('is_default', true)
+    .maybeSingle();
+
+  if (!defaultLang) {
+    return null;
+  }
+
+  const { data: home } = await supabase
+    .from('pages')
+    .select('translation_group_id')
+    .eq('slug', 'home')
+    .eq('language_id', defaultLang.id)
+    .maybeSingle();
+
+  return home?.translation_group_id ?? null;
+}

package/templates/nextblock-template/app/lib/sitemap-utils.ts

@@ -1,4 +1,5 @@
 import { getSsgSupabaseClient } from '@nextblock-cms/db/server';
+import { getHomepageTranslationGroupId } from './homepage';
 
 /**
  * A single, language-aware entry destined for the XML sitemap.
@@ -30,11 +31,13 @@ export interface SitemapEntry {
  * re-advertised under the generic `/{slug}` catch-all:
  *  - `product-template` backs the product layout (app/product/[slug]); it is
  *    not a public page.
- *  - `home` / `accueil` back the locale-resolved homepage served at "/"
- *    (see getHomepageSlugForLocale in app/page.tsx); listing them as `/home`
- *    and `/accueil` would duplicate the canonical "/" entry.
+ *
+ * The homepage and its translations are excluded separately, by translation
+ * group (see `getHomepageTranslationGroupId`), because every language variation
+ * of the homepage is served at "/" regardless of the slug it uses — listing it
+ * under `/{slug}` would duplicate the canonical "/" entry.
  */
-const EXCLUDED_PAGE_SLUGS = new Set(['product-template', 'home', 'accueil']);
+const EXCLUDED_PAGE_SLUGS = new Set(['product-template']);
 
 type SupabaseLikeClient = ReturnType<typeof getSsgSupabaseClient>;
 
@@ -157,12 +160,13 @@ function rowsToEntries(
 export async function fetchAllPublishedPages(): Promise<SitemapEntry[]> {
   const supabase = getSsgSupabaseClient();
   try {
-    const [{ data: pages, error }, languageMap] = await Promise.all([
+    const [{ data: pages, error }, languageMap, homepageGroupId] = await Promise.all([
       supabase
         .from('pages')
         .select('slug, updated_at, language_id, translation_group_id')
         .eq('status', 'published'),
       fetchLanguageMap(supabase),
+      getHomepageTranslationGroupId(supabase),
     ]);
 
     if (error) {
@@ -171,7 +175,10 @@ export async function fetchAllPublishedPages(): Promise<SitemapEntry[]> {
     }
 
     const rows = (pages ?? []).filter(
-      (page) => page.slug && !EXCLUDED_PAGE_SLUGS.has(page.slug),
+      (page) =>
+        page.slug &&
+        !EXCLUDED_PAGE_SLUGS.has(page.slug) &&
+        !(homepageGroupId && page.translation_group_id === homepageGroupId),
     );
 
     return rowsToEntries(

package/templates/nextblock-template/app/page.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { cookies, draftMode, headers } from 'next/headers';
 import { notFound } from 'next/navigation';
 import type { Metadata } from 'next';
-import { getSsgSupabaseClient } from '@nextblock-cms/db/server';
+import { createClient, getSsgSupabaseClient } from '@nextblock-cms/db/server';
 import PageClientContent from './[slug]/PageClientContent';
 import { getPageDataBySlug } from './[slug]/page.utils';
 import BlockRenderer from '../components/BlockRenderer';
@@ -29,12 +29,57 @@ interface PageTranslation {
   }[];
 }
 
-async function getHomepageSlugForLocale(locale: string): Promise<string> {
-  if (locale === 'fr') {
-    return 'accueil';
+// Resolve the homepage for a given locale WITHOUT assuming a per-locale slug.
+// The homepage is, by convention, the default-language page at slug "home".
+// Its translated versions may use ANY slug (e.g. "accueil"), so we find the
+// localized version through the shared translation group. This lets "/" serve
+// every language variation of the homepage regardless of what slug it uses.
+async function resolveHomepageData(preferredLocale: string) {
+  const defaultHome = await getPageDataBySlug('home', DEFAULT_LOCALE);
+
+  // Default locale (or a homepage with no linked translations): serve it directly.
+  if (defaultHome && (preferredLocale === DEFAULT_LOCALE || !defaultHome.translation_group_id)) {
+    return defaultHome;
   }
 
-  return 'home';
+  // Resolve the localized homepage via the shared translation group (any slug),
+  // so "/" serves every language variation regardless of the slug it uses. In
+  // draft (preview) mode we include unpublished siblings; otherwise only published.
+  if (defaultHome?.translation_group_id) {
+    const draft = await draftMode();
+    const supabase = draft.isEnabled ? createClient() : getSsgSupabaseClient();
+    let siblingQuery = supabase
+      .from('pages')
+      .select('slug, languages!inner(code)')
+      .eq('translation_group_id', defaultHome.translation_group_id)
+      .eq('languages.code', preferredLocale)
+      .limit(1);
+
+    if (!draft.isEnabled) {
+      siblingQuery = siblingQuery.eq('status', 'published');
+    }
+
+    const { data: sibling } = await siblingQuery.maybeSingle();
+    const localizedSlug = (sibling as { slug?: string } | null)?.slug;
+    if (localizedSlug) {
+      const localized = await getPageDataBySlug(localizedSlug, preferredLocale);
+      if (localized) {
+        return localized;
+      }
+    }
+  }
+
+  // Fallbacks: the preferred locale's own "home" slug (covers a missing or
+  // renamed default-language home that the group lookup couldn't anchor on),
+  // then the default home. Either may be null — the caller renders notFound().
+  if (preferredLocale !== DEFAULT_LOCALE) {
+    const localizedHome = await getPageDataBySlug('home', preferredLocale);
+    if (localizedHome) {
+      return localizedHome;
+    }
+  }
+
+  return defaultHome;
 }
 
 async function getPreferredLocale() {
@@ -71,8 +116,7 @@ export async function generateMetadata(): Promise<Metadata> {
   }
 
   const preferredLocale = await getPreferredLocale();
-  const homepageSlug = await getHomepageSlugForLocale(preferredLocale);
-  const pageData = await getPageDataBySlug(homepageSlug, preferredLocale);
+  const pageData = await resolveHomepageData(preferredLocale);
 
   if (!pageData) {
     return { title: 'Homepage Not Found' };
@@ -128,16 +172,15 @@ export async function generateMetadata(): Promise<Metadata> {
 
 export default async function RootPage() {
   const preferredLocale = await getPreferredLocale();
-  const homepageSlug = await getHomepageSlugForLocale(preferredLocale);
-  const pageData = await getPageDataBySlug(homepageSlug, preferredLocale);
+  const pageData = await resolveHomepageData(preferredLocale);
 
   if (!pageData) {
-    console.error(
-      `Homepage data not found for slug: ${homepageSlug} (locale: ${preferredLocale})`
-    );
+    console.error(`Homepage data not found (locale: ${preferredLocale})`);
     notFound();
   }
 
+  const homepageSlug = pageData.slug;
+
   const translatedSlugs: { [key: string]: string } = {};
   if (pageData.translation_group_id) {
     const supabase = getSsgSupabaseClient();

package/templates/nextblock-template/components/blocks/renderers/ImageBlockRenderer.tsx

@@ -1,10 +1,13 @@
 import React from "react";
 import Image from "next/image";
 import type { VisualEditAttributes } from "../../../lib/visual-editing/types";
+import { StockPhotoCredit, isStockPhotoCreditCaption, type StockPhotoAttribution } from "./StockPhotoCredit";
 
 export type ImageBlockContent = {
     media_id: string | null;
     object_key: string | null;
+    external_url?: string | null;
+    attribution?: StockPhotoAttribution | null;
     alt_text: string | null;
     caption: string | null;
     width: number | null;
@@ -12,6 +15,10 @@ export type ImageBlockContent = {
     blur_data_url: string | null;
 };
 
+function isRenderableExternalImageUrl(value: unknown): value is string {
+  return typeof value === "string" && /^https?:\/\//i.test(value.trim());
+}
+
 const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
 
 interface ImageBlockRendererProps {
@@ -28,6 +35,55 @@ const ImageBlockRenderer: React.FC<ImageBlockRendererProps> = ({
   visualEditAttributes,
 }) => {
   void languageId;
+
+  // External URL (e.g. a stock photo the AI inserted). Rendered with a plain
+  // <img> so it works for any allowlisted https host without Next image
+  // remotePatterns config. The caption/figure structure matches the R2 path.
+  if (isRenderableExternalImageUrl(content.external_url)) {
+    const hasDimensions =
+      typeof content.width === "number" &&
+      typeof content.height === "number" &&
+      content.width > 0 &&
+      content.height > 0;
+
+    // Don't render a caption that merely repeats the attribution credit — the
+    // StockPhotoCredit below already renders "Photo by … on {Provider}". (Stock
+    // photos historically stored the credit string in `caption` too, which showed
+    // the same line twice.)
+    const captionText = content.caption?.trim() ?? "";
+    const showCaption =
+      captionText.length > 0 && !isStockPhotoCreditCaption(captionText, content.attribution);
+
+    return (
+      <div className="w-full" {...visualEditAttributes}>
+        <figure className="my-6 text-center mx-auto max-w-full">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={content.external_url as string}
+            alt={content.alt_text || ""}
+            {...(hasDimensions
+              ? { width: content.width as number, height: content.height as number }
+              : {})}
+            loading={priority ? "eager" : "lazy"}
+            decoding="async"
+            className="rounded-md border max-w-full h-auto mx-auto"
+          />
+          {showCaption && (
+            <figcaption className="text-sm text-muted-foreground mt-2">
+              {content.caption}
+            </figcaption>
+          )}
+          {content.attribution && (
+            <StockPhotoCredit
+              attribution={content.attribution}
+              className="mt-1 block text-xs text-muted-foreground"
+            />
+          )}
+        </figure>
+      </div>
+    );
+  }
+
   if (!content.media_id || !content.object_key) {
     return (
       <div

package/templates/nextblock-template/components/blocks/renderers/SectionBlockRenderer.tsx

@@ -18,6 +18,7 @@ import TextBlockRenderer from "./TextBlockRenderer";
 import HeadingBlockRenderer from "./HeadingBlockRenderer";
 import ImageBlockRenderer from "./ImageBlockRenderer";
 import ButtonBlockRenderer from "./ButtonBlockRenderer";
+import { StockPhotoCredit } from "./StockPhotoCredit";
 
 const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
 const BACKGROUND_COMPOSITING_CLASSES =
@@ -38,6 +39,57 @@ function loadEcommerceBlockRenderer(blockType: string) {
   );
 }
 
+type SectionBackgroundImage = NonNullable<
+  NonNullable<SectionBlockContent["background"]>["image"]
+>;
+
+// Renders a section's background image. External https URLs (e.g. AI-inserted
+// stock photos) use a plain <img> so any allowlisted host works without Next
+// image remotePatterns config; stored R2 media keeps the optimized next/image
+// path. Returns null when neither a URL nor an object key is present.
+function renderBackgroundImageElement(image: SectionBackgroundImage, priority: boolean) {
+  const externalUrl =
+    typeof image.external_url === "string" && /^https?:\/\//i.test(image.external_url.trim())
+      ? image.external_url.trim()
+      : null;
+  const objectFit: "cover" | "contain" = image.size === "contain" ? "contain" : "cover";
+  const objectPosition = image.position || "center";
+
+  if (externalUrl) {
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      <img
+        src={externalUrl}
+        alt={image.alt_text || ""}
+        loading={priority ? "eager" : "lazy"}
+        fetchPriority={priority ? "high" : "auto"}
+        decoding="async"
+        className="absolute inset-0 h-full w-full"
+        style={{ objectFit, objectPosition }}
+      />
+    );
+  }
+
+  if (!image.object_key) {
+    return null;
+  }
+
+  return (
+    <Image
+      src={`${R2_BASE_URL}/${image.object_key}`}
+      alt={image.alt_text || ""}
+      fill
+      priority={priority}
+      fetchPriority={priority ? "high" : "auto"}
+      placeholder={image.blur_data_url ? "blur" : "empty"}
+      blurDataURL={image.blur_data_url || undefined}
+      quality={image.quality || 80}
+      sizes="100vw"
+      style={{ objectFit, objectPosition }}
+    />
+  );
+}
+
 interface SectionBlockRendererProps {
   content: SectionBlockContent;
   languageId: number;
@@ -410,21 +462,7 @@ export default async function SectionBlockRenderer({
             {/* Background image Layer for slide */}
             {slideBackground.type === 'image' && slideBackground.image && (
               <div className={ABSOLUTE_BACKGROUND_CLASSES}>
-                <Image
-                  src={`${R2_BASE_URL}/${slideBackground.image.object_key}`}
-                  alt={slideBackground.image.alt_text || ""}
-                  fill
-                  priority={slidePriority}
-                  fetchPriority={slidePriority ? "high" : "auto"}
-                  placeholder={slideBackground.image.blur_data_url ? "blur" : "empty"}
-                  blurDataURL={slideBackground.image.blur_data_url || undefined}
-                  quality={slideBackground.image.quality || 80}
-                  sizes="100vw"
-                  style={{
-                    objectFit: slideBackground.image.size === 'contain' ? 'contain' : 'cover',
-                    objectPosition: slideBackground.image.position || 'center',
-                  }}
-                />
+                {renderBackgroundImageElement(slideBackground.image, slidePriority)}
                 {slideBackground.image.overlay && slideBackground.image.overlay.gradient && (
                   <div 
                     className="absolute inset-0 transform-gpu [backface-visibility:hidden]"
@@ -525,23 +563,15 @@ export default async function SectionBlockRenderer({
       {...visualEditAttributes}
     >
       {/* Background image Layer */}
+      {content.background?.type === 'image' && content.background.image?.attribution && (
+        <StockPhotoCredit
+          attribution={content.background.image.attribution}
+          className="pointer-events-auto absolute bottom-1 right-2 z-10 rounded bg-black/40 px-1.5 py-0.5 text-[10px] text-white/90 backdrop-blur-sm [&_a]:text-white"
+        />
+      )}
       {content.background?.type === 'image' && content.background.image && (
         <div className={ABSOLUTE_BACKGROUND_CLASSES}>
-          <Image
-            src={`${R2_BASE_URL}/${content.background.image.object_key}`}
-            alt={content.background.image.alt_text || ""}
-            fill
-            priority={isHero}
-            fetchPriority={isHero ? "high" : "auto"}
-            placeholder={content.background.image.blur_data_url ? "blur" : "empty"}
-            blurDataURL={content.background.image.blur_data_url || undefined}
-            quality={content.background.image.quality || 80}
-            sizes="100vw"
-            style={{
-              objectFit: content.background.image.size === 'contain' ? 'contain' : 'cover',
-              objectPosition: content.background.image.position || 'center',
-            }}
-          />
+          {renderBackgroundImageElement(content.background.image, isHero)}
           {content.background.image.overlay && content.background.image.overlay.gradient && (
             <div 
               className="absolute inset-0 transform-gpu [backface-visibility:hidden]"

package/templates/nextblock-template/components/blocks/renderers/StockPhotoCredit.tsx

@@ -0,0 +1,167 @@
+import React from "react";
+
+// Stock-photo attribution. Field names match the search_stock_photos result +
+// the ImageAttribution schema; snake_case is tolerated defensively.
+export type StockPhotoAttribution = {
+  provider?: string | null;
+  photographer?: string | null;
+  photographerUrl?: string | null;
+  sourceUrl?: string | null;
+  downloadLocation?: string | null;
+  // The operator's registered Unsplash app name, resolved from CMS settings at
+  // search time and carried on the attribution — never hardcoded.
+  utmSource?: string | null;
+  photographer_url?: string | null;
+  source_url?: string | null;
+};
+
+function isUnsplash(attribution: StockPhotoAttribution) {
+  return (
+    attribution.provider === "unsplash" ||
+    /unsplash\.com/i.test(attribution.sourceUrl || attribution.source_url || "")
+  );
+}
+
+// Unsplash requires attribution links to carry utm params identifying your app.
+// Without the operator's registered app name (set in /cms/settings/cortex-ai) we
+// omit utm rather than tag a wrong app — the links still work.
+function buildUnsplashUtm(attribution: StockPhotoAttribution) {
+  const source = attribution.utmSource?.trim();
+  if (!source) {
+    return null;
+  }
+  return `utm_source=${encodeURIComponent(source)}&utm_medium=referral`;
+}
+
+function withUtm(url: string, attribution: StockPhotoAttribution) {
+  if (!url || !isUnsplash(attribution)) {
+    return url;
+  }
+  const utm = buildUnsplashUtm(attribution);
+  if (!utm) {
+    return url;
+  }
+  return url.includes("?") ? `${url}&${utm}` : `${url}?${utm}`;
+}
+
+function resolveProvider(attribution: StockPhotoAttribution) {
+  const source = attribution.sourceUrl || attribution.source_url || "";
+  if (attribution.provider === "unsplash" || /unsplash\.com/i.test(source)) {
+    return { home: "https://unsplash.com", name: "Unsplash" };
+  }
+  if (attribution.provider === "pexels" || /pexels\.com/i.test(source)) {
+    return { home: "https://www.pexels.com", name: "Pexels" };
+  }
+  return null;
+}
+
+/**
+ * The plain-text form of the credit that {@link StockPhotoCredit} renders
+ * ("Photo by {photographer} on {Provider}"). Used to detect — and suppress — a
+ * caption that merely duplicates the attribution credit.
+ */
+export function stockPhotoCreditText(
+  attribution: StockPhotoAttribution | null | undefined
+): string | null {
+  if (!attribution) {
+    return null;
+  }
+
+  const provider = resolveProvider(attribution);
+  const photographer = attribution.photographer;
+
+  if (!photographer && !provider) {
+    return null;
+  }
+
+  const who = photographer || "a photographer";
+  return provider ? `Photo by ${who} on ${provider.name}` : `Photo by ${who}`;
+}
+
+/**
+ * True when `caption` is just an attribution credit for `attribution` (so it
+ * would duplicate the rendered {@link StockPhotoCredit}). Covers the normal
+ * "Photo by {name} on {Provider}" form and the no-photographer fallback that
+ * search_stock_photos historically stored, "Photo on {Provider}".
+ */
+export function isStockPhotoCreditCaption(
+  caption: string | null | undefined,
+  attribution: StockPhotoAttribution | null | undefined
+): boolean {
+  const text = (caption || "").trim().toLowerCase();
+  if (!text) {
+    return false;
+  }
+
+  const credit = stockPhotoCreditText(attribution);
+  if (credit && text === credit.toLowerCase()) {
+    return true;
+  }
+
+  const provider = resolveProvider(attribution || {});
+  return Boolean(provider && text === `photo on ${provider.name.toLowerCase()}`);
+}
+
+/**
+ * Renders "Photo by {photographer} on {Provider}" with the photographer's profile
+ * and the provider properly linked — satisfying the Unsplash API attribution
+ * requirement (also shown for Pexels as a courtesy). Renders nothing without a
+ * usable attribution.
+ */
+export function StockPhotoCredit({
+  attribution,
+  className,
+}: {
+  attribution: StockPhotoAttribution | null | undefined;
+  className?: string;
+}) {
+  if (!attribution) {
+    return null;
+  }
+
+  const photographer = attribution.photographer;
+  const photographerUrl = attribution.photographerUrl || attribution.photographer_url;
+  const sourceUrl = attribution.sourceUrl || attribution.source_url;
+  const provider = resolveProvider(attribution);
+
+  if (!photographer && !provider) {
+    return null;
+  }
+
+  const linkClass = "underline underline-offset-2 hover:opacity-80";
+
+  return (
+    <span className={className}>
+      Photo by{" "}
+      {photographer ? (
+        photographerUrl ? (
+          <a
+            href={withUtm(photographerUrl, attribution)}
+            target="_blank"
+            rel="noopener noreferrer nofollow"
+            className={linkClass}
+          >
+            {photographer}
+          </a>
+        ) : (
+          photographer
+        )
+      ) : (
+        "a photographer"
+      )}
+      {provider ? (
+        <>
+          {" on "}
+          <a
+            href={withUtm(sourceUrl || provider.home, attribution)}
+            target="_blank"
+            rel="noopener noreferrer nofollow"
+            className={linkClass}
+          >
+            {provider.name}
+          </a>
+        </>
+      ) : null}
+    </span>
+  );
+}