fred/ranking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Quando o usuario busca um onsultor, o sistema agora rola automaticamente ate o item destacado, centralizando-o na tela.

Browse Source
This commit is contained in:
Frederico Castro
2025-12-13 05:08:06 -03:00
parent 3edd81dbcb
commit 9d2a300df5
1 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/ConsultorCard.jsx
View File

@@ -1,8 +1,17 @@
import React, { useState } from 'react'; import React, { useState, useRef, useEffect } from 'react';
import './ConsultorCard.css'; import './ConsultorCard.css';
const ConsultorCard = ({ consultor, highlight }) => { const ConsultorCard = ({ consultor, highlight }) => {
const [expanded, setExpanded] = useState(false); const [expanded, setExpanded] = useState(false);
const cardRef = useRef(null);
useEffect(() => {
if (highlight && cardRef.current) {
setTimeout(() => {
cardRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
}, 100);
}
}, [highlight]);
const getRankClass = (rank) => { const getRankClass = (rank) => {
if (rank === 1) return 'rank-1'; if (rank === 1) return 'rank-1';
@@ -20,7 +29,7 @@ const ConsultorCard = ({ consultor, highlight }) => {
const { consultoria } = consultor; const { consultoria } = consultor;
return ( return (
<div className={`ranking-card ${expanded ? 'expanded' : ''} ${highlight ? 'highlight' : ''}`} onClick={() => setExpanded(!expanded)}> <div ref={cardRef} className={`ranking-card ${expanded ? 'expanded' : ''} ${highlight ? 'highlight' : ''}`} onClick={() => setExpanded(!expanded)}>
<div className="card-main"> <div className="card-main">
<div className={`rank ${getRankClass(consultor.rank)}`}>#{consultor.rank}</div> <div className={`rank ${getRankClass(consultor.rank)}`}>#{consultor.rank}</div>