01.09.2023 в 22:02

Навигационное меню Stripe, построенное на основе React

Компонент navigationmenu - это универсальное и настраиваемое решение для навигации в приложениях react. Он предоставляет удобный интерфейс с такими функциями, как выпадающие меню, динамическая подсветка перемещающихся окон, поддержка светлого и темного режимов, что делает его мощным инструментом для построения интуитивно понятных систем навигации.

Готовое к производству, пригодное для использования на лендинг-странице стартапа с поддержкой YC, навигационное меню без ошибок. На доработку ушло 10 часов. Я буду признателен всем за обратную связь. Наслаждайтесь!

Установка

Чтобы использовать компонент NavigationMenu в своем проекте, выполните следующие действия:

Создайте в каталоге компонентов проекта новую папку с именем 'NavigationMenu'.
Скопируйте файлы NavigationMenu.tsx и NavigationMenu.css в только что созданную папку 'NavigationMenu'.

Параметры

NavigationMenu.Item

itemName (обязательная строка): Задает имя элемента навигационного меню. Используется для связи с выпадающими списками. All HTMLAttributes (все HTML-атрибуты): Вы можете передать любой допустимый HTML-атрибут для настройки поведения и внешнего вида компонента. Например, className, style, onClick и т.д.

NavigationMenu.Items

Все HTML-атрибуты: Вы можете передать любой допустимый HTML-атрибут для настройки поведения и внешнего вида компонента. Например, className, style, onClick и т.д.

NavigationMenu.Dropdown

itemName (обязательная строка): Указывает имя связанного с ним пункта навигационного меню. All HTMLAttributes (все HTML-атрибуты): Вы можете передать любой допустимый HTML-атрибут для настройки поведения и внешнего вида компонента. Например, className, style, onClick и т.д.

NavigationMenu.MovingWindow

Пример использования

page.tsx

<NavigationMenu darkMode={isDarkMode}>
    <NavigationMenu.Links>
        <NavigationMenu.Link linkName="Products"><p style={{ fontWeight: 'bold', fontSize: '18px' }}>Products</p></NavigationMenu.Link>
        <NavigationMenu.Link linkName="Solutions"><p style={{ fontWeight: 'bold', fontSize: '18px' }}>Solutions</p></NavigationMenu.Link>
        <NavigationMenu.Link linkName="Developers"><p style={{ fontWeight: 'bold', fontSize: '18px' }}>Developers</p></NavigationMenu.Link>
        <NavigationMenu.Link linkName="Resources"><p style={{ fontWeight: 'bold', fontSize: '18px' }}>Resources</p></NavigationMenu.Link>
        <NavigationMenu.Link linkName="Pricing"><a href="https://www.youtube.com/channel/UC-eVD85P5uhqs5s4kSDx05g" target="__blank" style={{ fontWeight: 'bold', fontSize: '18px' }}>Pricing</a></NavigationMenu.Link>
    </NavigationMenu.Links>
    <NavigationMenu.MovingWindow className='navigationMenuMovingWindowDemo'>
        <NavigationMenu.Dropdown linkName="Products">
            <div className='row' style={{ width: '1000px', padding: '8px' }}>

                <div className='column' style={{ width: '400px', padding: '12px' }}>
                    <a style={{ padding: '16px', gap: '4px' }} className='column'>
                        <h4>Secure Transactions</h4>
                        <p>Safely process payments online, in-store, or on your platform.</p>
                    </a>
                    <a style={{ padding: '16px', gap: '4px' }} className='column'>
                        <h4>Seamless Payments</h4>
                        <p>Effortlessly accept payments online, in person, or on your platform.</p>
                    </a>
                    <a style={{ padding: '16px', gap: '4px' }} className='column'>
                        <h4>Versatile Payment Solutions</h4>
                        <p>Adaptable payment options for online, in-person, or platform transactions.</p>
                    </a>
                </div>
                <div style={{ width: '600px', display: 'grid', gridTemplateColumns: '1fr 1fr', padding: '24px', gap: '24px' }}>
                    <a className='column' style={{ gap: '4px' }}>
                        <h4>Payments</h4>
                        <p>Process Payments</p>
                    </a>
                    <a className='column' style={{ gap: '4px' }}>
                        <h4>Transactions</h4>
                        <p>View Transaction History</p>
                    </a>
                    <a className='column' style={{ gap: '4px' }}>
                        <h4>Customers</h4>
                        <p>Manage Customer Profiles</p>
                    </a>
                    <a className='column' style={{ gap: '4px' }}>
                        <h4>Invoices</h4>
                        <p>Generate and Send Invoices</p>
                    </a>
                    <a className='column' style={{ gap: '4px' }}>
                        <h4>Subscriptions</h4>
                        <p>Manage Subscription Plans</p>
                    </a>
                    <a className='column' style={{ gap: '4px' }}>
                        <h4>Connect</h4>
                        <p>Integrate with Stripe Connect</p>
                    </a>
                    <a className='column' style={{ gap: '4px' }}>
                        <h4>Payouts</h4>
                        <p>Track Payouts and Transfers</p>
                    </a>
                    <a className='column' style={{ gap: '4px' }}>
                        <h4>Radar</h4>
                        <p>Fraud Detection and Prevention</p>
                    </a>
                    <a className='column' style={{ gap: '4px' }}>
                        <h4>Settings</h4>
                        <p>Configure Account Settings</p>
                    </a>
                    <a className='column' style={{ gap: '4px' }}>
                        <h4>Help</h4>
                        <p>Get Assistance and Support</p>
                    </a>

                </div>
            </div>
        </NavigationMenu.Dropdown>

        <NavigationMenu.Dropdown linkName="Solutions">
            <div style={{ width: '800px', padding: '40px', gap: '40px' }} className='column'>
                <div className='column' style={{ gap: '16px' }}>
                    <h4>USE CASES</h4>
                    <div style={{ gap: '8px', display: 'grid', gridTemplateColumns: ' 1fr 1fr' }}>
                        <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                            <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                            <h4>Enterprises</h4>
                        </a>
                        <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                            <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                            <h4>Platforms</h4>
                        </a>
                        <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                            <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                            <h4>Saas</h4>
                        </a>
                        <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                            <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                            <h4>Ecommerce</h4>
                        </a>
                        <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                            <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                            <h4>Creator Economy</h4>
                        </a>
                        <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                            <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                            <h4>Marketplaces</h4>
                        </a>
                    </div>
                </div>

                <div className='column' style={{ gap: '16px' }}>
                    <h4>INTEGRATIONS AND CUSTOM SOLUTIONS</h4>
                    <div style={{ gap: '8px', display: 'grid', gridTemplateColumns: ' 1fr 1fr' }}>
                        <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                            <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                            <h4>Enterprises</h4>
                        </a>
                        <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                            <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                            <h4>Platforms</h4>
                        </a>
                        <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                            <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                            <h4>Saas</h4>
                        </a>
                        <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                            <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                            <h4>Ecommerce</h4>
                        </a>
                    </div>
                </div>
            </div>
        </NavigationMenu.Dropdown>

        <NavigationMenu.Dropdown linkName="Developers">
            <div style={{ width: '800px', padding: '40px', gap: '48px' }} className='column'>
                <div className='column' style={{ gap: '32px' }}>
                    <div className='column' style={{ gap: '4px' }}>
                        <h4>Documentation</h4>
                        <p>Start integrating Stripe&apos;s products and tools</p>
                    </div>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
                        <div className='column' style={{ gap: '8px' }}>
                            <h4>GET STARTED</h4>
                            <a>Prebuilt checkout</a>
                            <a>Libraries and SDKs</a>
                            <a>Plugins</a>
                            <a>Code samples</a>
                        </div>
                        <div className='column' style={{ gap: '8px' }}>
                            <h4>GUIDES</h4>
                            <a>Accept online payments</a>
                            <a>Manage Subscriptions</a>
                            <a>Send payments</a>
                        </div>
                    </div>
                </div>

                <div style={{ display: 'grid', gap: '8px', gridTemplateColumns: '1fr 1fr' }}>
                    <a><h4>Full API Reference</h4></a>
                    <a><h4>API Changelog</h4></a>
                    <a><h4>API status</h4></a>
                    <a><h4>Build a Stripe app</h4></a>
                </div>
            </div>
        </NavigationMenu.Dropdown>

        <NavigationMenu.Dropdown linkName="Resources">
            <div className='column' style={{ width: '800px', padding: '12px' }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px', padding: '24px' }}>
                    <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                        <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                        <h4>Enterprises</h4>
                    </a>
                    <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                        <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                        <h4>Enterprises</h4>
                    </a>
                    <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                        <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                        <h4>Enterprises</h4>
                    </a>
                    <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                        <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                        <h4>Enterprises</h4>
                    </a>
                    <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                        <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                        <h4>Enterprises</h4>
                    </a>
                    <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                        <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                        <h4>Enterprises</h4>
                    </a>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px', backgroundColor: `${isDarkMode ? '#313131' : '#f3f3f3'}`, padding: '24px' }}>
                    <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                        <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                        <h4>Enterprises</h4>
                    </a>
                    <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                        <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                        <h4>Enterprises</h4>
                    </a>
                    <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                        <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                        <h4>Enterprises</h4>
                    </a>
                    <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                        <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                        <h4>Enterprises</h4>
                    </a>
                    <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                        <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                        <h4>Enterprises</h4>
                    </a>
                    <a className='row' style={{ alignItems: 'center', gap: '8px' }}>
                        <div style={{ backgroundColor: 'grey', borderRadius: '50%', height: '14px', width: '14px' }}></div>
                        <h4>Enterprises</h4>
                    </a>
                </div>
            </div>
        </NavigationMenu.Dropdown>

    </NavigationMenu.MovingWindow>
</NavigationMenu>

Необходимые условия

Для корректной работы этого компонента с фреймворком NextJS версии ^13 требуется Node v14 или более поздняя версия. Для данного компонента были использованы следующие зависимости:

“react”: “^18.2.0”,
“react-dom”: “^18.2.0”

GitHub

Посмотреть Github

Источник:

Stripe's navigation menu built with React

#React

141

Войти на сайт