chore: format
This commit is contained in:
@@ -1,302 +1,407 @@
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import PivoineDocsIcon from './PivoineDocsIcon'
|
||||
import PivoineDocsIcon from "./PivoineDocsIcon";
|
||||
|
||||
export default function PivoineIconDemo() {
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
background: 'linear-gradient(135deg, #1e293b 0%, #0f172a 100%)',
|
||||
padding: '4rem 2rem',
|
||||
color: '#fff'
|
||||
}}>
|
||||
<div style={{
|
||||
maxWidth: '1400px',
|
||||
margin: '0 auto'
|
||||
}}>
|
||||
{/* Header */}
|
||||
<div style={{ textAlign: 'center', marginBottom: '4rem' }}>
|
||||
<h1 style={{
|
||||
fontSize: '3rem',
|
||||
fontWeight: 'bold',
|
||||
background: 'linear-gradient(135deg, #ec4899, #a855f7, #c084fc)',
|
||||
backgroundClip: 'text',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
marginBottom: '1rem'
|
||||
}}>
|
||||
Pivoine Docs Icon
|
||||
</h1>
|
||||
<p style={{
|
||||
fontSize: '1.25rem',
|
||||
color: '#94a3b8',
|
||||
maxWidth: '600px',
|
||||
margin: '0 auto'
|
||||
}}>
|
||||
A beautiful animated peony blossom icon with interactive states
|
||||
</p>
|
||||
</div>
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
minHeight: "100vh",
|
||||
background: "linear-gradient(135deg, #1e293b 0%, #0f172a 100%)",
|
||||
padding: "4rem 2rem",
|
||||
color: "#fff",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
maxWidth: "1400px",
|
||||
margin: "0 auto",
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div style={{ textAlign: "center", marginBottom: "4rem" }}>
|
||||
<h1
|
||||
style={{
|
||||
fontSize: "3rem",
|
||||
fontWeight: "bold",
|
||||
background: "linear-gradient(135deg, #ec4899, #a855f7, #c084fc)",
|
||||
backgroundClip: "text",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
marginBottom: "1rem",
|
||||
}}
|
||||
>
|
||||
Pivoine Docs Icon
|
||||
</h1>
|
||||
<p
|
||||
style={{
|
||||
fontSize: "1.25rem",
|
||||
color: "#94a3b8",
|
||||
maxWidth: "600px",
|
||||
margin: "0 auto",
|
||||
}}
|
||||
>
|
||||
A beautiful animated peony blossom icon with interactive states
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Main Showcase */}
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
|
||||
gap: '3rem',
|
||||
marginBottom: '4rem'
|
||||
}}>
|
||||
{/* Large Interactive */}
|
||||
<div style={{
|
||||
background: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: '1rem',
|
||||
padding: '2rem',
|
||||
textAlign: 'center',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)'
|
||||
}}>
|
||||
<h3 style={{ marginBottom: '1.5rem', color: '#f472b6' }}>
|
||||
Interactive (Hover & Click)
|
||||
</h3>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
minHeight: '320px'
|
||||
}}>
|
||||
<PivoineDocsIcon size="280px" />
|
||||
</div>
|
||||
<p style={{ color: '#94a3b8', fontSize: '0.875rem', marginTop: '1rem' }}>
|
||||
Hover to bloom • Click to close
|
||||
</p>
|
||||
</div>
|
||||
{/* Main Showcase */}
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
|
||||
gap: "3rem",
|
||||
marginBottom: "4rem",
|
||||
}}
|
||||
>
|
||||
{/* Large Interactive */}
|
||||
<div
|
||||
style={{
|
||||
background: "rgba(255, 255, 255, 0.05)",
|
||||
borderRadius: "1rem",
|
||||
padding: "2rem",
|
||||
textAlign: "center",
|
||||
backdropFilter: "blur(10px)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
}}
|
||||
>
|
||||
<h3 style={{ marginBottom: "1.5rem", color: "#f472b6" }}>
|
||||
Interactive (Hover & Click)
|
||||
</h3>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
minHeight: "320px",
|
||||
}}
|
||||
>
|
||||
<PivoineDocsIcon size="280px" />
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
color: "#94a3b8",
|
||||
fontSize: "0.875rem",
|
||||
marginTop: "1rem",
|
||||
}}
|
||||
>
|
||||
Hover to bloom • Click to close
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* With Label */}
|
||||
<div style={{
|
||||
background: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: '1rem',
|
||||
padding: '2rem',
|
||||
textAlign: 'center',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)'
|
||||
}}>
|
||||
<h3 style={{ marginBottom: '1.5rem', color: '#c084fc' }}>
|
||||
With Label
|
||||
</h3>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
minHeight: '320px'
|
||||
}}>
|
||||
<PivoineDocsIcon size="240px" showLabel />
|
||||
</div>
|
||||
<p style={{ color: '#94a3b8', fontSize: '0.875rem', marginTop: '1rem' }}>
|
||||
Perfect for hero sections
|
||||
</p>
|
||||
</div>
|
||||
{/* With Label */}
|
||||
<div
|
||||
style={{
|
||||
background: "rgba(255, 255, 255, 0.05)",
|
||||
borderRadius: "1rem",
|
||||
padding: "2rem",
|
||||
textAlign: "center",
|
||||
backdropFilter: "blur(10px)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
}}
|
||||
>
|
||||
<h3 style={{ marginBottom: "1.5rem", color: "#c084fc" }}>
|
||||
With Label
|
||||
</h3>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
minHeight: "320px",
|
||||
}}
|
||||
>
|
||||
<PivoineDocsIcon size="240px" showLabel />
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
color: "#94a3b8",
|
||||
fontSize: "0.875rem",
|
||||
marginTop: "1rem",
|
||||
}}
|
||||
>
|
||||
Perfect for hero sections
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Non-Interactive */}
|
||||
<div style={{
|
||||
background: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: '1rem',
|
||||
padding: '2rem',
|
||||
textAlign: 'center',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)'
|
||||
}}>
|
||||
<h3 style={{ marginBottom: '1.5rem', color: '#fb7185' }}>
|
||||
Static (Non-Interactive)
|
||||
</h3>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
minHeight: '320px'
|
||||
}}>
|
||||
<PivoineDocsIcon size="240px" interactive={false} />
|
||||
</div>
|
||||
<p style={{ color: '#94a3b8', fontSize: '0.875rem', marginTop: '1rem' }}>
|
||||
Ideal for favicons & PWA icons
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Non-Interactive */}
|
||||
<div
|
||||
style={{
|
||||
background: "rgba(255, 255, 255, 0.05)",
|
||||
borderRadius: "1rem",
|
||||
padding: "2rem",
|
||||
textAlign: "center",
|
||||
backdropFilter: "blur(10px)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
}}
|
||||
>
|
||||
<h3 style={{ marginBottom: "1.5rem", color: "#fb7185" }}>
|
||||
Static (Non-Interactive)
|
||||
</h3>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
minHeight: "320px",
|
||||
}}
|
||||
>
|
||||
<PivoineDocsIcon size="240px" interactive={false} />
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
color: "#94a3b8",
|
||||
fontSize: "0.875rem",
|
||||
marginTop: "1rem",
|
||||
}}
|
||||
>
|
||||
Ideal for favicons & PWA icons
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Size Variations */}
|
||||
<div style={{
|
||||
background: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: '1rem',
|
||||
padding: '3rem',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)',
|
||||
marginBottom: '4rem'
|
||||
}}>
|
||||
<h2 style={{
|
||||
fontSize: '2rem',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '2rem',
|
||||
textAlign: 'center',
|
||||
color: '#f0abfc'
|
||||
}}>
|
||||
Size Variations
|
||||
</h2>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'flex-end',
|
||||
flexWrap: 'wrap',
|
||||
gap: '2rem',
|
||||
padding: '2rem'
|
||||
}}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<PivoineDocsIcon size="64px" />
|
||||
<p style={{ color: '#94a3b8', fontSize: '0.75rem', marginTop: '0.5rem' }}>
|
||||
64px<br />Favicon
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<PivoineDocsIcon size="96px" />
|
||||
<p style={{ color: '#94a3b8', fontSize: '0.75rem', marginTop: '0.5rem' }}>
|
||||
96px<br />Small
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<PivoineDocsIcon size="128px" />
|
||||
<p style={{ color: '#94a3b8', fontSize: '0.75rem', marginTop: '0.5rem' }}>
|
||||
128px<br />Medium
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<PivoineDocsIcon size="192px" />
|
||||
<p style={{ color: '#94a3b8', fontSize: '0.75rem', marginTop: '0.5rem' }}>
|
||||
192px<br />Large
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<PivoineDocsIcon size="256px" />
|
||||
<p style={{ color: '#94a3b8', fontSize: '0.75rem', marginTop: '0.5rem' }}>
|
||||
256px<br />X-Large
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Size Variations */}
|
||||
<div
|
||||
style={{
|
||||
background: "rgba(255, 255, 255, 0.05)",
|
||||
borderRadius: "1rem",
|
||||
padding: "3rem",
|
||||
backdropFilter: "blur(10px)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
marginBottom: "4rem",
|
||||
}}
|
||||
>
|
||||
<h2
|
||||
style={{
|
||||
fontSize: "2rem",
|
||||
fontWeight: "bold",
|
||||
marginBottom: "2rem",
|
||||
textAlign: "center",
|
||||
color: "#f0abfc",
|
||||
}}
|
||||
>
|
||||
Size Variations
|
||||
</h2>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-around",
|
||||
alignItems: "flex-end",
|
||||
flexWrap: "wrap",
|
||||
gap: "2rem",
|
||||
padding: "2rem",
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<PivoineDocsIcon size="64px" />
|
||||
<p
|
||||
style={{
|
||||
color: "#94a3b8",
|
||||
fontSize: "0.75rem",
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
>
|
||||
64px
|
||||
<br />
|
||||
Favicon
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<PivoineDocsIcon size="96px" />
|
||||
<p
|
||||
style={{
|
||||
color: "#94a3b8",
|
||||
fontSize: "0.75rem",
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
>
|
||||
96px
|
||||
<br />
|
||||
Small
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<PivoineDocsIcon size="128px" />
|
||||
<p
|
||||
style={{
|
||||
color: "#94a3b8",
|
||||
fontSize: "0.75rem",
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
>
|
||||
128px
|
||||
<br />
|
||||
Medium
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<PivoineDocsIcon size="192px" />
|
||||
<p
|
||||
style={{
|
||||
color: "#94a3b8",
|
||||
fontSize: "0.75rem",
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
>
|
||||
192px
|
||||
<br />
|
||||
Large
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<PivoineDocsIcon size="256px" />
|
||||
<p
|
||||
style={{
|
||||
color: "#94a3b8",
|
||||
fontSize: "0.75rem",
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
>
|
||||
256px
|
||||
<br />
|
||||
X-Large
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Feature List */}
|
||||
<div style={{
|
||||
background: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: '1rem',
|
||||
padding: '3rem',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)'
|
||||
}}>
|
||||
<h2 style={{
|
||||
fontSize: '2rem',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '2rem',
|
||||
textAlign: 'center',
|
||||
color: '#f0abfc'
|
||||
}}>
|
||||
Features
|
||||
</h2>
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
|
||||
gap: '2rem'
|
||||
}}>
|
||||
{[
|
||||
{
|
||||
icon: '🌸',
|
||||
title: 'Realistic Design',
|
||||
description: 'Multi-layered peony with natural gradients'
|
||||
},
|
||||
{
|
||||
icon: '✨',
|
||||
title: 'Smooth Animations',
|
||||
description: 'Gentle breathing in normal state'
|
||||
},
|
||||
{
|
||||
icon: '🎭',
|
||||
title: 'Interactive States',
|
||||
description: 'Bloom on hover, close on click'
|
||||
},
|
||||
{
|
||||
icon: '💫',
|
||||
title: 'Particle Effects',
|
||||
description: '12 bloom particles flying around'
|
||||
},
|
||||
{
|
||||
icon: '🎨',
|
||||
title: 'Beautiful Colors',
|
||||
description: 'Pink to purple gradient palette'
|
||||
},
|
||||
{
|
||||
icon: '♿',
|
||||
title: 'Accessible',
|
||||
description: 'Reduced motion & touch support'
|
||||
},
|
||||
{
|
||||
icon: '📱',
|
||||
title: 'Responsive',
|
||||
description: 'Works perfectly on all devices'
|
||||
},
|
||||
{
|
||||
icon: '⚡',
|
||||
title: 'High Performance',
|
||||
description: 'GPU-accelerated CSS animations'
|
||||
}
|
||||
].map((feature, i) => (
|
||||
<div key={i} style={{
|
||||
padding: '1.5rem',
|
||||
background: 'rgba(255, 255, 255, 0.03)',
|
||||
borderRadius: '0.75rem',
|
||||
border: '1px solid rgba(255, 255, 255, 0.08)'
|
||||
}}>
|
||||
<div style={{ fontSize: '2rem', marginBottom: '0.75rem' }}>
|
||||
{feature.icon}
|
||||
</div>
|
||||
<h4 style={{
|
||||
fontSize: '1.125rem',
|
||||
fontWeight: '600',
|
||||
marginBottom: '0.5rem',
|
||||
color: '#fda4af'
|
||||
}}>
|
||||
{feature.title}
|
||||
</h4>
|
||||
<p style={{
|
||||
fontSize: '0.875rem',
|
||||
color: '#94a3b8'
|
||||
}}>
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* Feature List */}
|
||||
<div
|
||||
style={{
|
||||
background: "rgba(255, 255, 255, 0.05)",
|
||||
borderRadius: "1rem",
|
||||
padding: "3rem",
|
||||
backdropFilter: "blur(10px)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
}}
|
||||
>
|
||||
<h2
|
||||
style={{
|
||||
fontSize: "2rem",
|
||||
fontWeight: "bold",
|
||||
marginBottom: "2rem",
|
||||
textAlign: "center",
|
||||
color: "#f0abfc",
|
||||
}}
|
||||
>
|
||||
Features
|
||||
</h2>
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
|
||||
gap: "2rem",
|
||||
}}
|
||||
>
|
||||
{[
|
||||
{
|
||||
icon: "🌸",
|
||||
title: "Realistic Design",
|
||||
description: "Multi-layered peony with natural gradients",
|
||||
},
|
||||
{
|
||||
icon: "✨",
|
||||
title: "Smooth Animations",
|
||||
description: "Gentle breathing in normal state",
|
||||
},
|
||||
{
|
||||
icon: "🎭",
|
||||
title: "Interactive States",
|
||||
description: "Bloom on hover, close on click",
|
||||
},
|
||||
{
|
||||
icon: "💫",
|
||||
title: "Particle Effects",
|
||||
description: "12 bloom particles flying around",
|
||||
},
|
||||
{
|
||||
icon: "🎨",
|
||||
title: "Beautiful Colors",
|
||||
description: "Pink to purple gradient palette",
|
||||
},
|
||||
{
|
||||
icon: "♿",
|
||||
title: "Accessible",
|
||||
description: "Reduced motion & touch support",
|
||||
},
|
||||
{
|
||||
icon: "📱",
|
||||
title: "Responsive",
|
||||
description: "Works perfectly on all devices",
|
||||
},
|
||||
{
|
||||
icon: "⚡",
|
||||
title: "High Performance",
|
||||
description: "GPU-accelerated CSS animations",
|
||||
},
|
||||
].map((feature, i) => (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
padding: "1.5rem",
|
||||
background: "rgba(255, 255, 255, 0.03)",
|
||||
borderRadius: "0.75rem",
|
||||
border: "1px solid rgba(255, 255, 255, 0.08)",
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: "2rem", marginBottom: "0.75rem" }}>
|
||||
{feature.icon}
|
||||
</div>
|
||||
<h4
|
||||
style={{
|
||||
fontSize: "1.125rem",
|
||||
fontWeight: "600",
|
||||
marginBottom: "0.5rem",
|
||||
color: "#fda4af",
|
||||
}}
|
||||
>
|
||||
{feature.title}
|
||||
</h4>
|
||||
<p
|
||||
style={{
|
||||
fontSize: "0.875rem",
|
||||
color: "#94a3b8",
|
||||
}}
|
||||
>
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Usage Example */}
|
||||
<div style={{
|
||||
marginTop: '4rem',
|
||||
background: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: '1rem',
|
||||
padding: '2rem',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)'
|
||||
}}>
|
||||
<h2 style={{
|
||||
fontSize: '1.5rem',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '1rem',
|
||||
color: '#f0abfc'
|
||||
}}>
|
||||
Quick Start
|
||||
</h2>
|
||||
<pre style={{
|
||||
background: 'rgba(0, 0, 0, 0.3)',
|
||||
padding: '1.5rem',
|
||||
borderRadius: '0.5rem',
|
||||
overflow: 'auto',
|
||||
fontSize: '0.875rem',
|
||||
color: '#e2e8f0'
|
||||
}}>
|
||||
{`import PivoineDocsIcon from '@/components/icons/PivoineDocsIcon'
|
||||
{/* Usage Example */}
|
||||
<div
|
||||
style={{
|
||||
marginTop: "4rem",
|
||||
background: "rgba(255, 255, 255, 0.05)",
|
||||
borderRadius: "1rem",
|
||||
padding: "2rem",
|
||||
backdropFilter: "blur(10px)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
}}
|
||||
>
|
||||
<h2
|
||||
style={{
|
||||
fontSize: "1.5rem",
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
color: "#f0abfc",
|
||||
}}
|
||||
>
|
||||
Quick Start
|
||||
</h2>
|
||||
<pre
|
||||
style={{
|
||||
background: "rgba(0, 0, 0, 0.3)",
|
||||
padding: "1.5rem",
|
||||
borderRadius: "0.5rem",
|
||||
overflow: "auto",
|
||||
fontSize: "0.875rem",
|
||||
color: "#e2e8f0",
|
||||
}}
|
||||
>
|
||||
{`import PivoineDocsIcon from '@/components/icons/PivoineDocsIcon'
|
||||
|
||||
// Basic usage
|
||||
<PivoineDocsIcon size="256px" />
|
||||
@@ -306,19 +411,21 @@ export default function PivoineIconDemo() {
|
||||
|
||||
// Static for favicon
|
||||
<PivoineDocsIcon size="128px" interactive={false} />`}
|
||||
</pre>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div style={{
|
||||
marginTop: '4rem',
|
||||
textAlign: 'center',
|
||||
color: '#64748b',
|
||||
fontSize: '0.875rem'
|
||||
}}>
|
||||
<p>Made with 🌸 for beautiful documentation experiences</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
{/* Footer */}
|
||||
<div
|
||||
style={{
|
||||
marginTop: "4rem",
|
||||
textAlign: "center",
|
||||
color: "#64748b",
|
||||
fontSize: "0.875rem",
|
||||
}}
|
||||
>
|
||||
<p>Made with 🌸 for beautiful documentation experiences</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,333 +1,334 @@
|
||||
/* Kompose Icon Styles */
|
||||
|
||||
.kompose-icon-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
transform-style: preserve-3d;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper:not(.is-interactive) {
|
||||
cursor: default;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.kompose-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
filter: drop-shadow(0 4px 20px rgba(0, 220, 130, 0.2));
|
||||
transition: filter 0.4s ease;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
filter: drop-shadow(0 4px 20px rgba(0, 220, 130, 0.2));
|
||||
transition: filter 0.4s ease;
|
||||
}
|
||||
|
||||
/* Hover Effects */
|
||||
.kompose-icon-wrapper.is-interactive:hover {
|
||||
transform: scale(1.05) translateY(-2px);
|
||||
transform: scale(1.05) translateY(-2px);
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-interactive:hover .kompose-icon {
|
||||
filter: drop-shadow(0 8px 30px rgba(0, 220, 130, 0.4));
|
||||
animation: subtle-pulse 2s ease-in-out infinite;
|
||||
filter: drop-shadow(0 8px 30px rgba(0, 220, 130, 0.4));
|
||||
animation: subtle-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-interactive:hover .bg-rect {
|
||||
animation: bg-glow 2s ease-in-out infinite;
|
||||
animation: bg-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-interactive:hover .k-letter {
|
||||
animation: letter-glow 1.5s ease-in-out infinite;
|
||||
animation: letter-glow 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-interactive:hover .k-vertical {
|
||||
animation: line-slide-vertical 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
animation: line-slide-vertical 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-interactive:hover .k-diagonal-top {
|
||||
animation: line-slide-diagonal-top 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
|
||||
animation: line-slide-diagonal-top 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-interactive:hover .k-diagonal-bottom {
|
||||
animation: line-slide-diagonal-bottom 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
|
||||
animation: line-slide-diagonal-bottom 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)
|
||||
0.2s;
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-interactive:hover .status-dot {
|
||||
animation: pulse-expand 1s ease-in-out infinite;
|
||||
animation: pulse-expand 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-interactive:hover .status-ring {
|
||||
animation: ring-pulse 1.5s ease-in-out infinite;
|
||||
animation: ring-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-interactive:hover .corner {
|
||||
opacity: 1 !important;
|
||||
animation: corner-extend 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
opacity: 1 !important;
|
||||
animation: corner-extend 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
/* Click/Active Effects */
|
||||
.kompose-icon-wrapper.is-clicked {
|
||||
animation: click-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
animation: click-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-clicked .kompose-icon {
|
||||
animation: rotate-3d 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
filter: drop-shadow(0 12px 40px rgba(0, 220, 130, 0.6));
|
||||
animation: rotate-3d 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
filter: drop-shadow(0 12px 40px rgba(0, 220, 130, 0.6));
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-clicked .k-letter {
|
||||
animation: letter-flash 0.6s ease-out;
|
||||
filter: url(#intenseglow192);
|
||||
animation: letter-flash 0.6s ease-out;
|
||||
filter: url(#intenseglow192);
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-clicked .status-dot {
|
||||
animation: dot-burst 0.6s ease-out;
|
||||
animation: dot-burst 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* Ripple Effect */
|
||||
.ripple {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(0, 220, 130, 0.6) 0%,
|
||||
rgba(0, 220, 130, 0) 70%
|
||||
);
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
animation: ripple-expand 0.8s ease-out;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(0, 220, 130, 0.6) 0%,
|
||||
rgba(0, 220, 130, 0) 70%
|
||||
);
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
animation: ripple-expand 0.8s ease-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Default animations for status dot */
|
||||
.status-dot {
|
||||
animation: default-pulse 2s ease-in-out infinite;
|
||||
animation: default-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.status-ring {
|
||||
animation: default-ring-pulse 2s ease-in-out infinite;
|
||||
animation: default-ring-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Keyframe Animations */
|
||||
@keyframes subtle-pulse {
|
||||
0%,
|
||||
100% {
|
||||
filter: drop-shadow(0 8px 30px rgba(0, 220, 130, 0.4));
|
||||
}
|
||||
50% {
|
||||
filter: drop-shadow(0 8px 35px rgba(0, 220, 130, 0.6));
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
filter: drop-shadow(0 8px 30px rgba(0, 220, 130, 0.4));
|
||||
}
|
||||
50% {
|
||||
filter: drop-shadow(0 8px 35px rgba(0, 220, 130, 0.6));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bg-glow {
|
||||
0%,
|
||||
100% {
|
||||
filter: brightness(1);
|
||||
}
|
||||
50% {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
filter: brightness(1);
|
||||
}
|
||||
50% {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes letter-glow {
|
||||
0%,
|
||||
100% {
|
||||
filter: url(#glow192);
|
||||
}
|
||||
50% {
|
||||
filter: url(#intenseglow192);
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
filter: url(#glow192);
|
||||
}
|
||||
50% {
|
||||
filter: url(#intenseglow192);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes line-slide-vertical {
|
||||
0% {
|
||||
stroke-dasharray: 96;
|
||||
stroke-dashoffset: 96;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 96;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
0% {
|
||||
stroke-dasharray: 96;
|
||||
stroke-dashoffset: 96;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 96;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes line-slide-diagonal-top {
|
||||
0% {
|
||||
stroke-dasharray: 68;
|
||||
stroke-dashoffset: 68;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 68;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
0% {
|
||||
stroke-dasharray: 68;
|
||||
stroke-dashoffset: 68;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 68;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes line-slide-diagonal-bottom {
|
||||
0% {
|
||||
stroke-dasharray: 68;
|
||||
stroke-dashoffset: 68;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 68;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
0% {
|
||||
stroke-dasharray: 68;
|
||||
stroke-dashoffset: 68;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 68;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-expand {
|
||||
0%,
|
||||
100% {
|
||||
r: 11.52;
|
||||
opacity: 0.9;
|
||||
}
|
||||
50% {
|
||||
r: 14;
|
||||
opacity: 1;
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
r: 11.52;
|
||||
opacity: 0.9;
|
||||
}
|
||||
50% {
|
||||
r: 14;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ring-pulse {
|
||||
0%,
|
||||
100% {
|
||||
r: 17.28;
|
||||
opacity: 0.3;
|
||||
stroke-width: 3;
|
||||
}
|
||||
50% {
|
||||
r: 20;
|
||||
opacity: 0.6;
|
||||
stroke-width: 2;
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
r: 17.28;
|
||||
opacity: 0.3;
|
||||
stroke-width: 3;
|
||||
}
|
||||
50% {
|
||||
r: 20;
|
||||
opacity: 0.6;
|
||||
stroke-width: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes corner-extend {
|
||||
0% {
|
||||
stroke-dasharray: 13.44;
|
||||
stroke-dashoffset: 13.44;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 13.44;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
0% {
|
||||
stroke-dasharray: 13.44;
|
||||
stroke-dashoffset: 13.44;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 13.44;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes click-bounce {
|
||||
0% {
|
||||
transform: scale(1) translateY(0) rotateY(0deg);
|
||||
}
|
||||
30% {
|
||||
transform: scale(0.92) translateY(0) rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.08) translateY(-4px) rotateY(180deg);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.98) translateY(0) rotateY(360deg);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) translateY(0) rotateY(360deg);
|
||||
}
|
||||
0% {
|
||||
transform: scale(1) translateY(0) rotateY(0deg);
|
||||
}
|
||||
30% {
|
||||
transform: scale(0.92) translateY(0) rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.08) translateY(-4px) rotateY(180deg);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.98) translateY(0) rotateY(360deg);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) translateY(0) rotateY(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate-3d {
|
||||
0% {
|
||||
transform: perspective(800px) rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: perspective(800px) rotateY(180deg);
|
||||
}
|
||||
100% {
|
||||
transform: perspective(800px) rotateY(360deg);
|
||||
}
|
||||
0% {
|
||||
transform: perspective(800px) rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: perspective(800px) rotateY(180deg);
|
||||
}
|
||||
100% {
|
||||
transform: perspective(800px) rotateY(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes letter-flash {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
20%,
|
||||
60% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
40%,
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
20%,
|
||||
60% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
40%,
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dot-burst {
|
||||
0% {
|
||||
r: 11.52;
|
||||
opacity: 0.9;
|
||||
}
|
||||
50% {
|
||||
r: 20;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
r: 11.52;
|
||||
opacity: 0.9;
|
||||
}
|
||||
0% {
|
||||
r: 11.52;
|
||||
opacity: 0.9;
|
||||
}
|
||||
50% {
|
||||
r: 20;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
r: 11.52;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ripple-expand {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(2.5);
|
||||
opacity: 0;
|
||||
}
|
||||
0% {
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(2.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes default-pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.6;
|
||||
r: 11.52;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
r: 13.44;
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.6;
|
||||
r: 11.52;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
r: 13.44;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes default-ring-pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.kompose-icon-wrapper.is-interactive:hover {
|
||||
transform: scale(1.03) translateY(-1px);
|
||||
}
|
||||
.kompose-icon-wrapper.is-interactive:hover {
|
||||
transform: scale(1.03) translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced motion support */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.kompose-icon-wrapper,
|
||||
.kompose-icon,
|
||||
.kompose-icon *,
|
||||
.ripple {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
.kompose-icon-wrapper,
|
||||
.kompose-icon,
|
||||
.kompose-icon *,
|
||||
.ripple {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.kompose-icon-wrapper.is-interactive:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
.kompose-icon-wrapper.is-interactive:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch device optimizations */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.kompose-icon-wrapper.is-interactive:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.kompose-icon-wrapper.is-interactive:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,119 +1,254 @@
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import './KomposeIcon.css'
|
||||
import React, { useState } from "react";
|
||||
import "./KomposeIcon.css";
|
||||
|
||||
interface KomposeIconProps {
|
||||
size?: string
|
||||
interactive?: boolean
|
||||
className?: string
|
||||
size?: string;
|
||||
interactive?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function KomposeIcon({
|
||||
size = '192px',
|
||||
interactive = true,
|
||||
className = ''
|
||||
export default function KomposeIcon({
|
||||
size = "192px",
|
||||
interactive = true,
|
||||
className = "",
|
||||
}: KomposeIconProps) {
|
||||
const [isClicked, setIsClicked] = useState(false)
|
||||
const [showRipple, setShowRipple] = useState(false)
|
||||
const [isClicked, setIsClicked] = useState(false);
|
||||
const [showRipple, setShowRipple] = useState(false);
|
||||
|
||||
const handleClick = () => {
|
||||
if (!interactive) return
|
||||
const handleClick = () => {
|
||||
if (!interactive) return;
|
||||
|
||||
setIsClicked(true)
|
||||
setShowRipple(true)
|
||||
setIsClicked(true);
|
||||
setShowRipple(true);
|
||||
|
||||
setTimeout(() => {
|
||||
setIsClicked(false)
|
||||
}, 600)
|
||||
setTimeout(() => {
|
||||
setIsClicked(false);
|
||||
}, 600);
|
||||
|
||||
setTimeout(() => {
|
||||
setShowRipple(false)
|
||||
}, 800)
|
||||
}
|
||||
setTimeout(() => {
|
||||
setShowRipple(false);
|
||||
}, 800);
|
||||
};
|
||||
|
||||
const handleTouch = (e: React.TouchEvent) => {
|
||||
if (!interactive) return
|
||||
handleClick()
|
||||
}
|
||||
const handleTouch = (e: React.TouchEvent) => {
|
||||
if (!interactive) return;
|
||||
handleClick();
|
||||
};
|
||||
|
||||
const wrapperClasses = [
|
||||
'kompose-icon-wrapper',
|
||||
isClicked && 'is-clicked',
|
||||
interactive && 'is-interactive',
|
||||
className
|
||||
].filter(Boolean).join(' ')
|
||||
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>
|
||||
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="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>
|
||||
<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="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>
|
||||
<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>
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
)
|
||||
{/* Ripple effect container */}
|
||||
{showRipple && <div className="ripple"></div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,338 +1,494 @@
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import './PivoineDocsIcon.css'
|
||||
import React, { useState } from "react";
|
||||
import "./PivoineDocsIcon.css";
|
||||
|
||||
interface PivoineDocsIconProps {
|
||||
size?: string
|
||||
interactive?: boolean
|
||||
className?: string
|
||||
showLabel?: boolean
|
||||
size?: string;
|
||||
interactive?: boolean;
|
||||
className?: string;
|
||||
showLabel?: boolean;
|
||||
}
|
||||
|
||||
export default function PivoineDocsIcon({
|
||||
size = '256px',
|
||||
interactive = true,
|
||||
className = '',
|
||||
showLabel = false
|
||||
export default function PivoineDocsIcon({
|
||||
size = "256px",
|
||||
interactive = true,
|
||||
className = "",
|
||||
showLabel = false,
|
||||
}: PivoineDocsIconProps) {
|
||||
const [isHovered, setIsHovered] = useState(false)
|
||||
const [isClicked, setIsClicked] = useState(false)
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const [isClicked, setIsClicked] = useState(false);
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
if (!interactive) return
|
||||
setIsHovered(true)
|
||||
}
|
||||
const handleMouseEnter = () => {
|
||||
if (!interactive) return;
|
||||
setIsHovered(true);
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
if (!interactive) return
|
||||
setIsHovered(false)
|
||||
}
|
||||
const handleMouseLeave = () => {
|
||||
if (!interactive) return;
|
||||
setIsHovered(false);
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
if (!interactive) return
|
||||
const handleClick = () => {
|
||||
if (!interactive) return;
|
||||
|
||||
setIsClicked(true)
|
||||
setTimeout(() => {
|
||||
setIsClicked(false)
|
||||
}, 1200)
|
||||
}
|
||||
setIsClicked(true);
|
||||
setTimeout(() => {
|
||||
setIsClicked(false);
|
||||
}, 1200);
|
||||
};
|
||||
|
||||
const handleTouch = (e: React.TouchEvent) => {
|
||||
if (!interactive) return
|
||||
e.preventDefault()
|
||||
setIsHovered(true)
|
||||
|
||||
setTimeout(() => {
|
||||
handleClick()
|
||||
}, 50)
|
||||
const handleTouch = (e: React.TouchEvent) => {
|
||||
if (!interactive) return;
|
||||
e.preventDefault();
|
||||
setIsHovered(true);
|
||||
|
||||
setTimeout(() => {
|
||||
setIsHovered(false)
|
||||
}, 1500)
|
||||
}
|
||||
setTimeout(() => {
|
||||
handleClick();
|
||||
}, 50);
|
||||
|
||||
const wrapperClasses = [
|
||||
'pivoine-docs-icon-wrapper',
|
||||
isHovered && 'is-hovered',
|
||||
isClicked && 'is-clicked',
|
||||
interactive && 'is-interactive',
|
||||
className
|
||||
].filter(Boolean).join(' ')
|
||||
setTimeout(() => {
|
||||
setIsHovered(false);
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
// 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,
|
||||
}))
|
||||
const wrapperClasses = [
|
||||
"pivoine-docs-icon-wrapper",
|
||||
isHovered && "is-hovered",
|
||||
isClicked && "is-clicked",
|
||||
interactive && "is-interactive",
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
|
||||
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>
|
||||
// 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,
|
||||
}));
|
||||
|
||||
<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>
|
||||
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-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-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-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="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="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="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-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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{/* Enhanced Filters */}
|
||||
<filter id="petal-glow">
|
||||
<feGaussianBlur stdDeviation="2.5" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
{/* Enhanced Filters */}
|
||||
<filter id="petal-glow">
|
||||
<feGaussianBlur stdDeviation="2.5" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<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="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="sparkle-glow">
|
||||
<feGaussianBlur stdDeviation="2" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<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="page-shadow">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.15" />
|
||||
</filter>
|
||||
</defs>
|
||||
<filter id="sparkle-glow">
|
||||
<feGaussianBlur stdDeviation="2" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Subtle background glow */}
|
||||
<circle className="bg-glow" cx="128" cy="128" r="120" fill="url(#petal-gradient-3)" opacity="0.08" />
|
||||
<filter id="page-shadow">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.15" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* 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>
|
||||
{/* Subtle background glow */}
|
||||
<circle
|
||||
className="bg-glow"
|
||||
cx="128"
|
||||
cy="128"
|
||||
r="120"
|
||||
fill="url(#petal-gradient-3)"
|
||||
opacity="0.08"
|
||||
/>
|
||||
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
|
||||
{/* 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"
|
||||
/>
|
||||
{/* 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 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>
|
||||
{/* 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"
|
||||
/>
|
||||
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
|
||||
{/* Optional label */}
|
||||
{showLabel && (
|
||||
<div className="icon-label">
|
||||
<span className="label-text">Pivoine Docs</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
{/* 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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
export { default as KomposeIcon } from './KomposeIcon'
|
||||
export { default as PivoineDocsIcon } from './PivoineDocsIcon'
|
||||
export { default as KomposeIcon } from "./KomposeIcon";
|
||||
export { default as PivoineDocsIcon } from "./PivoineDocsIcon";
|
||||
|
||||
Reference in New Issue
Block a user