ComponentsBuilt With ShipFast

Credit goes to Juanjo Valiño for re-creating this ShipFast component.

Table of Contents:

Built with ShipFast badge with affiliate link.

Built With ShipFast Component

Code

/components/BuiltWithShipFast.tsx

1import Image from "next/image";
2
3const BuiltWithShipFast = () => {
4  return (
5    <a
6      className="mt-4 inline-block cursor-pointer rounded border border-base-content/20 px-2 py-1 text-sm text-base-content/80 duration-200 hover:border-base-content/40 hover:bg-base-300 hover:text-base-content/90"
7      href="https://shipfa.st/?via=YOUR_AFFILIATE_HERE"
8      target="_blank"
9    >
10      <div className="flex items-center gap-1">
11        <span>Built with</span>
12        <span className="flex items-center gap-0.5 font-bold tracking-tight text-base-content">
13          <Image
14            alt="ShipFast logo"
15            fetchPriority="high"
16            width="20"
17            height="20"
18            decoding="async"
19            className="h-5 w-5"
20            style={{
21              color: "transparent",
22            }}
23            src="/logo_transparent.png"
24          />
25          ShipFast
26        </span>
27      </div>
28    </a>
29  );
30};
31
32export default BuiltWithShipFast;

Usage

/components/Footer.tsx

1<p className="mt-3 text-sm text-base-content/60">
2  Copyright © {new Date().getFullYear()} - All rights reserved
3</p>
4<BuiltWithShipFast />

Tips

  • Download the ShipFast logo logo_transparent.png from the Footer on shipfa.st and paste it in your /public folder.