feat: remover estado atual e navegação do componente RetrospectiveSlides para simplificação
parent
bc041b8a56
commit
429125be1a
|
|
@ -10,9 +10,7 @@ import {
|
|||
SpinnerIcon,
|
||||
} from '@phosphor-icons/react';
|
||||
import { motion } from 'framer-motion';
|
||||
import * as React from 'react';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import { Navigation } from './navigation';
|
||||
import ProfileCard from './ProfileCard';
|
||||
import { StorySlide } from './story-slide';
|
||||
|
||||
|
|
@ -35,8 +33,6 @@ export function RetrospectiveSlides() {
|
|||
error: errorSystems,
|
||||
} = useMetricsBySystems(cpf, ano);
|
||||
|
||||
const [current, setCurrent] = React.useState(0);
|
||||
|
||||
// Calcula slides baseado nos dados disponíveis
|
||||
const slides: number[] = [];
|
||||
slides.push(0); // Slide inicial
|
||||
|
|
@ -49,8 +45,6 @@ export function RetrospectiveSlides() {
|
|||
}
|
||||
slides.push(3); // Slide final
|
||||
|
||||
const total = slides.length;
|
||||
|
||||
const isLoading = isLoadingPortal || isLoadingSystems;
|
||||
const hasError = errorPortal || errorSystems;
|
||||
|
||||
|
|
@ -97,8 +91,6 @@ export function RetrospectiveSlides() {
|
|||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Navigation total={total} current={current} setCurrent={setCurrent} />
|
||||
|
||||
<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="text-center space-y-8">
|
||||
|
|
@ -135,15 +127,6 @@ export function RetrospectiveSlides() {
|
|||
pública
|
||||
</motion.p>
|
||||
|
||||
<motion.p
|
||||
className="text-lg text-white/70"
|
||||
initial={{ y: 20, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.5 }}>
|
||||
Seus dados analisados: CPF •••••••••••
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
className="flex items-center justify-center gap-4 text-sm text-white/70 pt-8"
|
||||
initial={{ opacity: 0 }}
|
||||
|
|
@ -162,14 +145,12 @@ export function RetrospectiveSlides() {
|
|||
{metricsPortal && metricsPortal.length > 0 && (
|
||||
<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-center justify-between h-full px-6 py-8 md:py-12 md:px-8">
|
||||
{/* Coluna esquerda - Ícone e números principais */}
|
||||
<motion.div
|
||||
className="md:w-2/5 flex flex-col items-center md:items-start mb-8 md:mb-0 md:pr-8"
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}>
|
||||
{/* Ícone com efeito */}
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
whileInView={{ scale: 1 }}
|
||||
|
|
@ -182,7 +163,6 @@ export function RetrospectiveSlides() {
|
|||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Título */}
|
||||
<motion.h2
|
||||
className="text-2xl md:text-3xl lg:text-4xl font-bold text-center md:text-left mb-4"
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
|
|
@ -201,7 +181,6 @@ export function RetrospectiveSlides() {
|
|||
A porta de entrada para todas as aplicações
|
||||
</motion.p>
|
||||
|
||||
{/* Número principal */}
|
||||
<motion.div
|
||||
className="space-y-3 mb-6"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
|
|
@ -218,7 +197,6 @@ export function RetrospectiveSlides() {
|
|||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Estatísticas rápidas */}
|
||||
<motion.div
|
||||
className="mt-4 md:mt-auto w-full"
|
||||
initial={{ opacity: 0 }}
|
||||
|
|
@ -257,7 +235,6 @@ export function RetrospectiveSlides() {
|
|||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Coluna direita - Sistemas mais acessados (mantendo seu design) */}
|
||||
<div className="md:w-3/5 h-full flex items-center">
|
||||
<div className="w-full">
|
||||
<motion.div
|
||||
|
|
@ -274,7 +251,6 @@ export function RetrospectiveSlides() {
|
|||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Lista de sistemas */}
|
||||
<div className="w-full grid grid-cols-1 gap-3 md:gap-4 max-h-full">
|
||||
{topItems.slice(0, 6).map((item, index) => {
|
||||
const medalColors = [
|
||||
|
|
@ -333,8 +309,7 @@ export function RetrospectiveSlides() {
|
|||
}}>
|
||||
<p className="text-xl md:text-2xl font-bold text-yellow-300 mb-1">
|
||||
{(
|
||||
(item.totalAcessos /
|
||||
(topItems[0]?.totalAcessos || 1)) *
|
||||
(item.totalAcessos / (totalAcessos || 1)) *
|
||||
100
|
||||
).toFixed(0)}
|
||||
%
|
||||
|
|
@ -346,7 +321,7 @@ export function RetrospectiveSlides() {
|
|||
whileInView={{
|
||||
width: `${
|
||||
(item.totalAcessos /
|
||||
(topItems[0]?.totalAcessos || 1)) *
|
||||
(totalAcessos || 1)) *
|
||||
100
|
||||
}%`,
|
||||
}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue