add play and app store buttons and review vegan blog

This commit is contained in:
jwinterm
2026-04-08 12:41:00 -04:00
parent f54d9476d2
commit 41276cd0bb
8 changed files with 152 additions and 105 deletions
+12 -1
View File
@@ -1,5 +1,11 @@
import { Header } from "@/components/layout/header";
import { MobileNav } from "@/components/layout/mobile-nav";
import {
StoreButtons,
VeganIqStoreButtons,
SuchoiceStoreButtons,
BauhausEchoStoreButtons,
} from "@/components/store-buttons";
import Link from "next/link";
import type { Metadata } from "next";
import { notFound } from "next/navigation";
@@ -58,7 +64,12 @@ export default async function BlogPost({ params }: Props) {
</header>
<div className="prose dark:prose-invert max-w-none">
<MDXRemote source={post.content} />
<MDXRemote source={post.content} components={{
StoreButtons,
VeganIqStoreButtons,
SuchoiceStoreButtons,
BauhausEchoStoreButtons,
}} />
</div>
</div>
</article>
+12 -20
View File
@@ -1,7 +1,7 @@
import { Header } from "@/components/layout/header";
import { MobileNav } from "@/components/layout/mobile-nav";
import { Card } from "@repo/ui/components/card";
import { Button } from "@repo/ui/components/button";
import { StoreButtons } from "@/components/store-buttons";
import Link from "next/link";
import type { Metadata } from "next";
@@ -43,25 +43,17 @@ export default function BauhausEchoPage() {
</p>
</div>
<div className="flex flex-wrap gap-4 mb-12">
<a href="https://bauhaus.such.software" target="_blank" rel="noopener noreferrer">
<Button size="lg">Play on Web</Button>
</a>
<a href="https://apps.apple.com/us/app/bauhaus-echo/id6759010657" target="_blank" rel="noopener noreferrer">
<Button variant="outline" size="lg">
Download on App Store
</Button>
</a>
<a href="https://play.google.com/store/apps/details?id=com.suchsoftware.bauhausecho" target="_blank" rel="noopener noreferrer">
<Button variant="outline" size="lg">
Get it on Google Play
</Button>
</a>
<a href="https://suchsoftware.itch.io/bauhaus-echo" target="_blank" rel="noopener noreferrer">
<Button variant="outline" size="lg">
Buy on itch.io — $2
</Button>
</a>
<div className="mb-12">
<StoreButtons
links={[
{ platform: "apple", href: "https://apps.apple.com/us/app/bauhaus-echo/id6759010657" },
{ platform: "google", href: "https://play.google.com/store/apps/details?id=com.suchsoftware.bauhausecho" },
]}
extraLinks={[
{ href: "https://bauhaus.such.software", label: "Play on Web" },
{ href: "https://suchsoftware.itch.io/bauhaus-echo", label: "itch.io — $2" },
]}
/>
</div>
<h2 className="text-2xl font-bold mb-6">How It Works</h2>
+6 -12
View File
@@ -1,7 +1,7 @@
import { Header } from "@/components/layout/header";
import { MobileNav } from "@/components/layout/mobile-nav";
import { Card } from "@repo/ui/components/card";
import { Button } from "@repo/ui/components/button";
import { StoreButtons } from "@/components/store-buttons";
import Link from "next/link";
import type { Metadata } from "next";
@@ -43,17 +43,11 @@ export default function SuchoicePage() {
</p>
</div>
<div className="flex flex-wrap gap-4 mb-12">
<a href="https://play.google.com/store/apps/details?id=com.suchsoftware.suchoice" target="_blank" rel="noopener noreferrer">
<Button variant="outline" size="lg">
Google Play
</Button>
</a>
<a href="https://apps.apple.com/us/app/suchoice/id6759626658" target="_blank" rel="noopener noreferrer">
<Button variant="outline" size="lg">
App Store
</Button>
</a>
<div className="mb-12">
<StoreButtons links={[
{ platform: "google", href: "https://play.google.com/store/apps/details?id=com.suchsoftware.suchoice" },
{ platform: "apple", href: "https://apps.apple.com/us/app/suchoice/id6759626658" },
]} />
</div>
<h2 className="text-2xl font-bold mb-6">Features</h2>
+6 -12
View File
@@ -1,7 +1,7 @@
import { Header } from "@/components/layout/header";
import { MobileNav } from "@/components/layout/mobile-nav";
import { Card } from "@repo/ui/components/card";
import { Button } from "@repo/ui/components/button";
import { StoreButtons } from "@/components/store-buttons";
import Link from "next/link";
import type { Metadata } from "next";
@@ -45,17 +45,11 @@ export default function VeganIqPage() {
</p>
</div>
<div className="flex flex-wrap gap-4 mb-12">
<a href="https://play.google.com/store/apps/details?id=com.veganiq.vegan_iq" target="_blank" rel="noopener noreferrer">
<Button variant="outline" size="lg">
Google Play
</Button>
</a>
<a href="https://apps.apple.com/us/app/vegan-iq-plant-based-trivia/id6761139580" target="_blank" rel="noopener noreferrer">
<Button variant="outline" size="lg">
App Store
</Button>
</a>
<div className="mb-12">
<StoreButtons links={[
{ platform: "google", href: "https://play.google.com/store/apps/details?id=com.veganiq.vegan_iq" },
{ platform: "apple", href: "https://apps.apple.com/us/app/vegan-iq-plant-based-trivia/id6761139580" },
]} />
</div>
<h2 className="text-2xl font-bold mb-6">Features</h2>
+78
View File
@@ -0,0 +1,78 @@
'use client';
import { FaApple, FaGooglePlay } from "react-icons/fa6";
import { Button } from "@repo/ui/components/button";
type StoreLink = {
platform: "apple" | "google";
href: string;
};
type StoreButtonsProps = {
links: StoreLink[];
extraLinks?: { href: string; label: string }[];
};
const platformConfig = {
apple: { icon: FaApple, label: "App Store" },
google: { icon: FaGooglePlay, label: "Google Play" },
} as const;
export function StoreButtons({ links, extraLinks }: StoreButtonsProps) {
return (
<div className="flex flex-wrap gap-4 not-prose">
{links.map(({ platform, href }) => {
const { icon: Icon, label } = platformConfig[platform];
return (
<a key={platform} href={href} target="_blank" rel="noopener noreferrer">
<Button variant="outline" size="lg">
<Icon className="h-5 w-5 mr-2" aria-hidden="true" />
{label}
</Button>
</a>
);
})}
{extraLinks?.map(({ href, label }) => (
<a key={href} href={href} target="_blank" rel="noopener noreferrer">
<Button variant="outline" size="lg">
{label}
</Button>
</a>
))}
</div>
);
}
// Pre-configured components for use in MDX blog posts
export function VeganIqStoreButtons() {
return (
<StoreButtons links={[
{ platform: "google", href: "https://play.google.com/store/apps/details?id=com.veganiq.vegan_iq" },
{ platform: "apple", href: "https://apps.apple.com/us/app/vegan-iq-plant-based-trivia/id6761139580" },
]} />
);
}
export function SuchoiceStoreButtons() {
return (
<StoreButtons links={[
{ platform: "google", href: "https://play.google.com/store/apps/details?id=com.suchsoftware.suchoice" },
{ platform: "apple", href: "https://apps.apple.com/us/app/suchoice/id6759626658" },
]} />
);
}
export function BauhausEchoStoreButtons() {
return (
<StoreButtons
links={[
{ platform: "apple", href: "https://apps.apple.com/us/app/bauhaus-echo/id6759010657" },
{ platform: "google", href: "https://play.google.com/store/apps/details?id=com.suchsoftware.bauhausecho" },
]}
extraLinks={[
{ href: "https://bauhaus.such.software", label: "Play on Web" },
{ href: "https://suchsoftware.itch.io/bauhaus-echo", label: "itch.io — $2" },
]}
/>
);
}