@erosnicolau/animated-text
Version:
Advanced React animated text component with comprehensive animation effects
31 lines (30 loc) • 2.22 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const DemoNavigation = () => {
const navigationItems = [
{ href: '#animation-types', label: 'Animation Types' },
{ href: '#group-animations', label: '🤝 Group Animations' },
{ href: '#creative-demos', label: '🎨 Creative Showcases' },
{ href: '#typographic-showcases', label: '✍️ Typographic Showcases' },
{ href: '#composable-effects', label: 'Composable Effects' },
{ href: '#all-effects', label: 'Fly In/Out Effects' },
{ href: '#advanced-effects', label: 'Scale/Rotate/Color' },
{ href: '#static-styling', label: 'Static Styling' },
{ href: '#text-shadow-effects', label: 'Text Shadow Effects' },
{ href: '#font-size-effects', label: 'Font Size Effects' },
{ href: '#letter-spacing-effects', label: 'Letter Spacing' },
{ href: '#line-height-effects', label: 'Line Height Effects' },
{ href: '#font-weight-effects', label: 'Font Weight Effects' },
{ href: '#border-effects', label: 'Border Effects' },
{ href: '#size-effects', label: 'Size Effects' },
{ href: '#ultimate-effects', label: 'Ultimate Combinations' },
{ href: '#layout-effects', label: 'Layout Effects' },
{ href: '#visual-effects', label: 'Visual Effects' },
{ href: '#color-formats', label: 'Color Formats' },
{ href: '#timing-controls', label: 'Timing Controls' },
{ href: '#easing-functions', label: 'Easing Functions' },
{ href: '#accessibility', label: 'Accessibility' },
{ href: '#usage-examples', label: 'Usage Examples' }
];
return (_jsx("div", { className: "container mx-auto px-4 mb-8", children: _jsxs("div", { className: "bg-blue-50 border border-blue-200 rounded-xl p-6", children: [_jsx("h2", { className: "text-xl font-semibold mb-3 text-blue-900", children: "Quick Navigation" }), _jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-3 text-sm", children: navigationItems.map(item => (_jsx("a", { href: item.href, className: "text-blue-600 hover:text-blue-800 transition-colors", children: item.label }, item.href))) })] }) }));
};
export default DemoNavigation;