BuiltWith Component
The BuiltWith component is a small, interactive element designed to showcase the technology or platform used to build your application. It's particularly useful for applications or websites created with specific frameworks or tools that you want to highlight.
Importing the Component
To use the BuiltWith component in your Next.js application, import it as follows:
import BuiltWith from '@/components/BuiltWith';
Basic Usage
Here's a basic example of how to use the BuiltWith component:
<BuiltWith />
This will display a link with the text "Built with" followed by the logo and name of the technology used, as specified in your SiteConfig
.
Functionality
The BuiltWith component provides the following functionality:
- Creates a link to the website or documentation of the technology used to build the application.
- Displays a small logo of the technology alongside its name.
- Applies hover effects for better user interaction.
- Opens the link in a new tab for better user experience.
UI Components and Dependencies
The component uses the following UI components and utilities:
Link
from Next.js for creating the hyperlink.LogoSmall
component for displaying the small version of the logo.SiteConfig
for accessing configuration data about the technology used.
Styling
The component uses Tailwind CSS for styling:
- Flexbox layout for aligning items.
- Border, padding, and rounded corners for a button-like appearance.
- Text size and font weight adjustments.
- Hover effects for color, background, and border changes.
- Transition effects for smooth hover interactions.
Configuration
The BuiltWith component relies on the SiteConfig
object for its content. Ensure that your SiteConfig
includes the following properties:
// @/siteConfig.js
export const SiteConfig = {
// ... other configurations
madeBy: {
name: 'YourTechnologyName',
url: 'https://yourtechnology.com',
},
// ... other configurations
};
Customization
To customize the BuiltWith component:
- Modify the
SiteConfig.madeBy
object to change the displayed name and URL. - Replace the
LogoSmall
component with a different logo if needed. - Adjust the Tailwind classes to modify the styling, such as colors, sizes, or layout.
Accessibility
The component includes some accessibility features:
- Uses semantic HTML with the
<Link>
component for proper navigation. - Opens external links in a new tab with
rel="noopener noreferrer"
for security.
To further improve accessibility:
- Consider adding an
aria-label
to the<Link>
component to provide more context about the external link. - Ensure that the
LogoSmall
component has appropriatealt
text oraria-label
attributes.
Best Practices
- Place the BuiltWith component in a footer or about section of your application.
- Keep the
SiteConfig.madeBy
information up-to-date if you change technologies. - Consider the placement carefully to ensure it doesn't distract from main content or calls-to-action.
Example Usage
Here's an example of how you might use the BuiltWith component in a footer:
import BuiltWith from '@/components/BuiltWith';
export default function Footer() {
return (
<footer className='flex justify-between items-center p-4 bg-gray-100'>
<div>© 2023 Your Company Name</div>
<BuiltWith />
</footer>
);
}
This example demonstrates how to incorporate the BuiltWith component into a simple footer layout.
Responsive Design
The BuiltWith component is designed to be relatively small and should work well across different screen sizes. However, if you need to adjust its appearance on different devices, you can modify the Tailwind classes or wrap it in a responsive container:
<div className='hidden sm:block'>
<BuiltWith />
</div>
This example would hide the BuiltWith component on small screens and display it on screens sm and larger.
By using the BuiltWith component, you can easily give credit to the technology or platform used to create your application, potentially driving interest and adoption of the tools you've used. Remember to keep your configuration up-to-date and consider the component's placement for optimal visibility without detracting from your main content.