Navbar

The Navbar component displays the main navigation bar for the landing page. It includes the app logo, name, navigation links, a login button, and a checkout button. The component adjusts layout based on screen size, providing different navigation options for mobile and desktop users.

Props

The Navbar component currently does not accept any props.

Dependencies

• React Router: Uses useNavigate from react-router-dom to handle the login redirection. You could also use it to redirect your users to different pages of your application if necessary.

• Internal Components:

  • CheckoutButton: A button component that initiates a Stripe checkout session.

Usage Example

// Navbar component can be used at the top level of the landing or main layout.
<Navbar />

Additional Notes

• Login Redirection: The redirectToLogin function, triggered by the "Log In" link, redirects users to the /login route.

• Responsive Design: The component hides full navigation links on small screens (sm:hidden) and shows a reduced set for mobile devices.

• CheckoutButton: The CheckoutButton component triggers a checkout session and accepts props to control appearance and content.

---

This should give a comprehensive overview of the Navbar component.