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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user