60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
"use client";
|
||
|
||
// ============================================================================
|
||
// Demo Banner Component
|
||
// ============================================================================
|
||
|
||
import Link from "next/link";
|
||
import { Sparkles, ArrowRight, X } from "lucide-react";
|
||
import { useState } from "react";
|
||
import { Button } from "@/components/ui/button";
|
||
import { BOT_USERNAME } from "@/lib/utils/constants";
|
||
|
||
interface DemoBannerProps {
|
||
className?: string;
|
||
}
|
||
|
||
export const DemoBanner: React.FC<DemoBannerProps> = ({ className }) => {
|
||
const [isVisible, setIsVisible] = useState(true);
|
||
|
||
if (!isVisible) return null;
|
||
|
||
return (
|
||
<div
|
||
className={`
|
||
relative w-full bg-gradient-to-r from-violet-600 via-fuchsia-500 to-pink-500
|
||
text-white py-2.5 px-4 text-center text-sm font-medium
|
||
shadow-lg shadow-fuchsia-500/20
|
||
${className || ""}
|
||
`}
|
||
>
|
||
<div className="flex items-center justify-center gap-2 flex-wrap">
|
||
<Sparkles className="h-4 w-4 animate-pulse" />
|
||
<span>Вы просматриваете демо-версию платформы</span>
|
||
<span className="hidden sm:inline text-white/80">•</span>
|
||
<a
|
||
href={`https://t.me/${BOT_USERNAME}?start=register`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="inline-flex items-center gap-1 font-semibold underline underline-offset-2 hover:text-white/90 transition-colors"
|
||
>
|
||
Создать свой кабинет
|
||
<ArrowRight className="h-3.5 w-3.5" />
|
||
</a>
|
||
<span className="text-white/60 hidden md:inline">
|
||
и опробовать всю мощь платформы!
|
||
</span>
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => setIsVisible(false)}
|
||
className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-white/20 transition-colors"
|
||
aria-label="Закрыть баннер"
|
||
>
|
||
<X className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
);
|
||
};
|
||
|