Files
pagodera/components/under-construction.tsx
2025-11-11 03:08:36 -03:00

73 lines
2.2 KiB
TypeScript

"use client";
import { ArrowLeft, Construction, Home } from "lucide-react";
import Link from "next/link";
import { BlurFade } from "@/components/ui/blur-fade";
import { Button } from "@/components/ui/button";
import { DotPattern } from "@/components/ui/dot-pattern";
import { cn } from "@/lib/utils";
interface UnderConstructionProps {
title: string;
description: string;
locale?: string;
}
export function UnderConstruction({
title,
description,
locale = "pt",
}: UnderConstructionProps) {
return (
<div className="relative min-h-screen flex items-center justify-center overflow-hidden">
{/* Background Pattern */}
<DotPattern
className={cn(
"absolute inset-0 h-full w-full text-muted-foreground/20",
)}
/>
{/* Content */}
<div className="relative z-10 container max-w-2xl mx-auto px-4">
<BlurFade delay={0.1}>
<div className="p-12 rounded-3xl border border-border/50 bg-card/80 backdrop-blur-xl shadow-2xl">
{/* Icon */}
<div className="flex justify-center mb-8">
<div className="p-6 rounded-full bg-muted/50 border border-border/30">
<Construction className="w-16 h-16 text-primary animate-pulse" />
</div>
</div>
{/* Text */}
<h1 className="text-4xl md:text-5xl font-bold text-center mb-4">
{title}
</h1>
<p className="text-xl text-center text-muted-foreground mb-8">
{description}
</p>
{/* Buttons */}
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Link href={`/${locale}`}>
<Button size="lg" className="w-full sm:w-auto">
<Home className="mr-2 h-5 w-5" />
Voltar para Início
</Button>
</Link>
<Button
size="lg"
variant="outline"
className="w-full sm:w-auto"
onClick={() => window.history.back()}
>
<ArrowLeft className="mr-2 h-5 w-5" />
Voltar
</Button>
</div>
</div>
</BlurFade>
</div>
</div>
);
}