325 lines
10 KiB
TypeScript
325 lines
10 KiB
TypeScript
'use client'
|
|
|
|
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>
|
|
|
|
{/* 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>
|
|
|
|
{/* 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>
|
|
|
|
{/* 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'
|
|
|
|
// Basic usage
|
|
<PivoineDocsIcon size="256px" />
|
|
|
|
// With label
|
|
<PivoineDocsIcon size="200px" showLabel />
|
|
|
|
// Static for favicon
|
|
<PivoineDocsIcon size="128px" interactive={false} />`}
|
|
</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>
|
|
)
|
|
}
|