495 lines
12 KiB
TypeScript
495 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import "./PivoineDocsIcon.css";
|
|
|
|
interface PivoineDocsIconProps {
|
|
size?: string;
|
|
interactive?: boolean;
|
|
className?: string;
|
|
showLabel?: boolean;
|
|
}
|
|
|
|
export default function PivoineDocsIcon({
|
|
size = "256px",
|
|
interactive = true,
|
|
className = "",
|
|
showLabel = false,
|
|
}: PivoineDocsIconProps) {
|
|
const [isHovered, setIsHovered] = useState(false);
|
|
const [isClicked, setIsClicked] = useState(false);
|
|
|
|
const handleMouseEnter = () => {
|
|
if (!interactive) return;
|
|
setIsHovered(true);
|
|
};
|
|
|
|
const handleMouseLeave = () => {
|
|
if (!interactive) return;
|
|
setIsHovered(false);
|
|
};
|
|
|
|
const handleClick = () => {
|
|
if (!interactive) return;
|
|
|
|
setIsClicked(true);
|
|
setTimeout(() => {
|
|
setIsClicked(false);
|
|
}, 1200);
|
|
};
|
|
|
|
const handleTouch = (e: React.TouchEvent) => {
|
|
if (!interactive) return;
|
|
e.preventDefault();
|
|
setIsHovered(true);
|
|
|
|
setTimeout(() => {
|
|
handleClick();
|
|
}, 50);
|
|
|
|
setTimeout(() => {
|
|
setIsHovered(false);
|
|
}, 1500);
|
|
};
|
|
|
|
const wrapperClasses = [
|
|
"pivoine-docs-icon-wrapper",
|
|
isHovered && "is-hovered",
|
|
isClicked && "is-clicked",
|
|
interactive && "is-interactive",
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(" ");
|
|
|
|
// Generate bloom particles with varied properties
|
|
const bloomParticles = Array.from({ length: 12 }, (_, i) => ({
|
|
id: i,
|
|
angle: (360 / 12) * i,
|
|
distance: 80 + Math.random() * 20,
|
|
size: 2 + Math.random() * 2,
|
|
delay: i * 0.08,
|
|
}));
|
|
|
|
return (
|
|
<div
|
|
className={wrapperClasses}
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
onClick={handleClick}
|
|
onTouchStart={handleTouch}
|
|
style={{ width: size, height: size, rotate: "5deg" }}
|
|
>
|
|
<svg
|
|
className="pivoine-docs-icon"
|
|
viewBox="0 0 256 256"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<defs>
|
|
{/* Enhanced Gradients for natural peony colors */}
|
|
<radialGradient id="petal-gradient-1" cx="30%" cy="30%">
|
|
<stop
|
|
offset="0%"
|
|
style={{ stopColor: "#fdf4ff", stopOpacity: 1 }}
|
|
/>
|
|
<stop
|
|
offset="40%"
|
|
style={{ stopColor: "#fae8ff", stopOpacity: 1 }}
|
|
/>
|
|
<stop
|
|
offset="70%"
|
|
style={{ stopColor: "#f0abfc", stopOpacity: 1 }}
|
|
/>
|
|
<stop
|
|
offset="100%"
|
|
style={{ stopColor: "#d946ef", stopOpacity: 0.95 }}
|
|
/>
|
|
</radialGradient>
|
|
|
|
<radialGradient id="petal-gradient-2" cx="30%" cy="30%">
|
|
<stop
|
|
offset="0%"
|
|
style={{ stopColor: "#fae8ff", stopOpacity: 1 }}
|
|
/>
|
|
<stop
|
|
offset="40%"
|
|
style={{ stopColor: "#f3e8ff", stopOpacity: 1 }}
|
|
/>
|
|
<stop
|
|
offset="70%"
|
|
style={{ stopColor: "#e9d5ff", stopOpacity: 1 }}
|
|
/>
|
|
<stop
|
|
offset="100%"
|
|
style={{ stopColor: "#c084fc", stopOpacity: 0.95 }}
|
|
/>
|
|
</radialGradient>
|
|
|
|
<radialGradient id="petal-gradient-3" cx="30%" cy="30%">
|
|
<stop
|
|
offset="0%"
|
|
style={{ stopColor: "#fdf4ff", stopOpacity: 1 }}
|
|
/>
|
|
<stop
|
|
offset="40%"
|
|
style={{ stopColor: "#fae8ff", stopOpacity: 1 }}
|
|
/>
|
|
<stop
|
|
offset="70%"
|
|
style={{ stopColor: "#f0abfc", stopOpacity: 1 }}
|
|
/>
|
|
<stop
|
|
offset="100%"
|
|
style={{ stopColor: "#d946ef", stopOpacity: 0.95 }}
|
|
/>
|
|
</radialGradient>
|
|
|
|
<radialGradient id="petal-gradient-4" cx="30%" cy="30%">
|
|
<stop
|
|
offset="0%"
|
|
style={{ stopColor: "#fae8ff", stopOpacity: 1 }}
|
|
/>
|
|
<stop
|
|
offset="40%"
|
|
style={{ stopColor: "#f3e8ff", stopOpacity: 1 }}
|
|
/>
|
|
<stop
|
|
offset="70%"
|
|
style={{ stopColor: "#e9d5ff", stopOpacity: 1 }}
|
|
/>
|
|
<stop
|
|
offset="100%"
|
|
style={{ stopColor: "#c084fc", stopOpacity: 0.95 }}
|
|
/>
|
|
</radialGradient>
|
|
|
|
<radialGradient id="center-gradient" cx="50%" cy="50%">
|
|
<stop
|
|
offset="0%"
|
|
style={{ stopColor: "#fef3c7", stopOpacity: 1 }}
|
|
/>
|
|
<stop
|
|
offset="30%"
|
|
style={{ stopColor: "#fde68a", stopOpacity: 1 }}
|
|
/>
|
|
<stop
|
|
offset="60%"
|
|
style={{ stopColor: "#fbbf24", stopOpacity: 1 }}
|
|
/>
|
|
<stop
|
|
offset="100%"
|
|
style={{ stopColor: "#f59e0b", stopOpacity: 1 }}
|
|
/>
|
|
</radialGradient>
|
|
|
|
<radialGradient id="center-inner-gradient" cx="50%" cy="50%">
|
|
<stop
|
|
offset="0%"
|
|
style={{ stopColor: "#fffbeb", stopOpacity: 1 }}
|
|
/>
|
|
<stop
|
|
offset="50%"
|
|
style={{ stopColor: "#fef3c7", stopOpacity: 1 }}
|
|
/>
|
|
<stop
|
|
offset="100%"
|
|
style={{ stopColor: "#fde68a", stopOpacity: 1 }}
|
|
/>
|
|
</radialGradient>
|
|
|
|
<linearGradient
|
|
id="page-gradient"
|
|
x1="0%"
|
|
y1="0%"
|
|
x2="100%"
|
|
y2="100%"
|
|
>
|
|
<stop
|
|
offset="0%"
|
|
style={{ stopColor: "#ffffff", stopOpacity: 0.98 }}
|
|
/>
|
|
<stop
|
|
offset="100%"
|
|
style={{ stopColor: "#f3f4f6", stopOpacity: 0.98 }}
|
|
/>
|
|
</linearGradient>
|
|
|
|
{/* Enhanced Filters */}
|
|
<filter id="petal-glow">
|
|
<feGaussianBlur stdDeviation="2.5" result="coloredBlur" />
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur" />
|
|
<feMergeNode in="SourceGraphic" />
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter id="intense-glow">
|
|
<feGaussianBlur stdDeviation="8" result="coloredBlur" />
|
|
<feComponentTransfer in="coloredBlur" result="brightBlur">
|
|
<feFuncA type="linear" slope="1.5" />
|
|
</feComponentTransfer>
|
|
<feMerge>
|
|
<feMergeNode in="brightBlur" />
|
|
<feMergeNode in="SourceGraphic" />
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter id="center-glow">
|
|
<feGaussianBlur stdDeviation="4" result="coloredBlur" />
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur" />
|
|
<feMergeNode in="coloredBlur" />
|
|
<feMergeNode in="SourceGraphic" />
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter id="sparkle-glow">
|
|
<feGaussianBlur stdDeviation="2" result="coloredBlur" />
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur" />
|
|
<feMergeNode in="SourceGraphic" />
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter id="page-shadow">
|
|
<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.15" />
|
|
</filter>
|
|
</defs>
|
|
|
|
{/* Subtle background glow */}
|
|
<circle
|
|
className="bg-glow"
|
|
cx="128"
|
|
cy="128"
|
|
r="120"
|
|
fill="url(#petal-gradient-3)"
|
|
opacity="0.08"
|
|
/>
|
|
|
|
{/* Outer layer - Large petals (8 petals) */}
|
|
<g className="outer-petals">
|
|
{[
|
|
{ angle: 0, scaleX: 1.1, scaleY: 1, gradient: 1 },
|
|
{ angle: 45, scaleX: 1, scaleY: 1.05, gradient: 2 },
|
|
{ angle: 90, scaleX: 1.05, scaleY: 1, gradient: 3 },
|
|
{ angle: 135, scaleX: 1, scaleY: 1.1, gradient: 4 },
|
|
{ angle: 180, scaleX: 1.08, scaleY: 1, gradient: 1 },
|
|
{ angle: 225, scaleX: 1, scaleY: 1.02, gradient: 2 },
|
|
{ angle: 270, scaleX: 1.02, scaleY: 1, gradient: 3 },
|
|
{ angle: 315, scaleX: 1, scaleY: 1.06, gradient: 4 },
|
|
].map((petal, i) => (
|
|
<ellipse
|
|
key={`outer-${i}`}
|
|
className={`petal outer-petal petal-${i}`}
|
|
cx="128"
|
|
cy="70"
|
|
rx="40"
|
|
ry="68"
|
|
fill={`url(#petal-gradient-${petal.gradient})`}
|
|
filter="url(#petal-glow)"
|
|
style={{
|
|
rotate: `${petal.angle}deg`,
|
|
width: `${128 * petal.scaleX}px`,
|
|
height: `${70 * petal.scaleY}px`,
|
|
}}
|
|
/>
|
|
))}
|
|
</g>
|
|
|
|
{/* Middle layer - Medium petals (8 petals, offset) */}
|
|
<g className="middle-petals">
|
|
{[
|
|
{ angle: 22.5, scaleX: 1, scaleY: 1, gradient: 2 },
|
|
{ angle: 67.5, scaleX: 1.05, scaleY: 1, gradient: 3 },
|
|
{ angle: 112.5, scaleX: 1, scaleY: 1.02, gradient: 4 },
|
|
{ angle: 157.5, scaleX: 1.02, scaleY: 1, gradient: 1 },
|
|
{ angle: 202.5, scaleX: 1, scaleY: 1.05, gradient: 2 },
|
|
{ angle: 247.5, scaleX: 1.03, scaleY: 1, gradient: 3 },
|
|
{ angle: 292.5, scaleX: 1, scaleY: 1, gradient: 4 },
|
|
{ angle: 337.5, scaleX: 1.02, scaleY: 1, gradient: 1 },
|
|
].map((petal, i) => (
|
|
<ellipse
|
|
key={`middle-${i}`}
|
|
className={`petal middle-petal petal-m-${i}`}
|
|
cx="128"
|
|
cy="78"
|
|
rx="34"
|
|
ry="56"
|
|
fill={`url(#petal-gradient-${petal.gradient})`}
|
|
filter="url(#petal-glow)"
|
|
style={{
|
|
rotate: `${petal.angle}deg`,
|
|
width: `${128 * petal.scaleX}px`,
|
|
height: `${70 * petal.scaleY}px`,
|
|
}}
|
|
/>
|
|
))}
|
|
</g>
|
|
|
|
{/* Inner layer - Small petals (10 petals) */}
|
|
<g className="inner-petals">
|
|
{[
|
|
{ angle: 0, gradient: 3 },
|
|
{ angle: 45, gradient: 4 },
|
|
{ angle: 90, gradient: 1 },
|
|
{ angle: 135, gradient: 2 },
|
|
{ angle: 180, gradient: 3 },
|
|
{ angle: 225, gradient: 4 },
|
|
{ angle: 270, gradient: 1 },
|
|
{ angle: 315, gradient: 2 },
|
|
].map((petal, i) => (
|
|
<ellipse
|
|
key={`inner-${i}`}
|
|
className={`petal inner-petal petal-i-${i}`}
|
|
cx="128"
|
|
cy="88"
|
|
rx="28"
|
|
ry="44"
|
|
fill={`url(#petal-gradient-${petal.gradient})`}
|
|
filter="url(#petal-glow)"
|
|
style={{ rotate: `${petal.angle}deg` }}
|
|
/>
|
|
))}
|
|
</g>
|
|
|
|
{/* Center circles - Flower stamen */}
|
|
<circle
|
|
className="center-circle-outer"
|
|
cx="128"
|
|
cy="128"
|
|
r="12"
|
|
fill="url(#center-gradient)"
|
|
filter="url(#center-glow)"
|
|
/>
|
|
<circle
|
|
className="center-circle-inner"
|
|
cx="128"
|
|
cy="128"
|
|
r="2"
|
|
fill="url(#center-inner-gradient)"
|
|
opacity="0.9"
|
|
/>
|
|
|
|
{/* Center details - tiny stamens */}
|
|
<g className="center-stamens">
|
|
{Array.from({ length: 8 }).map((_, i) => {
|
|
const angle = (360 / 8) * i;
|
|
const x = 128 + Math.cos((angle * Math.PI) / 180) * 10;
|
|
const y = 128 + Math.sin((angle * Math.PI) / 180) * 10;
|
|
return (
|
|
<circle
|
|
key={`stamen-${i}`}
|
|
className={`stamen stamen-${i}`}
|
|
cx={x}
|
|
cy={y}
|
|
r="2"
|
|
fill="#d97706"
|
|
opacity="0.8"
|
|
/>
|
|
);
|
|
})}
|
|
</g>
|
|
|
|
{/* Sparkles - ambient magical effect */}
|
|
<g className="sparkles">
|
|
<circle
|
|
className="sparkle sparkle-1"
|
|
cx="180"
|
|
cy="75"
|
|
r="3"
|
|
fill="#fbbf24"
|
|
filter="url(#sparkle-glow)"
|
|
/>
|
|
<circle
|
|
className="sparkle sparkle-2"
|
|
cx="76"
|
|
cy="76"
|
|
r="2.5"
|
|
fill="#a855f7"
|
|
filter="url(#sparkle-glow)"
|
|
/>
|
|
<circle
|
|
className="sparkle sparkle-3"
|
|
cx="180"
|
|
cy="180"
|
|
r="2.5"
|
|
fill="#ec4899"
|
|
filter="url(#sparkle-glow)"
|
|
/>
|
|
<circle
|
|
className="sparkle sparkle-4"
|
|
cx="76"
|
|
cy="180"
|
|
r="3"
|
|
fill="#c026d3"
|
|
filter="url(#sparkle-glow)"
|
|
/>
|
|
<circle
|
|
className="sparkle sparkle-5"
|
|
cx="128"
|
|
cy="50"
|
|
r="2"
|
|
fill="#f0abfc"
|
|
filter="url(#sparkle-glow)"
|
|
/>
|
|
<circle
|
|
className="sparkle sparkle-6"
|
|
cx="206"
|
|
cy="128"
|
|
r="2"
|
|
fill="#fb7185"
|
|
filter="url(#sparkle-glow)"
|
|
/>
|
|
<circle
|
|
className="sparkle sparkle-7"
|
|
cx="128"
|
|
cy="206"
|
|
r="2.5"
|
|
fill="#fbbf24"
|
|
filter="url(#sparkle-glow)"
|
|
/>
|
|
<circle
|
|
className="sparkle sparkle-8"
|
|
cx="50"
|
|
cy="128"
|
|
r="2"
|
|
fill="#c084fc"
|
|
filter="url(#sparkle-glow)"
|
|
/>
|
|
</g>
|
|
|
|
{/* Flying bloom particles (visible on hover) */}
|
|
<g className="bloom-particles">
|
|
{bloomParticles.map((particle) => (
|
|
<circle
|
|
key={`bloom-particle-${particle.id}`}
|
|
className={`bloom-particle bloom-particle-${particle.id}`}
|
|
cx="128"
|
|
cy="128"
|
|
r={particle.size}
|
|
fill={`url(#petal-gradient-${(particle.id % 4) + 1})`}
|
|
opacity="0"
|
|
filter="url(#sparkle-glow)"
|
|
style={
|
|
{
|
|
"--particle-angle": `${particle.angle}deg`,
|
|
"--particle-distance": `${particle.distance}px`,
|
|
"--particle-delay": `${particle.delay}s`,
|
|
} as React.CSSProperties
|
|
}
|
|
/>
|
|
))}
|
|
</g>
|
|
</svg>
|
|
|
|
{/* Optional label */}
|
|
{showLabel && (
|
|
<div className="icon-label">
|
|
<span className="label-text">Pivoine Docs</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|