Cta button is not showing

Developing with Prismic
1

i have a problem with rendering the cta button it works when i add the LOGICAL Not operator { ! } i think this approach isn't very technical can someone help me here is the Navbar.tsx

import { PrismicNextLink } from "@prismicio/next";
import WordMark from "./WordMark";
import Link from "next/link";
import ButtonLink from "@/components/ButtonLink";

type NavBarProps = {
  settings: Content.SettingsDocument;
};

export default function NavBar({ settings }: NavBarProps) {
  return (
    <nav className="px-4 py-4 md:px-6 md:py-6" aria-label="Main">
      <div className="mx-auto flex max-w-6xl flex-col justify-between py-2 font-medium text-white md:flex-row md:items-center">
        <Link href="/">
          <span className="absolute ml-[69px]  mt-2 font-bold   ">Mugnum</span>
          <WordMark />
          <span className="sr-only">Mugnum.studio Home page</span>
        </Link>

        <ul className="flex gap-6 ">
          {settings.data.navigation.map((item) => {
            if (item.cta_button) {
              return (
                <li>
                  <ButtonLink field={item.link}>{item.label}</ButtonLink>
                </li>
              );
            }

            return (
              <li key={item.label}>
                {/*use this "prismicNextLink" for only when retrieving data from prismic*/}
                <PrismicNextLink
                  field={item.link}
                  className="inline-flex min-h-11 items-center"
                >
                  {item.label}
                </PrismicNextLink>
              </li>
            );
          })}
        </ul>
      </div>
    </nav>
  );
}

and here is the buttonlink.tsx

// src/components/ButtonLink.tsx

import { PrismicNextLink, PrismicNextLinkProps } from "@prismicio/next";
import clsx from "clsx";

export default function ButtonLink({
  className,

  ...restProps
}: PrismicNextLinkProps) {
  return (
    <PrismicNextLink
      className={clsx(
        "focus:ring-offset-3 relative inline-flex h-fit w-fit rounded-full border border-blue-100/20 bg-blue-200/10 px-4 py-2 text-blue-200 outline-none ring-yellow-300 transition-colors after:absolute after:inset-0 after:-z-10 after:animate-pulse after:rounded-full after:bg-yellow-100 after:bg-opacity-0 after:blur-md after:transition-all after:duration-500 hover:border-yellow-200/40 hover:text-yellow-300 after:hover:bg-opacity-15 focus:ring-2",
        className,
      )}
      {...restProps}
    />
  );
}
3

Since you're already using Tailwind CSS classes for styling, a more technical solution would be to manage the button's appearance directly with CSS.

  1. Remove the logical Not operator {!} from your NavBar component.
  2. Instead, focus on adjusting the styles in your ButtonLink component to achieve the desired appearance of your CTA button.
4

i just had to turn the ctaButton to true

image
image800×319 11.4 KB

1 Like