"use client";
import { useState } from "react";
import { Globe, Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { cn } from "@/lib/utils";
const languages = [
{ code: "en", name: "English", native: "English" },
{ code: "es", name: "Spanish", native: "Español" },
{ code: "fr", name: "French", native: "Français" },
{ code: "de", name: "German", native: "Deutsch" },
{ code: "pt", name: "Portuguese", native: "Português" },
{ code: "ja", name: "Japanese", native: "日本語" },
{ code: "zh", name: "Chinese", native: "中文" },
{ code: "ko", name: "Korean", native: "한국어" },
];
export const title = "React Dialog Block Language Switch";
export default function DialogLanguageSwitch() {
const [open, setOpen] = useState(false);
const [selected, setSelected] = useState("en");
const [saved, setSaved] = useState(false);
const handleSelect = (code: string) => {
setSelected(code);
setSaved(true);
setTimeout(() => {
setOpen(false);
setTimeout(() => setSaved(false), 200);
}, 600);
};
const currentLang = languages.find((l) => l.code === selected);
return (
<Dialog open={open} onOpenChange={setOpen}>
<div className="flex min-h-[350px] items-center justify-center">
<DialogTrigger asChild>
<Button variant="outline">
<Globe className="mr-2 h-4 w-4" />
{currentLang?.native || "Language"}
</Button>
</DialogTrigger>
</div>
<DialogContent style={{ maxWidth: "384px" }}>
{saved ? (
<div className="flex flex-col items-center justify-center py-8 text-center">
<Check className="h-8 w-8 text-primary" />
<h3 className="mt-4 text-lg font-medium">Language Changed</h3>
<p className="mt-1 text-sm text-muted-foreground">
Now using {currentLang?.native}
</p>
</div>
) : (
<>
<DialogHeader>
<DialogTitle>Select Language</DialogTitle>
<DialogDescription>
Choose your preferred language
</DialogDescription>
</DialogHeader>
<div className="py-4 grid grid-cols-2 gap-2">
{languages.map((lang) => (
<button
key={lang.code}
onClick={() => handleSelect(lang.code)}
className={cn(
"flex items-center justify-between p-3 rounded-md border text-left transition-colors",
selected === lang.code
? "border-primary bg-primary/5"
: "hover:border-muted-foreground/50"
)}
>
<div>
<p className="text-sm font-medium">{lang.native}</p>
<p className="text-xs text-muted-foreground">{lang.name}</p>
</div>
{selected === lang.code && (
<Check className="h-4 w-4 text-primary" />
)}
</button>
))}
</div>
</>
)}
</DialogContent>
</Dialog>
);
}