feat: refatorar componente RetrospectiveSlides para melhorar a estrutura e a apresentação visual
parent
b8bcb00e74
commit
cb01415dfa
|
|
@ -29,28 +29,25 @@ export function RetrospectiveSlides() {
|
|||
error: errorSystems,
|
||||
} = useMetricsBySystems(cpf, ano);
|
||||
|
||||
// Calcula slides baseado nos dados disponíveis
|
||||
const slides: number[] = [];
|
||||
slides.push(0); // Slide inicial
|
||||
if (metricsPortal && metricsPortal.length > 0) slides.push(1); // Slide com portal principal
|
||||
slides.push(0);
|
||||
if (metricsPortal && metricsPortal.length > 0) slides.push(1);
|
||||
if (
|
||||
(metricsPortal && metricsPortal.length > 0) ||
|
||||
(metricsSystems && metricsSystems.length > 0)
|
||||
) {
|
||||
slides.push(2); // Slide com podio de aplicações
|
||||
slides.push(2);
|
||||
}
|
||||
slides.push(3); // Slide final
|
||||
slides.push(3);
|
||||
|
||||
const isLoading = isLoadingPortal || isLoadingSystems;
|
||||
const hasError = errorPortal || errorSystems;
|
||||
|
||||
// Extrai total de acessos
|
||||
const totalAcessos = [
|
||||
...(metricsPortal || []),
|
||||
...(metricsSystems || []),
|
||||
].reduce((acc, item) => acc + item.totalAcessos, 0);
|
||||
|
||||
// Top sistemas/portais por acessos
|
||||
const topItems = [...(metricsPortal || []), ...(metricsSystems || [])]
|
||||
.filter((item) => (item.nomeSistema || '').toLowerCase() !== 'agportal')
|
||||
.sort((a, b) => b.totalAcessos - a.totalAcessos)
|
||||
|
|
@ -89,6 +86,7 @@ export function RetrospectiveSlides() {
|
|||
<>
|
||||
<div className="h-full snap-y snap-mandatory overflow-y-scroll scroll-smooth">
|
||||
<StorySlide className="bg-linear-to-br from-[#0e233d] via-[#173b63] to-[#145190] text-white">
|
||||
<div className="max-w-7xl mx-auto w-full px-6">
|
||||
<div className="text-center space-y-8">
|
||||
<motion.div
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
|
|
@ -136,19 +134,19 @@ export function RetrospectiveSlides() {
|
|||
<span>Parceria</span>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</StorySlide>
|
||||
|
||||
{metricsPortal && metricsPortal.length > 0 && (
|
||||
<>
|
||||
{/* Slide 1: Acessos no AgPortal */}
|
||||
<StorySlide className="bg-white text-gray-900 overflow-hidden relative">
|
||||
{/* Decoração de fundo sutil */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div className="absolute -top-24 -right-24 w-96 h-96 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-full opacity-70"></div>
|
||||
<div className="absolute -bottom-32 -left-32 w-80 h-80 bg-gradient-to-tr from-blue-50 to-cyan-50 rounded-full opacity-60"></div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col lg:flex-row items-center justify-between h-full px-6 py-8 md:py-16 md:px-12 relative z-10">
|
||||
<div className="max-w-7xl mx-auto w-full h-full px-6 py-8 md:py-16 relative z-10">
|
||||
<div className="flex flex-col lg:flex-row items-center justify-between h-full">
|
||||
<motion.div
|
||||
className="lg:w-1/2 flex flex-col items-start mb-10 lg:mb-0 space-y-8 lg:pr-12"
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
|
|
@ -175,7 +173,6 @@ export function RetrospectiveSlides() {
|
|||
</span>
|
||||
</motion.h2>
|
||||
|
||||
{/* Descrição */}
|
||||
<motion.p
|
||||
className="text-lg md:text-xl text-gray-600 mb-8 max-w-2xl"
|
||||
initial={{ opacity: 0 }}
|
||||
|
|
@ -211,11 +208,12 @@ export function RetrospectiveSlides() {
|
|||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</StorySlide>
|
||||
|
||||
{/* Slide 2: Top 5 Aplicativos com Horas */}
|
||||
<StorySlide className="bg-linear-to-br from-[#0e233d] via-[#173b63] to-[#145190] text-white overflow-hidden">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-between h-full px-6 py-8 md:py-12 md:px-8">
|
||||
<div className="max-w-7xl mx-auto w-full h-full px-6 py-8 md:py-12">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-between h-full">
|
||||
<div className="space-y-8 w-full md:w-1/2 text-center md:text-left">
|
||||
<motion.div
|
||||
className="space-y-8"
|
||||
|
|
@ -235,14 +233,14 @@ export function RetrospectiveSlides() {
|
|||
</h2>
|
||||
|
||||
<p className="text-xl text-white/80 max-w-xl">
|
||||
Aqui estão as 5 aplicações com mais acessos e o total
|
||||
de horas registradas nelas durante o ano.
|
||||
Aqui estão as 5 aplicações com mais acessos e o
|
||||
total de horas registradas nelas durante o ano.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="md:w-3/5 w-full">
|
||||
<div className="w-full grid grid-cols-1 gap-3 md:gap-4 max-h-full">
|
||||
<div className="md:w-3/5 w-full mt-8 md:mt-0">
|
||||
<div className="w-full grid grid-cols-1 gap-3 md:gap-4">
|
||||
{topItems.slice(0, 5).map((item, index) => {
|
||||
const medalColors = [
|
||||
'bg-yellow-400 text-yellow-900',
|
||||
|
|
@ -333,12 +331,14 @@ export function RetrospectiveSlides() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</StorySlide>
|
||||
</>
|
||||
)}
|
||||
|
||||
<StorySlide className="bg-linear-to-br from-slate-50 to-blue-50">
|
||||
<div className="h-full flex flex-col md:flex-row items-center justify-center px-6 gap-12 py-12">
|
||||
<div className="max-w-7xl mx-auto w-full h-full px-6 py-12">
|
||||
<div className="h-full flex flex-col md:flex-row items-center justify-center gap-12">
|
||||
<div className="space-y-8 w-full md:w-1/2 text-center md:text-left">
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
|
|
@ -381,7 +381,6 @@ export function RetrospectiveSlides() {
|
|||
status="Online"
|
||||
contactText="Contato"
|
||||
avatarUrl="https://github.com/GuilhermeSantosUI.png"
|
||||
// métricas para preencher o cartão final
|
||||
totalAcessos={totalAcessos}
|
||||
aplicacoesCount={aplicacoesCount}
|
||||
topAppName={topAppName}
|
||||
|
|
@ -394,6 +393,7 @@ export function RetrospectiveSlides() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</StorySlide>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in New Issue