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:
Prop | Type | Default | Description |
---|---|---|---|
className | string | undefined | Additional CSS classes to apply to the component |
isSmall | boolean | false | If true, displays the small version of the logo |
Functionality
The BrandNameWithIcon component provides the following functionality:
- Displays the site's logo (either small or large version).
- Shows the site name next to the logo.
- Links the brand name to the site's root URL.
- 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 navigationLogo
andLogoSmall
components for displaying the site logocn
utility function for conditional class name application
Styling
The component uses Tailwind CSS for styling:
- The outer container uses
flex
anditems-center
for layout. - The logo container has fixed dimensions (
w-8 h-8
) andoverflow-hidden
. - The brand name uses
font-extrabold
for emphasis.
Customization
To customize the BrandNameWithIcon component:
- Pass additional classes using the
className
prop to modify the layout or styling. - Use the
isSmall
prop to toggle between large and small logo versions. - 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 pathsSiteConfig
from@/siteConfig
for site-wide configurationcn
utility from@/lib/utils
for class name mergingLogo
andLogoSmall
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:
- Consider adding an
aria-label
to the<Link>
component if the brand name alone is not descriptive enough. - Ensure that the logo components (
Logo
andLogoSmall
) have appropriatealt
text oraria-label
attributes.
Best Practices
- Use this component consistently across your application for brand recognition.
- Ensure that the
Routes.root
path is correctly set to your homepage. - 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.