Skip to main content
Version: Next

BrandNameWithIcon Component

The BrandNameWithIcon component is a versatile React component designed to display your site's logo and brand name. It's built for use in Next.js applications and provides options for different logo sizes.

Importing the Component​

To use the BrandNameWithIcon component in your Next.js application, import it as follows:

import { BrandNameWithIcon } from '@/components/brand/BrandNameWithIcon';

Basic Usage​

Here's a basic example of how to use the BrandNameWithIcon component:

<BrandNameWithIcon />

This will display the default (large) logo with the site name.

Props​

The BrandNameWithIcon component accepts the following props:

PropTypeDefaultDescription
classNamestringundefinedAdditional CSS classes to apply to the component
isSmallbooleanfalseIf true, displays the small version of the logo

Functionality​

The BrandNameWithIcon component provides the following functionality:

  1. Displays the site's logo (either small or large version).
  2. Shows the site name next to the logo.
  3. Links the brand name to the site's root URL.
  4. Allows for additional CSS classes to be applied for customization.

UI Components​

The component uses the following UI components and utilities:

  • Link from Next.js for navigation
  • Logo and LogoSmall components for displaying the site logo
  • cn utility function for conditional class name application

Styling​

The component uses Tailwind CSS for styling:

  • The outer container uses flex and items-center for layout.
  • The logo container has fixed dimensions (w-8 h-8) and overflow-hidden.
  • The brand name uses font-extrabold for emphasis.

Customization​

To customize the BrandNameWithIcon component:

  1. Pass additional classes using the className prop to modify the layout or styling.
  2. Use the isSmall prop to toggle between large and small logo versions.
  3. Modify the SiteConfig.name in your site configuration to change the displayed brand name.

Dependencies​

This component relies on several project-specific utilities and configurations:

  • Routes from @/data/routes for navigation paths
  • SiteConfig from @/siteConfig for site-wide configuration
  • cn utility from @/lib/utils for class name merging
  • Logo and LogoSmall components from ../logo/Logo

Ensure these dependencies are properly set up in your project.

Accessibility​

The component includes some accessibility features:

  • Uses semantic HTML with the <Link> component for proper navigation.
  • The brand name is wrapped in a link, making it keyboard accessible.

To further improve accessibility:

  1. Consider adding an aria-label to the <Link> component if the brand name alone is not descriptive enough.
  2. Ensure that the logo components (Logo and LogoSmall) have appropriate alt text or aria-label attributes.

Best Practices​

  1. Use this component consistently across your application for brand recognition.
  2. Ensure that the Routes.root path is correctly set to your homepage.
  3. Keep the SiteConfig.name updated if your brand name changes.

Example Usage​

Here's an example of how you might use the BrandNameWithIcon component in a header:

import { BrandNameWithIcon } from '@/components/brand/BrandNameWithIcon';

export default function Header() {
  return (
    <header className='flex justify-between items-center p-4 bg-white shadow-sm'>
      <BrandNameWithIcon />
      <nav>{/* Navigation items */}</nav>
    </header>
  );
}

This example demonstrates how to use the BrandNameWithIcon component as part of a site header.

Responsive Design​

While the component itself doesn't include responsive design features, you can implement responsiveness in parent components:

import { BrandNameWithIcon } from '@/components/brand/BrandNameWithIcon';

export default function ResponsiveHeader() {
  return (
    <header className='flex justify-between items-center p-4 bg-white shadow-sm'>
      <BrandNameWithIcon className='hidden md:flex' />
      <BrandNameWithIcon className='md:hidden' isSmall={true} />
      <nav>{/* Navigation items */}</nav>
    </header>
  );
}

This example shows how to switch between small and large logos based on screen size using Tailwind's responsive classes.

By using the BrandNameWithIcon component, you can ensure consistent branding across your Next.js application. Remember to customize the logo components and site configuration to match your specific brand identity.