Fix: Implement card hover effect and image display
- Implemented card hover effect using the provided component. - Addressed image display issues on the landing page.
This commit is contained in:
gpt-engineer-app[bot]
parent
1c372aa03b
commit
c6cfabd840
BIN
public/calendar-screenshot.png
Normal file
BIN
public/calendar-screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
BIN
public/dashboard-screenshot.png
Normal file
BIN
public/dashboard-screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
BIN
public/whatsapp-audio-message.png
Normal file
BIN
public/whatsapp-audio-message.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
public/whatsapp-receipt-message.png
Normal file
BIN
public/whatsapp-receipt-message.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
public/whatsapp-text-message.png
Normal file
BIN
public/whatsapp-text-message.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
@ -27,6 +27,7 @@ const ContasRecorrentesList = () => {
|
||||
const { user } = useAuthStore();
|
||||
const queryClient = useQueryClient();
|
||||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||||
const [hoveredCard, setHoveredCard] = useState<string | null>(null);
|
||||
|
||||
const { data: contas, isLoading } = useQuery({
|
||||
queryKey: ['contas-recorrentes', user?.id],
|
||||
@ -124,70 +125,85 @@ const ContasRecorrentesList = () => {
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{contas.map((conta) => (
|
||||
<Card key={conta.id} className={`${conta.ativo ? '' : 'opacity-60'}`}>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<CardTitle className="text-lg">{conta.nome_conta}</CardTitle>
|
||||
{conta.descricao && (
|
||||
<CardDescription className="mt-1">{conta.descricao}</CardDescription>
|
||||
)}
|
||||
</div>
|
||||
<Badge variant={conta.ativo ? 'default' : 'secondary'}>
|
||||
{conta.ativo ? 'Ativo' : 'Inativo'}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<div
|
||||
key={conta.id}
|
||||
className="relative group"
|
||||
onMouseEnter={() => setHoveredCard(conta.id)}
|
||||
onMouseLeave={() => setHoveredCard(null)}
|
||||
>
|
||||
{hoveredCard === conta.id && (
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-blue-400/20 to-purple-400/20 rounded-lg blur-xl transition-all duration-300 ease-in-out" />
|
||||
)}
|
||||
|
||||
<CardContent className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<DollarSign className="h-4 w-4 text-green-600" />
|
||||
<span className="font-medium">Valor:</span>
|
||||
<span>{formatCurrency(conta.valor)}</span>
|
||||
<Card className={`
|
||||
relative z-10 transition-all duration-300 ease-in-out
|
||||
${conta.ativo ? 'hover:shadow-lg hover:scale-105' : 'opacity-60 hover:opacity-80'}
|
||||
${hoveredCard === conta.id ? 'border-blue-300 shadow-lg' : ''}
|
||||
`}>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<CardTitle className="text-lg">{conta.nome_conta}</CardTitle>
|
||||
{conta.descricao && (
|
||||
<CardDescription className="mt-1">{conta.descricao}</CardDescription>
|
||||
)}
|
||||
</div>
|
||||
<Badge variant={conta.ativo ? 'default' : 'secondary'}>
|
||||
{conta.ativo ? 'Ativo' : 'Inativo'}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<DollarSign className="h-4 w-4 text-green-600" />
|
||||
<span className="font-medium">Valor:</span>
|
||||
<span>{formatCurrency(conta.valor)}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Calendar className="h-4 w-4 text-blue-600" />
|
||||
<span className="font-medium">Vencimento:</span>
|
||||
<span>Todo dia {conta.dia_vencimento}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Clock className="h-4 w-4 text-purple-600" />
|
||||
<span className="font-medium">Horário:</span>
|
||||
<span>{conta.hora_aviso}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Bell className="h-4 w-4 text-orange-600" />
|
||||
<span className="font-medium">Antecedência:</span>
|
||||
<span>{conta.dias_antecedencia} dia(s)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Calendar className="h-4 w-4 text-blue-600" />
|
||||
<span className="font-medium">Vencimento:</span>
|
||||
<span>Todo dia {conta.dia_vencimento}</span>
|
||||
<div className="flex gap-2 pt-2 border-t">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => toggleAtivo(conta.id, conta.ativo)}
|
||||
className="flex-1"
|
||||
>
|
||||
{conta.ativo ? 'Desativar' : 'Ativar'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleDelete(conta.id)}
|
||||
disabled={deletingId === conta.id}
|
||||
className="text-red-600 hover:text-red-700"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Clock className="h-4 w-4 text-purple-600" />
|
||||
<span className="font-medium">Horário:</span>
|
||||
<span>{conta.hora_aviso}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Bell className="h-4 w-4 text-orange-600" />
|
||||
<span className="font-medium">Antecedência:</span>
|
||||
<span>{conta.dias_antecedencia} dia(s)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-2 border-t">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => toggleAtivo(conta.id, conta.ativo)}
|
||||
className="flex-1"
|
||||
>
|
||||
{conta.ativo ? 'Desativar' : 'Ativar'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleDelete(conta.id)}
|
||||
disabled={deletingId === conta.id}
|
||||
className="text-red-600 hover:text-red-700"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
113
src/components/ui/card-hover-effect.tsx
Normal file
113
src/components/ui/card-hover-effect.tsx
Normal file
@ -0,0 +1,113 @@
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { useState } from "react";
|
||||
|
||||
export const HoverEffect = ({
|
||||
items,
|
||||
className,
|
||||
}: {
|
||||
items: {
|
||||
title: string;
|
||||
description: string;
|
||||
onClick?: () => void;
|
||||
}[];
|
||||
className?: string;
|
||||
}) => {
|
||||
let [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{items.map((item, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="relative group block p-2 h-full w-full cursor-pointer"
|
||||
onMouseEnter={() => setHoveredIndex(idx)}
|
||||
onMouseLeave={() => setHoveredIndex(null)}
|
||||
onClick={item.onClick}
|
||||
>
|
||||
<AnimatePresence>
|
||||
{hoveredIndex === idx && (
|
||||
<motion.span
|
||||
className="absolute inset-0 h-full w-full bg-slate-800/[0.8] block rounded-3xl"
|
||||
layoutId="hoverBackground"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
transition: { duration: 0.15 },
|
||||
}}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
transition: { duration: 0.15, delay: 0.2 },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<HoverCard>
|
||||
<HoverCardTitle>{item.title}</HoverCardTitle>
|
||||
<HoverCardDescription>{item.description}</HoverCardDescription>
|
||||
</HoverCard>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const HoverCard = ({
|
||||
className,
|
||||
children,
|
||||
}: {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-2xl h-full w-full p-4 overflow-hidden bg-white border border-gray-200 group-hover:border-slate-700 relative z-20 shadow-sm hover:shadow-md transition-shadow",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="relative z-50">
|
||||
<div className="p-4">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const HoverCardTitle = ({
|
||||
className,
|
||||
children,
|
||||
}: {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<h4 className={cn("text-gray-900 font-bold tracking-wide mt-4", className)}>
|
||||
{children}
|
||||
</h4>
|
||||
);
|
||||
};
|
||||
|
||||
export const HoverCardDescription = ({
|
||||
className,
|
||||
children,
|
||||
}: {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<p
|
||||
className={cn(
|
||||
"mt-8 text-gray-600 tracking-wide leading-relaxed text-sm",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user