Skip to content

GitLab

Closed
Created by André Sacilotto Santos@andre.santosOwner4 of 4 tasks completed4/4 tasks
Report abuse

feat(component): adicionar botão customizado com estilos primário/secundário e hover

Mudanças

Adicionado componente CustomButton baseado no Shadcn Button. Suporte para variações primária e secundária. Adicionada animação de hover suave. Pode receber uma função de onclick

User Story

Tarefa número 5 do backlog

Como testar

Pode ser testado diretamente na página da home, usei o seguinte código para teste:

import { Link } from "@tanstack/react-router"
import { CustomButton } from "@/components/ui/button"
import { Mountain, User } from "lucide-react"

export default function Header() {
  return (
    <header className="p-4 flex gap-4 bg-[#F8F6F0] text-black justify-between items-center">
      <Link to="/" className="no-underline">
        <CustomButton onClick={() => console.log("Ir para Home")}>
          <Mountain className="mr-2 h-5 w-5" />
          Início
        </CustomButton>
      </Link>

      <Link to="/" className="no-underline">
        <CustomButton secondary onClick={() => console.log("Ir para Perfil")}>
          João da Silva
          <User className="ml-2 h-5 w-5" />
        </CustomButton>
      </Link>
    </header>
  )
}

Acceptance Criteria

  • Usar o botão do shadcn
  • Botão deve ter hover
  • Deve poder receber uma função de onclick
  • Deve ter uma flag para estilização secundária (Meu Perfil)

🔄 Sincronizado do GitHub

Sincronizado automaticamente do GitHub para GitLab AGES