101 lines
4.0 KiB
TypeScript
101 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from 'react';
|
|
import { SwatchIcon } from '@heroicons/react/24/outline';
|
|
|
|
const themePresets = [
|
|
{
|
|
name: 'Laranja/Rosa (Padrão)',
|
|
gradient: 'linear-gradient(90deg, #FF3A05, #FF0080)',
|
|
},
|
|
{
|
|
name: 'Azul/Roxo',
|
|
gradient: 'linear-gradient(90deg, #0066FF, #9333EA)',
|
|
},
|
|
{
|
|
name: 'Verde/Esmeralda',
|
|
gradient: 'linear-gradient(90deg, #10B981, #059669)',
|
|
},
|
|
{
|
|
name: 'Ciano/Azul',
|
|
gradient: 'linear-gradient(90deg, #06B6D4, #3B82F6)',
|
|
},
|
|
{
|
|
name: 'Rosa/Roxo',
|
|
gradient: 'linear-gradient(90deg, #EC4899, #A855F7)',
|
|
},
|
|
{
|
|
name: 'Vermelho/Laranja',
|
|
gradient: 'linear-gradient(90deg, #EF4444, #F97316)',
|
|
},
|
|
{
|
|
name: 'Índigo/Violeta',
|
|
gradient: 'linear-gradient(90deg, #6366F1, #8B5CF6)',
|
|
},
|
|
{
|
|
name: 'Âmbar/Amarelo',
|
|
gradient: 'linear-gradient(90deg, #F59E0B, #EAB308)',
|
|
},
|
|
];
|
|
|
|
export default function ThemeTester() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const applyTheme = (gradient: string) => {
|
|
document.documentElement.style.setProperty('--gradient-primary', gradient);
|
|
document.documentElement.style.setProperty('--gradient', gradient);
|
|
document.documentElement.style.setProperty('--gradient-text', gradient.replace('90deg', 'to right'));
|
|
document.documentElement.style.setProperty('--color-gradient-brand', gradient.replace('90deg', 'to right'));
|
|
};
|
|
|
|
return (
|
|
<div className="fixed bottom-4 right-4 z-50">
|
|
{/* Botão flutuante */}
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="w-14 h-14 rounded-full shadow-lg flex items-center justify-center transition-all hover:scale-110"
|
|
style={{ background: 'var(--gradient-primary)' }}
|
|
title="Testar Temas"
|
|
>
|
|
<SwatchIcon className="w-6 h-6 text-white" />
|
|
</button>
|
|
|
|
{/* Painel de temas */}
|
|
{isOpen && (
|
|
<div className="absolute bottom-16 right-0 w-80 bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden">
|
|
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
|
<h3 className="font-semibold text-gray-900 dark:text-white">Testar Gradientes</h3>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
|
Clique para aplicar temporariamente
|
|
</p>
|
|
</div>
|
|
|
|
<div className="p-3 max-h-96 overflow-y-auto space-y-2">
|
|
{themePresets.map((theme) => (
|
|
<button
|
|
key={theme.name}
|
|
onClick={() => applyTheme(theme.gradient)}
|
|
className="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors group"
|
|
>
|
|
<div
|
|
className="w-12 h-12 rounded-lg shrink-0"
|
|
style={{ background: theme.gradient }}
|
|
/>
|
|
<span className="text-sm font-medium text-gray-900 dark:text-white text-left">
|
|
{theme.name}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
|
|
<p className="text-xs text-gray-500 dark:text-gray-400 text-center">
|
|
💡 Recarregue a página para voltar ao tema original
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|