Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React from "react";
import { AppStoreIcon, GooglePlayIcon } from "../icons";
type StoreLinkProps = {
brand: "google" | "apple";
};
const brands = {
apple: {
href: "#",
actionText: "Download on the",
label: "App Store",
className: "inline-flex items-center gap-3 py-[9px] pl-4 pr-7.5 text-white rounded-md bg-dark ease-out duration-200 hover:bg-opacity-95"
},
google: {
href: "#",
actionText: "Get it on",
label: "Google Play",
className: "inline-flex items-center gap-3 py-[9px] pl-4 pr-8.5 text-white rounded-md bg-blue ease-out duration-200 hover:bg-opacity-95"
}};
const StoreLink: React.FC<StoreLinkProps> = ({ brand }) => {
const brandData = brands[brand];
return (
<li>
<a
className={brandData.className}
href={brandData.href}
>
{brand === "apple" ? <AppStoreIcon /> : <GooglePlayIcon />}
<div>
<span className="block text-custom-xs">{brandData.actionText}</span>
<p className="font-medium">{brandData.label}</p>
</div>
</a>
</li>
);
};
export default StoreLink;
|