141 lines
3.6 KiB
TypeScript
141 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>
|
|
);
|