165 lines
3.6 KiB
TypeScript
165 lines
3.6 KiB
TypeScript
// src/components/ui/NumberIcons.tsx
|
|
import React from "react";
|
|
|
|
interface NumberIconProps extends React.SVGProps<SVGSVGElement> {
|
|
/** Tamanho em pixels. Escala mantendo o viewBox 80x80 */
|
|
size?: number | string;
|
|
/** Classe opcional para sobreposição de estilos */
|
|
className?: string;
|
|
}
|
|
|
|
const baseProps = {
|
|
fill: "none",
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 80 80",
|
|
};
|
|
|
|
/**
|
|
* Primitive SVG elements compartilhados.
|
|
* Depende da classe pai 'group' para engatilhar as micro-interações.
|
|
*/
|
|
const GraphicShell = () => (
|
|
<>
|
|
{/* Base Background */}
|
|
<rect width="80" height="80" rx="8" className="fill-[#0A0A0A]" />
|
|
|
|
{/* Borda reativa ao hover */}
|
|
<rect
|
|
x="1"
|
|
y="1"
|
|
width="78"
|
|
height="78"
|
|
rx="7"
|
|
className="stroke-white/5 transition-colors duration-400 ease-[var(--ease-out)] group-hover:stroke-white/15"
|
|
strokeWidth="1"
|
|
/>
|
|
|
|
{/* Grid de background sutil (Cyberpunk/Tech feel) */}
|
|
<g className="stroke-white/[0.03]" strokeWidth="1">
|
|
<path d="M0 20H80M0 60H80M20 0V80M60 0V80" />
|
|
</g>
|
|
|
|
{/* Brand Slash (Acento) com Motion */}
|
|
<polygon
|
|
points="58,66 62,66 70,50 66,50"
|
|
className="fill-[#E8FF00] transition-transform duration-400 ease-[var(--ease-out)] origin-bottom-right group-hover:-translate-y-1 group-hover:scale-110"
|
|
/>
|
|
</>
|
|
);
|
|
|
|
export const NumberOne = ({
|
|
size = 80,
|
|
className = "",
|
|
...props
|
|
}: NumberIconProps) => (
|
|
<svg
|
|
width={size}
|
|
height={size}
|
|
className={`group ${className}`}
|
|
role="img"
|
|
aria-label="Passo 1"
|
|
{...baseProps}
|
|
{...props}
|
|
>
|
|
<GraphicShell />
|
|
<text
|
|
x="40"
|
|
y="54"
|
|
fontFamily="Syne, sans-serif"
|
|
fontSize="40"
|
|
fontWeight="800"
|
|
textAnchor="middle"
|
|
className="fill-white transition-transform duration-400 ease-[var(--ease-out)] group-hover:-translate-y-0.5"
|
|
>
|
|
1
|
|
</text>
|
|
</svg>
|
|
);
|
|
|
|
export const NumberTwo = ({
|
|
size = 80,
|
|
className = "",
|
|
...props
|
|
}: NumberIconProps) => (
|
|
<svg
|
|
width={size}
|
|
height={size}
|
|
className={`group ${className}`}
|
|
role="img"
|
|
aria-label="Passo 2"
|
|
{...baseProps}
|
|
{...props}
|
|
>
|
|
<GraphicShell />
|
|
<text
|
|
x="40"
|
|
y="54"
|
|
fontFamily="Syne, sans-serif"
|
|
fontSize="40"
|
|
fontWeight="800"
|
|
textAnchor="middle"
|
|
className="fill-white transition-transform duration-400 ease-[var(--ease-out)] group-hover:-translate-y-0.5"
|
|
>
|
|
2
|
|
</text>
|
|
</svg>
|
|
);
|
|
|
|
export const NumberThree = ({
|
|
size = 80,
|
|
className = "",
|
|
...props
|
|
}: NumberIconProps) => (
|
|
<svg
|
|
width={size}
|
|
height={size}
|
|
className={`group ${className}`}
|
|
role="img"
|
|
aria-label="Passo 3"
|
|
{...baseProps}
|
|
{...props}
|
|
>
|
|
<GraphicShell />
|
|
<text
|
|
x="40"
|
|
y="54"
|
|
fontFamily="Syne, sans-serif"
|
|
fontSize="40"
|
|
fontWeight="800"
|
|
textAnchor="middle"
|
|
className="fill-white transition-transform duration-400 ease-[var(--ease-out)] group-hover:-translate-y-0.5"
|
|
>
|
|
3
|
|
</text>
|
|
</svg>
|
|
);
|
|
|
|
export const NumberFour = ({
|
|
size = 80,
|
|
className = "",
|
|
...props
|
|
}: NumberIconProps) => (
|
|
<svg
|
|
width={size}
|
|
height={size}
|
|
className={`group ${className}`}
|
|
role="img"
|
|
aria-label="Passo 4"
|
|
{...baseProps}
|
|
{...props}
|
|
>
|
|
<GraphicShell />
|
|
<text
|
|
x="40"
|
|
y="54"
|
|
fontFamily="Syne, sans-serif"
|
|
fontSize="40"
|
|
fontWeight="800"
|
|
textAnchor="middle"
|
|
className="fill-white transition-transform duration-400 ease-[var(--ease-out)] group-hover:-translate-y-0.5"
|
|
>
|
|
4
|
|
</text>
|
|
</svg>
|
|
);
|