Evandro Fonseca Junior
9a4e4c762e
- Redesigned Footer.tsx with comprehensive layout including brand section, navigation links, social media icons, and contact info to improve user engagement and brand visibility - Updated DATABASE_URL in .env to correct Prisma database path for proper configuration and connectivity - Updated dependencies to support new UI components and ensure compatibility with enhanced features
61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Badge } from "@/components/ui/badge";
|
|
|
|
interface BillingToggleProps {
|
|
isAnnual: boolean;
|
|
onToggle: (isAnnual: boolean) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function BillingToggle({
|
|
isAnnual,
|
|
onToggle,
|
|
className = "",
|
|
}: BillingToggleProps) {
|
|
return (
|
|
<div className={`flex items-center justify-center ${className}`}>
|
|
<div className="relative inline-flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-1">
|
|
{/* Toggle Background */}
|
|
<div
|
|
className={`absolute top-1 bottom-1 w-1/2 bg-white dark:bg-gray-700 rounded-md shadow-sm transition-transform duration-200 ${
|
|
isAnnual ? "translate-x-full" : "translate-x-0"
|
|
}`}
|
|
/>
|
|
|
|
{/* Monthly Option */}
|
|
<button
|
|
onClick={() => onToggle(false)}
|
|
className={`relative z-10 px-6 py-2 text-sm font-medium rounded-md transition-colors duration-200 ${
|
|
!isAnnual
|
|
? "text-gray-900 dark:text-white"
|
|
: "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
|
|
}`}
|
|
>
|
|
Mensal
|
|
</button>
|
|
|
|
{/* Annual Option */}
|
|
<button
|
|
onClick={() => onToggle(true)}
|
|
className={`relative z-10 px-6 py-2 text-sm font-medium rounded-md transition-colors duration-200 ${
|
|
isAnnual
|
|
? "text-gray-900 dark:text-white"
|
|
: "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
|
|
}`}
|
|
>
|
|
Anual
|
|
</button>
|
|
</div>
|
|
|
|
{/* Save Badge */}
|
|
{isAnnual && (
|
|
<Badge className="ml-3 bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300">
|
|
Economize 20%
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|