156 lines
3.6 KiB
Markdown
156 lines
3.6 KiB
Markdown
# Components
|
|
|
|
This directory contains reusable React components for the Pivoine Docs Hub.
|
|
|
|
## Icons
|
|
|
|
Custom animated icons for documentation projects.
|
|
|
|
### KomposeIcon
|
|
|
|
A beautifully animated icon for the Kompose documentation project.
|
|
|
|
#### Features
|
|
- ✨ Smooth hover animations with glowing effects
|
|
- 🎯 Click/tap interactions with ripple effects
|
|
- 🎨 Custom gradient backgrounds with carbon fiber pattern
|
|
- 💫 Animated status indicator (pulsing dot)
|
|
- 📱 Responsive and touch-optimized
|
|
- ♿ Supports reduced motion preferences
|
|
- 🎭 3D rotation effects on interaction
|
|
|
|
#### Usage
|
|
|
|
```tsx
|
|
import { KomposeIcon } from '@/components/icons'
|
|
|
|
// Basic usage
|
|
<KomposeIcon />
|
|
|
|
// Custom size
|
|
<KomposeIcon size="128px" />
|
|
|
|
// Non-interactive (no hover/click effects)
|
|
<KomposeIcon size="64px" interactive={false} />
|
|
|
|
// With custom className
|
|
<KomposeIcon className="my-custom-class" />
|
|
```
|
|
|
|
#### Props
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `size` | `string` | `'192px'` | Size of the icon (CSS width/height) |
|
|
| `interactive` | `boolean` | `true` | Enable/disable hover and click animations |
|
|
| `className` | `string` | `''` | Additional CSS classes |
|
|
|
|
#### Animations
|
|
|
|
**On Hover:**
|
|
- Icon scales up slightly with shadow enhancement
|
|
- Letter "K" glows with animated glow effect
|
|
- Status dot pulses and expands
|
|
- Corner decorations animate in
|
|
- Lines redraw with slide animation
|
|
|
|
**On Click/Tap:**
|
|
- 3D rotation flip effect
|
|
- Bright flash with intense glow
|
|
- Ripple effect emanates from center
|
|
- Bounce animation
|
|
|
|
**Default State:**
|
|
- Subtle pulsing status indicator
|
|
- Gentle shadow glow
|
|
|
|
#### Customization
|
|
|
|
The icon uses these main colors from the Kompose brand:
|
|
- Primary: `#00DC82` (emerald green)
|
|
- Background: Dark gradient (`#1a1d2e` to `#0a0e27`)
|
|
- Accent: `#00a86b` (darker green)
|
|
|
|
#### Accessibility
|
|
|
|
- Respects `prefers-reduced-motion` settings
|
|
- Touch-optimized for mobile devices
|
|
- Proper cursor states
|
|
- Keyboard accessible (when interactive)
|
|
|
|
#### Performance
|
|
|
|
- Uses CSS animations (GPU accelerated)
|
|
- SVG filters for visual effects
|
|
- Minimal re-renders with React hooks
|
|
- Scoped styles with CSS-in-JS
|
|
|
|
#### Browser Support
|
|
|
|
Works in all modern browsers that support:
|
|
- SVG filters (`feGaussianBlur`, `feMerge`)
|
|
- CSS animations
|
|
- CSS transforms (3D)
|
|
|
|
#### Converting from Vue
|
|
|
|
This component was converted from a Vue 3 component. Key differences:
|
|
- Vue `ref()` → React `useState()`
|
|
- Vue `@click` → React `onClick`
|
|
- Vue `:class` → React `className` with template literals
|
|
- Vue `v-if` → React conditional rendering `{showRipple && ...}`
|
|
- Scoped styles → CSS-in-JS with `<style jsx>`
|
|
|
|
## Adding New Icons
|
|
|
|
To add a new project icon:
|
|
|
|
1. Create a new component in `components/icons/YourIcon.tsx`
|
|
2. Follow the same structure as `KomposeIcon.tsx`
|
|
3. Export it in `components/icons/index.ts`
|
|
4. Use it in `app/page.tsx` in the projects array
|
|
|
|
Example:
|
|
```tsx
|
|
// components/icons/MyProjectIcon.tsx
|
|
'use client'
|
|
|
|
import React from 'react'
|
|
|
|
export default function MyProjectIcon({ size = '192px' }) {
|
|
return (
|
|
<svg width={size} height={size}>
|
|
{/* Your SVG content */}
|
|
</svg>
|
|
)
|
|
}
|
|
```
|
|
|
|
```tsx
|
|
// components/icons/index.ts
|
|
export { default as KomposeIcon } from './KomposeIcon'
|
|
export { default as MyProjectIcon } from './MyProjectIcon'
|
|
```
|
|
|
|
```tsx
|
|
// app/page.tsx
|
|
import { KomposeIcon, MyProjectIcon } from '@/components/icons'
|
|
|
|
const projects = [
|
|
{
|
|
name: 'Kompose',
|
|
icon: KomposeIcon,
|
|
// ...
|
|
},
|
|
{
|
|
name: 'My Project',
|
|
icon: MyProjectIcon,
|
|
// ...
|
|
}
|
|
]
|
|
```
|
|
|
|
---
|
|
|
|
**Need help?** Check the main [README.md](../README.md) or the component source code for more details.
|