"use client";
import { useState, useEffect } from "react";
import {
Smartphone,
Download,
QrCode,
Apple,
ExternalLink,
Check,
Zap,
Bell,
Wifi,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/components/ui/tabs";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";
type Platform = "ios" | "android" | "desktop";
const appBenefits = [
{ icon: Zap, text: "Faster performance" },
{ icon: Bell, text: "Push notifications" },
{ icon: Wifi, text: "Offline access" },
];
// Simple SVG QR code placeholder (in real app, generate dynamically)
function QRCodePlaceholder() {
return (
<div className="w-40 h-40 rounded-lg border-2 border-dashed flex items-center justify-center">
<div className="text-center">
<QrCode className="h-16 w-16 mx-auto text-muted-foreground" />
<p className="text-xs text-muted-foreground mt-2">Scan to download</p>
</div>
</div>
);
}
export const title = "React Dialog Block Download App";
export default function DialogDownloadApp() {
const [open, setOpen] = useState(false);
const [platform, setPlatform] = useState<Platform>("desktop");
const [activeTab, setActiveTab] = useState<string>("ios");
useEffect(() => {
// Detect platform on mount
const userAgent = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(userAgent)) {
setPlatform("ios");
setActiveTab("ios");
} else if (/android/.test(userAgent)) {
setPlatform("android");
setActiveTab("android");
} else {
setPlatform("desktop");
}
}, []);
const handleStoreClick = (store: "ios" | "android") => {
// In real app, these would be actual store links
const urls = {
ios: "https://apps.apple.com/app/example",
android: "https://play.google.com/store/apps/details?id=com.example",
};
window.open(urls[store], "_blank");
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<div className="flex min-h-[350px] items-center justify-center">
<DialogTrigger asChild>
<Button variant="outline">
<Smartphone className="mr-2 h-4 w-4" />
Get the App
</Button>
</DialogTrigger>
</div>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Smartphone className="h-5 w-5" />
Get the Mobile App
</DialogTitle>
<DialogDescription>
Take your experience on the go with our mobile app.
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
{/* Benefits */}
<div className="flex items-center justify-center gap-4">
{appBenefits.map((benefit, index) => (
<div
key={index}
className="flex flex-col items-center gap-1 text-center"
>
<div className="flex h-10 w-10 items-center justify-center rounded-full border">
<benefit.icon className="h-5 w-5 text-primary" />
</div>
<span className="text-xs text-muted-foreground">
{benefit.text}
</span>
</div>
))}
</div>
<Separator />
{platform === "desktop" ? (
// Desktop view with tabs and QR code
<Tabs value={activeTab} onValueChange={setActiveTab}>
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="ios" className="gap-2">
<Apple className="h-4 w-4" />
iOS
</TabsTrigger>
<TabsTrigger value="android" className="gap-2">
<svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
<path d="M17.523 15.341c-.5 0-.91.41-.91.91s.41.91.91.91.91-.41.91-.91-.41-.91-.91-.91zm-11.046 0c-.5 0-.91.41-.91.91s.41.91.91.91.91-.41.91-.91-.41-.91-.91-.91zm11.405-6.02l1.9-3.292c.105-.183.045-.418-.135-.525-.18-.108-.415-.046-.522.135l-1.924 3.334C15.631 8.325 13.895 7.945 12 7.945s-3.631.38-5.201 1.028L4.875 5.639c-.107-.181-.342-.243-.522-.135-.18.107-.24.342-.135.525l1.9 3.292C2.676 11.039.364 14.593.364 18.591h23.272c0-3.998-2.312-7.552-5.754-9.27zM6.477 15.341c-.5 0-.91.41-.91.91s.41.91.91.91.91-.41.91-.91-.41-.91-.91-.91zm11.046 0c-.5 0-.91.41-.91.91s.41.91.91.91.91-.41.91-.91-.41-.91-.91-.91z"/>
</svg>
Android
</TabsTrigger>
</TabsList>
<TabsContent value="ios" className="space-y-4">
<div className="flex flex-col items-center py-4">
<QRCodePlaceholder />
<p className="mt-4 text-sm text-center text-muted-foreground">
Scan with your iPhone camera
</p>
</div>
<Button
className="w-full"
onClick={() => handleStoreClick("ios")}
>
<Apple className="mr-2 h-4 w-4" />
Download on App Store
<ExternalLink className="ml-2 h-3 w-3" />
</Button>
</TabsContent>
<TabsContent value="android" className="space-y-4">
<div className="flex flex-col items-center py-4">
<QRCodePlaceholder />
<p className="mt-4 text-sm text-center text-muted-foreground">
Scan with your Android camera
</p>
</div>
<Button
className="w-full"
onClick={() => handleStoreClick("android")}
>
<svg className="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
<path d="M3 20.5v-17c0-.83.67-1.5 1.5-1.5.31 0 .61.1.86.28l13.07 8.5c.63.41.63 1.33 0 1.74l-13.07 8.5c-.25.18-.55.28-.86.28-.83 0-1.5-.67-1.5-1.5z"/>
</svg>
Get it on Google Play
<ExternalLink className="ml-2 h-3 w-3" />
</Button>
</TabsContent>
</Tabs>
) : (
// Mobile view with direct download
<div className="space-y-4">
<div className="rounded-lg border p-4 text-center">
<Badge variant="secondary" className="mb-3">
{platform === "ios" ? "iOS" : "Android"} detected
</Badge>
<p className="text-sm text-muted-foreground">
Download directly to your device
</p>
</div>
<Button
className="w-full"
size="lg"
onClick={() => handleStoreClick(platform as "ios" | "android")}
>
{platform === "ios" ? (
<>
<Apple className="mr-2 h-5 w-5" />
Download on App Store
</>
) : (
<>
<Download className="mr-2 h-5 w-5" />
Get it on Google Play
</>
)}
</Button>
<Button
variant="ghost"
className="w-full"
onClick={() => handleStoreClick(platform === "ios" ? "android" : "ios")}
>
Looking for {platform === "ios" ? "Android" : "iOS"}?
</Button>
</div>
)}
{/* App Info */}
<div className="flex items-center justify-between rounded-lg border p-3 text-sm">
<div className="flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary text-primary-foreground font-bold">
A
</div>
<div>
<p className="font-medium">App Name</p>
<div className="flex items-center gap-2">
<span className="text-xs text-muted-foreground">v2.4.1</span>
<span className="text-xs text-muted-foreground">•</span>
<span className="text-xs text-muted-foreground">45 MB</span>
</div>
</div>
</div>
<div className="flex items-center gap-1">
<span className="text-xs font-medium">4.8</span>
<svg className="h-3 w-3 fill-yellow-400" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
</div>
</div>
</div>
</DialogContent>
</Dialog>
);
}