72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
/**
|
|
* Official App Store + Google Play badge anchors.
|
|
*
|
|
* Setup steps:
|
|
* 1. Download official SVGs (use the /show/ path which returns clean SVG):
|
|
* https://www.svgrepo.com/show/303128/download-on-the-app-store-apple-logo.svg
|
|
* https://www.svgrepo.com/show/303139/google-play-badge-logo.svg
|
|
* 2. Save to public/images/app-store-badge.svg + public/images/google-play-badge.svg.
|
|
* 3. Add to lib/content.ts:
|
|
* export const app = {
|
|
* googlePlay: "https://play.google.com/store/apps/details?id=...",
|
|
* appStore: "https://apps.apple.com/ae/app/.../id...",
|
|
* };
|
|
*
|
|
* next/image blocks raw SVG by default in Next 16 keep plain <img>.
|
|
*/
|
|
import { app } from "@/lib/content";
|
|
|
|
type Props = {
|
|
store: "appstore" | "googleplay";
|
|
small?: boolean;
|
|
};
|
|
|
|
export function AppBadge({ store, small }: Props) {
|
|
const isApple = store === "appstore";
|
|
const href = isApple ? app.appStore : app.googlePlay;
|
|
const src = isApple
|
|
? "/images/app-store-badge.svg"
|
|
: "/images/google-play-badge.svg";
|
|
const alt = isApple ? "Download on the App Store" : "Get it on Google Play";
|
|
const label = isApple
|
|
? "Download on the App Store"
|
|
: "Get it on Google Play";
|
|
const width = small ? 132 : 160;
|
|
|
|
return (
|
|
<a
|
|
href={href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label={label}
|
|
className="group inline-flex transition duration-300 hover:-translate-y-0.5 hover:opacity-85"
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={src}
|
|
alt={alt}
|
|
width={width}
|
|
height={small ? 40 : 48}
|
|
className={
|
|
small
|
|
? "h-auto w-[132px] max-w-full select-none"
|
|
: "h-auto w-[140px] max-w-full select-none sm:w-[160px]"
|
|
}
|
|
loading="lazy"
|
|
decoding="async"
|
|
draggable={false}
|
|
/>
|
|
</a>
|
|
);
|
|
}
|
|
|
|
/** Both badges in a vertical stack. Use in footer Legal column. */
|
|
export function AppBadgeStack({ small }: { small?: boolean }) {
|
|
return (
|
|
<div className="flex flex-col items-start gap-2">
|
|
<AppBadge store="appstore" small={small} />
|
|
<AppBadge store="googleplay" small={small} />
|
|
</div>
|
|
);
|
|
}
|