Início / user-24312314

QFaZo Play's questions

Martin Hope
QFaZo Play
Asked: 2025-04-06 05:40:58 +0800 CST
  • 6

no meu projeto NextJS, criei o componente BackButton

Este botão é fixo para seguir o usuário na rolagem para baixo e deve ser colocado mais longe de qualquer conteúdo no site para que não seja bloqueado por outros componentes.

para isso eu uso z-index e posição fixa obviamente

O problema é que há um componente que está mais distante do BackButton em z-index, não importa quão alto seja o valor que eu use.

aqui está o botão, tudo é simples, você pode até ver até onde eu uso o z-index, embora isso ainda não ajude:

import { ArrowLeftIcon } from "lucide-react";
import { useRouter } from "next/navigation";

const BackButton = () => {
  const router = useRouter();

  return (
    <button
      onClick={() => router.back()}
      className="fixed top-4 left-4 z-[990000] bg-black text-white hover:bg-gray-600 duration-200 rounded-full p-2"
    >
      <ArrowLeftIcon width={40} height={40} />
    </button>
  );
};

export default BackButton;

e aqui está um exemplo de um componente que vai além do BackButton:

 <div className="bg-slate-200 shadow-md rounded-lg p-4 mb-4 hover:-translate-y-1 duration-500 hover:shadow-xl relative">
   {CONTENT}
 </div>

Sim, o -translate-y-1 está sendo usado e, quando o cursor passa, ele vai além do botão. Mas essa não é a causa do problema, pois mesmo que eu remova essa propriedade CSS, o BackButton ainda será colocado atrás deste componente.

A maneira como eu uso esse botão é como um componente de layout em layout.tsx, para que ele possa estar em qualquer página possível do site:

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <QueryProvider>
          <div className="ml-4 mt-4 fixed top-0 left-0">
            <BackButton />
          </div>

          <div className="mt-10">{children}</div>

          <ToastContainer />
        </QueryProvider>
      </body>
    </html>
  );
}
css
Martin Hope
QFaZo Play
Asked: 2024-05-04 02:05:05 +0800 CST
  • 5

estou usando EmailJS para criar e enviar mensagens de email.

No momento, quando envio dados de um formulário, uma mensagem chega na minha conta do Gmail conforme o esperado, mas os valores dinâmicos, aqueles encontrados em {{ }} no template EmailJS, quase não aparecem.

Aqui está um exemplo:

meu modelo fica assim:

Hi,
You've got the message from:

{{user_email}} 

{{message_subject}}

{{message}}

E aqui está o código para usar esses valores dinâmicos:

<input
   type="text"
   name="message_subject"
   placeholder="Your message subject..."
   {...register("messageSubject")}
/>

<input
    type="email"
    name="user_email"
    placeholder="Your email..."
    {...register("userEmail")}
/>

<textarea
    name="message"
    placeholder="Describe your problem or question..."
    className={styles.textarea}
    {...register("userMessage")}
/>

E ao enviar esses dados, recebo apenas a variável da mensagem , outras duas não estão aparecendo

Estou faltando alguma coisa, porque acho que estou usando os atributos de nome corretamente e eles correspondem aos nomes das variáveis

ATUALIZAÇÃO: deixa pra lá, agora a mensagem também não está aparecendo =(

html