"use client" // Fichier autonome : le composant + sa preview vivent ensemble ici, // sans dépendre du reste du projet (pratique pour tester ou partager isolément). import { useState } from "react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; import { LuArrowUpRight, LuDownload, LuPhone } from "react-icons/lu"; // cn = fusion de classes Tailwind (clsx pour les conditions, twMerge pour éviter les doublons) function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } // Une variante = les classes Tailwind au repos, plus (optionnellement) // leurs équivalents au survol. Pas de map ni de nommage magique à respecter : // on décrit juste ce que chaque propriété doit valoir dans chaque état. export interface ActionButtonVariant { bg?: string; // couleur de fond au repos (vide = transparent, ex: bouton "hollow") border: string; // couleur de bordure au repos (toujours définie, le bouton a toujours une bordure) text: string; // couleur du texte/icône au repos hoverBg?: string; // fond au survol (si absent, garde le fond du repos) hoverBorder?: string; // bordure au survol (si absent, garde la bordure du repos) hoverText?: string; // texte au survol (si absent, garde le texte du repos). Sert aussi de texte de repli sous READABLE_TEXT_THRESHOLD (voir hoverBgOpacity) hoverBgOpacity?: number; // 0-100 : au survol, le fond garde sa couleur mais devient translucide à ce niveau au lieu de changer de classe (pour les boutons "filled" : évite qu'ils ressemblent à un bouton "hollow" au survol). La bordure n'est jamais affectée, elle reste à 100% d'opacité. } // en dessous de ce seuil d'opacité de fond, le texte blanc devient illisible // (le fond translucide laisse trop transparaître ce qu'il y a derrière) → on bascule sur hoverText const READABLE_TEXT_THRESHOLD = 50; // tailles de coin disponibles pour la prop `radius`, mappées vers les classes Tailwind réelles // (on garde un map plutôt qu'un template `rounded-${radius}` : Tailwind doit voir les classes en toutes lettres) export type ActionButtonRadius = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"; const radiusClasses: Record = { none: "rounded-none", sm: "rounded-sm", md: "rounded-md", lg: "rounded-lg", xl: "rounded-xl", "2xl": "rounded-2xl", "3xl": "rounded-3xl", full: "rounded-full", }; // Bouton noir contour, fond noir au survol const blackHollow: ActionButtonVariant = { border: "border-black", text: "text-black", hoverBg: "bg-black", hoverBorder: "border-black", hoverText: "text-white", }; // Couleurs de démo génériques (palette par défaut de Tailwind) plutôt que les vraies teintes de // marque GemmaS (bg-primary etc.) : d'un côté ces tokens n'existent que dans le thème de ce projet, // de l'autre ce fichier est fait pour être partagé — pas question d'exposer la charte GemmaS dedans. // Bouton bleu plein, le fond devient translucide au survol (reste "plein", pas de confusion avec le hollow) const blueFilled: ActionButtonVariant = { bg: "bg-blue-600", border: "border-blue-600", text: "text-white", hoverBgOpacity: 20, hoverText: "text-blue-600", // sous READABLE_TEXT_THRESHOLD, le blanc ne ressort plus sur le fond translucide }; // Bouton bleu contour, devient plein au survol const blueHollow: ActionButtonVariant = { border: "border-blue-600", text: "text-blue-600", hoverBg: "bg-blue-600", hoverBorder: "border-blue-600", hoverText: "text-white", }; // Bouton vert contour, devient plein au survol const greenHollow: ActionButtonVariant = { border: "border-green-600", text: "text-green-600", hoverBg: "bg-green-600", hoverBorder: "border-green-600", hoverText: "text-white", }; // Bouton jaune plein, le fond devient translucide au survol (reste "plein", pas de confusion avec le hollow) const yellowFilled: ActionButtonVariant = { bg: "bg-yellow-500", border: "border-yellow-500", text: "text-white", hoverBgOpacity: 20, hoverText: "text-yellow-500", }; // Bouton noir plein, le fond devient translucide au survol (reste "plein", pas de confusion avec le hollow) const blackFilled: ActionButtonVariant = { bg: "bg-black", border: "border-black", text: "text-white", hoverBgOpacity: 20, hoverText: "text-black", }; // Exemple de variante custom passée depuis l'extérieur, sans toucher au composant. const purpleHollow: ActionButtonVariant = { border: "border-purple-600", text: "text-purple-600", hoverBg: "bg-purple-600", hoverBorder: "border-purple-600", hoverText: "text-white", }; interface ActionButtonProps { variant?: ActionButtonVariant; // couleurs du bouton (repos + survol) — voir plus haut. Défaut : blackHollow children: string; // texte affiché dans le bouton icon?: React.ReactNode; // icône optionnelle (ex: ) iconPosition?: "left" | "right"; // côté où placer l'icône. Défaut : "right" onClick?: () => void; // callback au clic type?: "button" | "submit" | "reset"; // type HTML natif du bouton. Défaut : "button" (évite un submit accidentel dans un

) disabled?: boolean; // désactive le bouton (grisé, plus de hover/clic). Défaut : false className?: string; // classes Tailwind additionnelles, fusionnées via cn (peuvent override la variante) radius?: ActionButtonRadius; // arrondi des coins (voir radiusClasses). Défaut : "full" (comportement d'origine) } export const ActionButton = ({ variant = blackHollow, children, iconPosition = "right", icon, onClick, type = "button", disabled = false, className, radius = "full", }: ActionButtonProps) => { // survol géré en state plutôt qu'en pur CSS car les classes à appliquer // dépendent de la variante (donc calculées en JS, pas prévisibles à l'avance) const [isHovered, setIsHovered] = useState(false); const hasBgFade = variant.hoverBgOpacity !== undefined; // opacité du fond en survol : celle de la variante si elle en définit une, sinon plein (100) const bgOpacity = isHovered && hasBgFade ? variant.hoverBgOpacity! : 100; // si la variante fait fondre son fond (hoverBgOpacity), la couleur du fond ne change pas, // seule son opacité bouge — sinon on garde l'ancien comportement : classe "hover*" qui remplace celle du repos const bg = hasBgFade ? variant.bg : (isHovered ? variant.hoverBg ?? variant.bg : variant.bg); const border = isHovered ? variant.hoverBorder ?? variant.border : variant.border; // jamais affectée par le fondu : reste à 100% d'opacité const text = hasBgFade ? (isHovered && bgOpacity < READABLE_TEXT_THRESHOLD ? variant.hoverText ?? variant.text : variant.text) : (isHovered ? variant.hoverText ?? variant.text : variant.text); return ( ); }; // Démo visuelle du composant : toutes les variantes, une variante custom, // l'usage avec icône, l'interaction au clic et les états (disabled, className). export default function ActionButtonPreview() { const [clicks, setClicks] = useState(0); return (

Variantes par défaut

blue-filled blue-hollow green-hollow yellow-filled black-filled black-hollow

Variante custom (prop `variant`)

purple-hollow

Avec icône

} iconPosition="right"> Portfolio } iconPosition="left"> Book a call } iconPosition="right"> Télécharger

Interaction (onClick)

setClicks((n) => n + 1)}> Cliquer ici Clics : {clicks}

Arrondi (prop `radius`)

none md xl full (défaut)

États

Désactivé Pleine largeur (className)

); }

ActionButton

Commentaires0