Botón persiana editorial

"use client";

import { type CSSProperties } from "react";

/** Botón persiana editorial. React + TypeScript, sin dependencias. Personaliza con variables --gcxp-*. */
export type BotonPersianaProps = {
  label?: string;
  href?: string;
  onClick?: () => void;
  className?: string;
  style?: CSSProperties;
};

const CSS = `
.gcxp-root { box-sizing: border-box; min-width: 0; max-width: 100%; color: var(--gcxp-fg, #202421); font: 400 15px/1.5 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.gcxp-root *, .gcxp-root *::before, .gcxp-root *::after { box-sizing: border-box; }
.gcxp-root button, .gcxp-root input, .gcxp-root textarea, .gcxp-root select { font: inherit; }
.gcxp-root button, .gcxp-root a { -webkit-tap-highlight-color: transparent; }
.gcxp-root :focus-visible { outline: 2px solid var(--gcxp-accent, #25724b); outline-offset: 4px; }
.gcxp-root ::selection { background: var(--gcxp-accent, #25724b); color: #fff; }
.gcxp-root button:disabled { opacity: .5; cursor: not-allowed; }
.gcxp-root svg { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .gcxp-root *, .gcxp-root *::before, .gcxp-root *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
.gcxp-action { position: relative; isolation: isolate; display: inline-flex; overflow: hidden; padding: 18px 26px; background: var(--gcxp-bg, #eee8dc); border: 1px solid #38382f; border-radius: 0; color: #34382e; cursor: pointer; text-decoration: none; }
.gcxp-label { position: relative; display: flex; gap: 28px; align-items: center; font-weight: 600; transition: color .2s; }
.gcxp-shutters { position: absolute; inset: 0; display: flex; }
.gcxp-shutters i { flex: 1; background: var(--gcxp-accent, #34382e); transform: translateY(102%); transition: transform .45s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--gcxp-i) * 35ms); }
.gcxp-action:is(:hover,:focus-visible) .gcxp-shutters i { transform: translateY(0); }
.gcxp-action:is(:hover,:focus-visible) { color: #fff; }
.gcxp-action:active .gcxp-label { transform: translateY(1px); }`;

export function BotonPersiana({
  label = "Explorar la colección",
  href,
  onClick,
  className = "",
  style,
}: BotonPersianaProps) {
  const content = (
    <>
      <span className="gcxp-shutters" aria-hidden="true">
        {[0, 1, 2, 3, 4].map((i) => (
          <i key={i} style={{ "--gcxp-i": i } as CSSProperties} />
        ))}
      </span>
      <span className="gcxp-label">
        {label}
        <svg
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          aria-hidden="true"
        >
          <path d="M4 12h16m-6-6 6 6-6 6" />
        </svg>
      </span>
    </>
  );
  return (
    <div className={`gcxp-root ${className}`} style={style}>
      <style>{CSS}</style>
      {href ? (
        <a className="gcxp-action" href={href}>
          {content}
        </a>
      ) : (
        <button className="gcxp-action" type="button" onClick={onClick}>
          {content}
        </button>
      )}
    </div>
  );
}

npx shadcn@latest add https://www.gassierconsulting.com/r/boton-persiana

import { BotonPersiana } from "./boton-persiana";

export default function Ejemplo() {
  return <BotonPersiana label="Ejemplo" />;
}