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:

1. Creates a link to the website or documentation of the technology used to build the application.
2. Displays a small logo of the technology alongside its name.
3. Applies hover effects for better user interaction.
4. 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:

1. Modify the SiteConfig.madeBy object to change the displayed name and URL.
2. Replace the LogoSmall component with a different logo if needed.
3. 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:

1. Consider adding an aria-label to the <Link> component to provide more context about the external link.
2. Ensure that the LogoSmall component has appropriate alt text or aria-label attributes.

Best Practices

1. Place the BuiltWith component in a footer or about section of your application.
2. Keep the SiteConfig.madeBy information up-to-date if you change technologies.
3. 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.