Ascently/docs/src/components/DownloadButtons.astro

---
import { Tabs, TabItem } from "@astrojs/starlight/components";
import { Card, CardGrid } from "@astrojs/starlight/components";
import { LinkButton } from "@astrojs/starlight/components";
import { Badge } from "@astrojs/starlight/components";
import QRCode from "./QRCode.astro";
import { downloadLinks, requirements } from "../config";

interface Props {
    showQR?: boolean;
}

const { showQR = false } = Astro.props;

const hasLink = (link: string | undefined) => link && link.trim() !== "";
---

<Tabs syncKey="platform">
    <TabItem label="Android" icon="star">
        <CardGrid>
            {
                hasLink(downloadLinks.android.playStore) && (
                    <Card title="Google Play Store" icon="star">
                        <p style="text-align: center;">
                            <LinkButton
                                href={downloadLinks.android.playStore}
                                variant="primary"
                                icon="external"
                            >
                                Get on Play Store
                            </LinkButton>
                        </p>
                        {showQR && (
                            <p style="text-align: center;">
                                <QRCode
                                    data={downloadLinks.android.playStore}
                                    size={200}
                                    alt="QR code for Play Store"
                                />
                            </p>
                        )}
                    </Card>
                )
            }

            {
                hasLink(downloadLinks.android.obtainium) && (
                    <Card title="Obtainium" icon="rocket">
                        <p style="text-align: center;">
                            <LinkButton
                                href={downloadLinks.android.obtainium}
                                variant="primary"
                                icon="external"
                            >
                                Get on Obtainium
                            </LinkButton>
                        </p>
                        {showQR && (
                            <p style="text-align: center;">
                                <QRCode
                                    data={downloadLinks.android.obtainium}
                                    size={200}
                                    alt="QR code for Obtainium"
                                />
                            </p>
                        )}
                    </Card>
                )
            }

            {
                hasLink(downloadLinks.android.releases) && (
                    <Card title="Direct Download" icon="download">
                        <p style="text-align: center;">
                            <LinkButton
                                href={downloadLinks.android.releases}
                                variant="secondary"
                                icon="external"
                            >
                                Download APK
                            </LinkButton>
                        </p>
                        {showQR && (
                            <p style="text-align: center;">
                                <QRCode
                                    data={downloadLinks.android.releases}
                                    size={200}
                                    alt="QR code for APK download"
                                />
                            </p>
                        )}
                    </Card>
                )
            }
        </CardGrid>

        <p><strong>Requirements:</strong> {requirements.android}</p>
    </TabItem>

    <TabItem label="iOS" icon="apple">
        <CardGrid>
            {
                hasLink(downloadLinks.ios.appStore) && (
                    <Card title="App Store" icon="rocket">
                        <p style="text-align: center;">
                            <LinkButton
                                href={downloadLinks.ios.appStore}
                                variant="primary"
                                icon="external"
                            >
                                Download on App Store
                            </LinkButton>
                        </p>
                        {showQR && (
                            <p style="text-align: center;">
                                <QRCode
                                    data={downloadLinks.ios.appStore}
                                    size={200}
                                    alt="QR code for App Store"
                                />
                            </p>
                        )}
                    </Card>
                )
            }

            {
                hasLink(downloadLinks.ios.testFlight) && (
                    <Card title="TestFlight Beta" icon="warning">
                        <p style="text-align: center;">
                            <LinkButton
                                href={downloadLinks.ios.testFlight}
                                variant="secondary"
                                icon="external"
                            >
                                Join TestFlight
                            </LinkButton>
                        </p>
                        {showQR && (
                            <p style="text-align: center;">
                                <QRCode
                                    data={downloadLinks.ios.testFlight}
                                    size={200}
                                    alt="QR code for TestFlight"
                                />
                            </p>
                        )}
                    </Card>
                )
            }
        </CardGrid>

        <p><strong>Requirements:</strong> {requirements.ios}</p>
    </TabItem>
</Tabs>