erik/portal-associacaofelizcidade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve click lag on project cards and add home link in headers

Browse Source
This commit is contained in:
Erik Silva
2026-01-21 01:41:41 -03:00
parent 2cd14b3d4d
commit 491bb28d6a
2 changed files with 41 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/app/portal/PortalClient.tsx
View File

@@ -10,8 +10,10 @@ import {
FileText, FileText,
ChevronRight, ChevronRight,
Building2, Building2,
Home,
} from "lucide-react"; } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/navigation";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { DynamicFavicon } from "@/components/DynamicFavicon"; import { DynamicFavicon } from "@/components/DynamicFavicon";
@@ -41,6 +43,7 @@ export default function PortalClient({
organization: Organization; organization: Organization;
folders: FolderType[]; folders: FolderType[];
}) { }) {
const router = useRouter();
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");
const filteredFolders = folders.filter((folder) => const filteredFolders = folders.filter((folder) =>
@@ -64,7 +67,7 @@ export default function PortalClient({
{/* Header */} {/* Header */}
<header className="bg-white border-b border-slate-100 sticky top-0 z-10"> <header className="bg-white border-b border-slate-100 sticky top-0 z-10">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 sm:h-20 flex items-center justify-between"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 sm:h-20 flex items-center justify-between">
<div className="flex items-center gap-3 sm:gap-4 min-w-0"> <Link href="/portal" className="flex items-center gap-3 sm:gap-4 min-w-0 hover:opacity-80 transition-opacity">
{organization.logoUrl ? ( {organization.logoUrl ? (
<img src={organization.logoUrl} alt={organization.name} className="h-8 sm:h-10 object-contain shrink-0" /> <img src={organization.logoUrl} alt={organization.name} className="h-8 sm:h-10 object-contain shrink-0" />
) : ( ) : (
@@ -76,7 +79,7 @@ export default function PortalClient({
<h1 className="text-xs sm:text-sm font-black text-slate-900 uppercase tracking-tight truncate">{organization.name}</h1> <h1 className="text-xs sm:text-sm font-black text-slate-900 uppercase tracking-tight truncate">{organization.name}</h1>
<p className="text-[9px] sm:text-[10px] font-bold text-slate-400 uppercase tracking-widest hidden sm:block">Portal da Transparência</p> <p className="text-[9px] sm:text-[10px] font-bold text-slate-400 uppercase tracking-widest hidden sm:block">Portal da Transparência</p>
</div> </div>
</div> </Link>
<Badge variant="outline" className="border-green-200 bg-green-50 text-green-600 font-bold text-[9px] sm:text-[10px] uppercase py-1 px-2 sm:px-3 shrink-0"> <Badge variant="outline" className="border-green-200 bg-green-50 text-green-600 font-bold text-[9px] sm:text-[10px] uppercase py-1 px-2 sm:px-3 shrink-0">
<span className="hidden sm:inline">Ambiente </span>Seguro <span className="hidden sm:inline">Ambiente </span>Seguro
</Badge> </Badge>
@@ -135,48 +138,45 @@ export default function PortalClient({
initial={{ opacity: 0, y: 10 }} initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: idx * 0.05 }} transition={{ delay: idx * 0.05 }}
onClick={() => router.push(`/visualizar/pasta/${folder.id}`)}
className="cursor-pointer bg-white border border-slate-100 rounded-2xl p-5 sm:p-6 hover:border-slate-200 hover:shadow-lg transition-all group"
> >
<Link <div className="flex items-start gap-4 mb-4">
href={`/visualizar/pasta/${folder.id}`} {folder.imageUrl ? (
className="block bg-white border border-slate-100 rounded-2xl p-5 sm:p-6 hover:border-slate-200 hover:shadow-lg transition-all group" <div className="w-14 h-14 rounded-xl overflow-hidden shrink-0 border border-slate-100">
> <img src={folder.imageUrl} alt={folder.name} className="w-full h-full object-cover" />
<div className="flex items-start gap-4 mb-4">
{folder.imageUrl ? (
<div className="w-14 h-14 rounded-xl overflow-hidden shrink-0 border border-slate-100">
<img src={folder.imageUrl} alt={folder.name} className="w-full h-full object-cover" />
</div>
) : (
<div
className="w-14 h-14 rounded-xl flex items-center justify-center shrink-0"
style={{ backgroundColor: `${folder.color}15`, color: folder.color }}
>
<FolderOpen size={28} fill="currentColor" fillOpacity={0.2} strokeWidth={2} />
</div>
)}
<div className="min-w-0 flex-1">
<h3 className="text-sm font-bold text-slate-800 uppercase tracking-tight truncate group-hover:text-red-600 transition-colors mb-1">
{folder.name}
</h3>
<p className="text-[11px] text-slate-400 font-medium line-clamp-2">
{folder.description || "Projeto público com documentos oficiais."}
</p>
</div> </div>
) : (
<div
className="w-14 h-14 rounded-xl flex items-center justify-center shrink-0"
style={{ backgroundColor: `${folder.color}15`, color: folder.color }}
>
<FolderOpen size={28} fill="currentColor" fillOpacity={0.2} strokeWidth={2} />
</div>
)}
<div className="min-w-0 flex-1">
<h3 className="text-sm font-bold text-slate-800 uppercase tracking-tight truncate group-hover:text-red-600 transition-colors mb-1">
{folder.name}
</h3>
<p className="text-[11px] text-slate-400 font-medium line-clamp-2">
{folder.description || "Projeto público com documentos oficiais."}
</p>
</div> </div>
</div>
<div className="flex items-center justify-between pt-4 border-t border-slate-50"> <div className="flex items-center justify-between pt-4 border-t border-slate-50">
<div className="flex items-center gap-3 text-[10px] font-bold text-slate-400 uppercase tracking-tight"> <div className="flex items-center gap-3 text-[10px] font-bold text-slate-400 uppercase tracking-tight">
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<FileText size={12} /> <FileText size={12} />
{folder.documentsCount + folder.foldersCount} itens {folder.documentsCount + folder.foldersCount} itens
</span> </span>
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<Calendar size={12} /> <Calendar size={12} />
{formatDate(folder.createdAt)} {formatDate(folder.createdAt)}
</span> </span>
</div>
<ChevronRight size={16} className="text-slate-300 group-hover:text-red-500 transition-colors" />
</div> </div>
</Link> <ChevronRight size={16} className="text-slate-300 group-hover:text-red-500 transition-colors" />
</div>
</motion.div> </motion.div>
))} ))}

4
src/app/visualizar/pasta/[id]/FolderViewClient.tsx
View File

@@ -105,7 +105,7 @@ export default function FolderViewClient({
{/* Header */} {/* Header */}
<header className="bg-white border-b border-slate-100 sticky top-0 z-10"> <header className="bg-white border-b border-slate-100 sticky top-0 z-10">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 sm:h-20 flex items-center justify-between"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 sm:h-20 flex items-center justify-between">
<div className="flex items-center gap-3 sm:gap-4 min-w-0"> <Link href="/portal" className="flex items-center gap-3 sm:gap-4 min-w-0 hover:opacity-80 transition-opacity">
{organization.logoUrl ? ( {organization.logoUrl ? (
<img src={organization.logoUrl} alt={organization.name} className="h-8 sm:h-10 object-contain shrink-0" /> <img src={organization.logoUrl} alt={organization.name} className="h-8 sm:h-10 object-contain shrink-0" />
) : ( ) : (
@@ -117,7 +117,7 @@ export default function FolderViewClient({
<h1 className="text-xs sm:text-sm font-black text-slate-900 uppercase tracking-tight truncate">{organization.name}</h1> <h1 className="text-xs sm:text-sm font-black text-slate-900 uppercase tracking-tight truncate">{organization.name}</h1>
<p className="text-[9px] sm:text-[10px] font-bold text-slate-400 uppercase tracking-widest hidden sm:block">Portal da Transparência</p> <p className="text-[9px] sm:text-[10px] font-bold text-slate-400 uppercase tracking-widest hidden sm:block">Portal da Transparência</p>
</div> </div>
</div> </Link>
<Badge variant="outline" className="border-green-200 bg-green-50 text-green-600 font-bold text-[9px] sm:text-[10px] uppercase py-1 px-2 sm:px-3 shrink-0"> <Badge variant="outline" className="border-green-200 bg-green-50 text-green-600 font-bold text-[9px] sm:text-[10px] uppercase py-1 px-2 sm:px-3 shrink-0">
<span className="hidden sm:inline">Ambiente </span>Seguro <span className="hidden sm:inline">Ambiente </span>Seguro
</Badge> </Badge>