120 lines
4.6 KiB
TypeScript
120 lines
4.6 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState } from 'react'
|
|
import './KomposeIcon.css'
|
|
|
|
interface KomposeIconProps {
|
|
size?: string
|
|
interactive?: boolean
|
|
className?: string
|
|
}
|
|
|
|
export default function KomposeIcon({
|
|
size = '192px',
|
|
interactive = true,
|
|
className = ''
|
|
}: KomposeIconProps) {
|
|
const [isClicked, setIsClicked] = useState(false)
|
|
const [showRipple, setShowRipple] = useState(false)
|
|
|
|
const handleClick = () => {
|
|
if (!interactive) return
|
|
|
|
setIsClicked(true)
|
|
setShowRipple(true)
|
|
|
|
setTimeout(() => {
|
|
setIsClicked(false)
|
|
}, 600)
|
|
|
|
setTimeout(() => {
|
|
setShowRipple(false)
|
|
}, 800)
|
|
}
|
|
|
|
const handleTouch = (e: React.TouchEvent) => {
|
|
if (!interactive) return
|
|
handleClick()
|
|
}
|
|
|
|
const wrapperClasses = [
|
|
'kompose-icon-wrapper',
|
|
isClicked && 'is-clicked',
|
|
interactive && 'is-interactive',
|
|
className
|
|
].filter(Boolean).join(' ')
|
|
|
|
return (
|
|
<div
|
|
className={wrapperClasses}
|
|
onClick={handleClick}
|
|
onTouchStart={handleTouch}
|
|
style={{ width: size, height: size }}
|
|
>
|
|
<svg
|
|
className="kompose-icon"
|
|
viewBox="0 0 192 192"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<defs>
|
|
<pattern id="carbon192" x="0" y="0" width="7.68" height="7.68" patternUnits="userSpaceOnUse">
|
|
<rect width="7.68" height="7.68" fill="#0a0e27"></rect>
|
|
<path d="M0,0 L3.84,3.84 M3.84,0 L7.68,3.84 M0,3.84 L3.84,7.68" stroke="#060815" strokeWidth="1.5" opacity="0.5"></path>
|
|
</pattern>
|
|
|
|
<linearGradient id="bgGrad192" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style={{ stopColor: '#1a1d2e', stopOpacity: 1 }}></stop>
|
|
<stop offset="100%" style={{ stopColor: '#0a0e27', stopOpacity: 1 }}></stop>
|
|
</linearGradient>
|
|
|
|
<linearGradient id="primaryGrad192" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" className="gradient-start" style={{ stopColor: '#00DC82', stopOpacity: 1 }}></stop>
|
|
<stop offset="100%" className="gradient-end" style={{ stopColor: '#00a86b', stopOpacity: 1 }}></stop>
|
|
</linearGradient>
|
|
|
|
<filter id="glow192">
|
|
<feGaussianBlur stdDeviation="6" result="coloredBlur"></feGaussianBlur>
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur"></feMergeNode>
|
|
<feMergeNode in="SourceGraphic"></feMergeNode>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter id="intenseglow192">
|
|
<feGaussianBlur stdDeviation="12" result="coloredBlur"></feGaussianBlur>
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur"></feMergeNode>
|
|
<feMergeNode in="SourceGraphic"></feMergeNode>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
{/* Background */}
|
|
<rect className="bg-rect" width="192" height="192" rx="24" fill="url(#bgGrad192)"></rect>
|
|
<rect className="carbon-pattern" width="192" height="192" rx="24" fill="url(#carbon192)" opacity="0.4"></rect>
|
|
|
|
{/* Stylized K */}
|
|
<g className="k-letter" transform="translate(48, 48)">
|
|
<line className="k-line k-vertical" x1="0" y1="0" x2="0" y2="96" stroke="url(#primaryGrad192)" strokeWidth="15" strokeLinecap="round" filter="url(#glow192)"></line>
|
|
<line className="k-line k-diagonal-top" x1="0" y1="48" x2="57.6" y2="0" stroke="url(#primaryGrad192)" strokeWidth="15" strokeLinecap="round" filter="url(#glow192)"></line>
|
|
<line className="k-line k-diagonal-bottom" x1="0" y1="48" x2="57.6" y2="96" stroke="url(#primaryGrad192)" strokeWidth="15" strokeLinecap="round" filter="url(#glow192)"></line>
|
|
</g>
|
|
|
|
{/* Animated status dot */}
|
|
<circle className="status-dot" cx="163.2" cy="163.2" r="11.52" fill="#00DC82" opacity="0.9"></circle>
|
|
<circle className="status-ring" cx="163.2" cy="163.2" r="17.28" fill="none" stroke="#00DC82" strokeWidth="3" opacity="0.3"></circle>
|
|
|
|
{/* Tech corners */}
|
|
<line className="corner corner-tl-h" x1="15.36" y1="15.36" x2="28.8" y2="15.36" stroke="#00DC82" strokeWidth="3" opacity="0.4"></line>
|
|
<line className="corner corner-tl-v" x1="15.36" y1="15.36" x2="15.36" y2="28.8" stroke="#00DC82" strokeWidth="3" opacity="0.4"></line>
|
|
<line className="corner corner-tr-h" x1="176.64" y1="15.36" x2="163.2" y2="15.36" stroke="#00DC82" strokeWidth="3" opacity="0.4"></line>
|
|
<line className="corner corner-tr-v" x1="176.64" y1="15.36" x2="176.64" y2="28.8" stroke="#00DC82" strokeWidth="3" opacity="0.4"></line>
|
|
</svg>
|
|
|
|
{/* Ripple effect container */}
|
|
{showRipple && <div className="ripple"></div>}
|
|
</div>
|
|
)
|
|
}
|