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

cta button not rendered #4

Open
zaluty opened this issue May 15, 2024 · 0 comments
Open

cta button not rendered #4

zaluty opened this issue May 15, 2024 · 0 comments

Comments

@zaluty
Copy link

zaluty commented May 15, 2024

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}
    />
  );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant