%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/vacivi36/SiteVacivitta/vacivitta/src/pages/
Upload File :
Create Path :
Current File : /home/vacivi36/SiteVacivitta/vacivitta/src/pages/Vacinas.jsx

import React, { useState } from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { FaCalendarAlt, FaChild, FaUser, FaUserTie, FaSearch, FaSyringe } from 'react-icons/fa';

const PageContainer = styled.div`
  font-family: 'League Spartan', sans-serif;
  background-color: white;
  margin-top: 100px;
  padding-bottom: 50px;
  color: #333;
`;

const HeroSection = styled.section`
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 100px 80px;
  background: linear-gradient(
      to right,
      rgba(0, 148, 217, 0.8),
      rgba(61, 153, 72, 0.8)
    ),
    url("/vacinas.png") center/cover no-repeat;
  height: 50vh;
  color: white;

  h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
  }

  p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
    color: white;
  }

  @media (max-width: 768px) {
    padding: 80px 20px;
    height: auto;
    
    h1 {
      font-size: 2.2rem;
    }
  }
`;

const ContentSection = styled.section`
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 20px;
`;

const SearchContainer = styled.div`
  max-width: 600px;
  margin: 0 auto 40px;
  position: relative;
`;

const SearchInput = styled.input`
  width: 100%;
  padding: 15px 20px 15px 50px;
  border: 1px solid #ddd;
  border-radius: 30px;
  font-size: 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  &:focus {
    outline: none;
    border-color: #0094D9;
  }
`;

const SearchIcon = styled.div`
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
`;

const AgeGroupSection = styled.div`
  margin-bottom: 50px;
`;

const AgeGroupTitle = styled.h2`
  color: #0094D9;
  font-size: 1.8rem;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #3D9948;
  display: inline-block;
`;

const VaccineCardsContainer = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
`;

const VaccineCard = styled(Link)`
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 25px;
  transition: all 0.3s ease;
  text-decoration: none;
  color: #333;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  scroll-behavior: smooth;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 100%;
    background-color: ${props => props.accentColor || '#0094D9'};
  }
`;

const VaccineTitle = styled.h3`
  font-size: 1.3rem;
  margin: 0 0 10px;
  color: #0094D9;
`;

const VaccineAgeInfo = styled.div`
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
`;

const VaccineDescription = styled.p`
  font-size: 0.95rem;
  line-height: 1.5;
  flex-grow: 1;
`;

const VaccineRecommended = styled.div`
  margin-top: 15px;
  font-weight: 500;
  padding: 5px 10px;
  background-color: #e8f5e9;
  color: #3D9948;
  border-radius: 5px;
  font-size: 0.85rem;
  display: inline-block;
`;

// Dados das vacinas organizados por grupo etário
const vaccinesByAgeGroup = {
  infants: [
    {
      id: "bcg",
      name: "BCG",
      title: "Vacina BCG",
      ageRecommendation: "Ao nascer",
      description: "Protege contra as formas graves de tuberculose, principalmente tuberculose miliar e meníngea.",
      accentColor: "#FF9800",
      recommended: "Dose única"
    },
    {
      id: "hepatiteb",
      name: "Hepatite B",
      title: "Vacina Hepatite B",
      ageRecommendation: "Ao nascer, 2 e 6 meses",
      description: "Previne a hepatite B, uma infecção que afeta o fígado e pode causar cirrose e câncer hepático.",
      accentColor: "#4CAF50",
      recommended: "3 doses"
    },
    {
      id: "rotavirus",
      name: "Rotavírus",
      title: "Vacina Rotavírus",
      ageRecommendation: "2 e 4 meses",
      description: "Previne diarreia grave causada pelo rotavírus, principal causa de desidratação e internação em crianças.",
      accentColor: "#2196F3",
      recommended: "2 doses via oral"
    },
    {
      id: "pentavalente",
      name: "Pentavalente",
      title: "Vacina Pentavalente",
      ageRecommendation: "2, 4 e 6 meses",
      description: "Protege contra difteria, tétano, coqueluche, hepatite B e doenças por Haemophilus influenzae tipo b.",
      accentColor: "#9C27B0",
      recommended: "3 doses"
    },
    {
      id: "pneumococica",
      name: "Pneumocócica 10V",
      title: "Vacina Pneumocócica",
      ageRecommendation: "2, 4 e 12 meses",
      description: "Previne pneumonia, meningite e otite causadas por pneumococos.",
      accentColor: "#F44336",
      recommended: "2 doses + reforço"
    },
    {
      id: "meningococica",
      name: "Meningocócica C",
      title: "Vacina Meningocócica C",
      ageRecommendation: "3, 5 e 12 meses",
      description: "Protege contra a meningite e outras doenças causadas pelo meningococo C.",
      accentColor: "#00BCD4",
      recommended: "2 doses + reforço"
    }
  ],
  children: [
    {
      id: "triplice",
      name: "Tríplice Viral",
      title: "Vacina Tríplice Viral",
      ageRecommendation: "12 meses e 4-6 anos",
      description: "Protege contra sarampo, caxumba e rubéola, doenças que podem causar sérias complicações.",
      accentColor: "#E91E63",
      recommended: "2 doses"
    },
    {
      id: "tetraviral",
      name: "Tetra Viral",
      title: "Vacina Tetraviral",
      ageRecommendation: "15 meses",
      description: "Protege contra sarampo, caxumba, rubéola e varicela (catapora).",
      accentColor: "#673AB7",
      recommended: "Dose única (substitui 2ª dose da Tríplice Viral)"
    },
    {
      id: "hepatitea",
      name: "Hepatite A",
      title: "Vacina Hepatite A",
      ageRecommendation: "15 meses",
      description: "Previne a hepatite A, infecção que afeta o fígado e se transmite pela ingestão de água ou alimentos contaminados.",
      accentColor: "#8BC34A",
      recommended: "Dose única"
    },
    {
      id: "varicela",
      name: "Varicela",
      title: "Vacina Varicela (Catapora)",
      ageRecommendation: "4 anos",
      description: "Previne a varicela, conhecida como catapora, uma doença altamente contagiosa.",
      accentColor: "#FF5722",
      recommended: "Dose única ou 2 doses"
    },
    {
      id: "febre-amarela",
      name: "Febre Amarela",
      title: "Vacina Febre Amarela",
      ageRecommendation: "9 meses e 4 anos",
      description: "Protege contra a febre amarela, doença infecciosa febril transmitida por mosquitos.",
      accentColor: "#FFEB3B",
      recommended: "Dose inicial e reforço"
    }
  ],
  adolescents: [
    {
      id: "hpv",
      name: "HPV",
      title: "Vacina HPV",
      ageRecommendation: "9 a 14 anos (meninas) e 11 a 14 anos (meninos)",
      description: "Previne o papilomavírus humano, que pode causar diversos tipos de câncer, principalmente o de colo do útero.",
      accentColor: "#3F51B5",
      recommended: "2 doses"
    },
    {
      id: "meningococicab",
      name: "Meningocócica B",
      title: "Vacina Meningocócica B",
      ageRecommendation: "11 a 15 anos",
      description: "Protege contra a meningite e outras doenças causadas pelo meningococo B.",
      accentColor: "#009688",
      recommended: "2 doses"
    },
    {
      id: "dengue",
      name: "Dengue",
      title: "Vacina Dengue",
      ageRecommendation: "10 a 14 anos",
      description: "Protege contra os quatro sorotipos do vírus da dengue, reduzindo risco de infecção e casos graves.",
      accentColor: "#FFC107",
      recommended: "2 doses"
    }
  ],
  adults: [
    {
      id: "tifoide",
      name: "Febre Tifoide",
      title: "Vacina Febre Tifoide",
      ageRecommendation: "Adultos viajantes",
      description: "Previne a febre tifoide, doença transmitida por água e alimentos contaminados.",
      accentColor: "#795548",
      recommended: "Dose única a cada 3 anos"
    },
    {
      id: "gripe",
      name: "Influenza",
      title: "Vacina Gripe",
      ageRecommendation: "Anualmente para todas as idades",
      description: "Protege contra os vírus da gripe sazonal, reduzindo complicações, hospitalizações e mortes.",
      accentColor: "#03A9F4",
      recommended: "Dose anual"
    },
    {
      id: "triplicebacteriana",
      name: "Tríplice Bacteriana",
      title: "Vacina Tríplice Bacteriana Acelular",
      ageRecommendation: "Adultos (reforço a cada 10 anos)",
      description: "Protege contra difteria, tétano e coqueluche. Importante para gestantes e profissionais de saúde.",
      accentColor: "#607D8B",
      recommended: "Reforço a cada 10 anos"
    }
  ],
  elderly: [
    {
      id: "herpes",
      name: "Herpes Zóster",
      title: "Vacina Herpes Zóster",
      ageRecommendation: "50 anos ou mais",
      description: "Previne o herpes-zóster (cobreiro) e a neuralgia pós-herpética, complicação dolorosa da doença.",
      accentColor: "#9E9E9E",
      recommended: "Dose única ou 2 doses"
    },
    {
      id: "pneumococica",
      name: "Pneumocócica 23",
      title: "Vacina Pneumocócica 23",
      ageRecommendation: "60 anos ou mais",
      description: "Protege contra 23 tipos de pneumococos, prevenindo pneumonia e outras infecções graves.",
      accentColor: "#F44336",
      recommended: "Dose única ou esquema combinado"
    },
    {
      id: "efluelda",
      name: "Efluelda",
      title: "Vacina Efluelda",
      ageRecommendation: "60 anos ou mais",
      description: "Vacina contra gripe de alta dose, formulada especialmente para idosos, oferecendo maior proteção.",
      accentColor: "#7986CB",
      recommended: "Dose anual"
    },
    {
      id: "arexvy",
      name: "Arexvy",
      title: "Vacina Arexvy",
      ageRecommendation: "60 anos ou mais",
      description: "Protege contra o Vírus Sincicial Respiratório (VSR), importante causa de infecções respiratórias em idosos.",
      accentColor: "#4DB6AC",
      recommended: "Dose única por temporada"
    }
  ],
  special: [
    {
      id: "abrysvo",
      name: "Abrysvo",
      title: "Vacina Abrysvo",
      ageRecommendation: "Gestantes",
      description: "Vacina contra o VSR para gestantes, protegendo o bebê nos primeiros meses de vida.",
      accentColor: "#BA68C8",
      recommended: "Dose única durante a gestação"
    },
    {
      id: "hepatiteab",
      name: "Hepatite A e B",
      title: "Vacina Hepatite A e B",
      ageRecommendation: "Todas as idades",
      description: "Vacina combinada que protege contra as hepatites A e B, indicada para quem não teve contato prévio.",
      accentColor: "#66BB6A",
      recommended: "3 doses"
    },
    {
      id: "haemophilus",
      name: "Haemophilus influenzae b",
      title: "Vacina Haemophilus",
      ageRecommendation: "Crianças e grupos de risco",
      description: "Protege contra doenças causadas pela bactéria Haemophilus influenzae tipo b, como meningite.",
      accentColor: "#42A5F5",
      recommended: "Esquema conforme idade"
    }
  ]
};

function Vacinas() {
  const [searchTerm, setSearchTerm] = useState('');
  
  // Add scroll to top handler
  const handleCardClick = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  };
  
  // Filter vaccines based on search term
  const filteredInfants = vaccinesByAgeGroup.infants.filter(vaccine => 
    vaccine.name.toLowerCase().includes(searchTerm.toLowerCase()) || 
    vaccine.description.toLowerCase().includes(searchTerm.toLowerCase())
  );
  
  const filteredChildren = vaccinesByAgeGroup.children.filter(vaccine => 
    vaccine.name.toLowerCase().includes(searchTerm.toLowerCase()) || 
    vaccine.description.toLowerCase().includes(searchTerm.toLowerCase())
  );
  
  const filteredAdolescents = vaccinesByAgeGroup.adolescents.filter(vaccine => 
    vaccine.name.toLowerCase().includes(searchTerm.toLowerCase()) || 
    vaccine.description.toLowerCase().includes(searchTerm.toLowerCase())
  );
  
  const filteredAdults = vaccinesByAgeGroup.adults.filter(vaccine => 
    vaccine.name.toLowerCase().includes(searchTerm.toLowerCase()) || 
    vaccine.description.toLowerCase().includes(searchTerm.toLowerCase())
  );
  
  const filteredElderly = vaccinesByAgeGroup.elderly.filter(vaccine => 
    vaccine.name.toLowerCase().includes(searchTerm.toLowerCase()) || 
    vaccine.description.toLowerCase().includes(searchTerm.toLowerCase())
  );
  
  const filteredSpecial = vaccinesByAgeGroup.special.filter(vaccine => 
    vaccine.name.toLowerCase().includes(searchTerm.toLowerCase()) || 
    vaccine.description.toLowerCase().includes(searchTerm.toLowerCase())
  );
  
  const filteredVaccines = searchTerm 
    ? [
        ...filteredInfants,
        ...filteredChildren,
        ...filteredAdolescents,
        ...filteredAdults,
        ...filteredElderly,
        ...filteredSpecial
      ]
    : null;
  
  return (
    <PageContainer>
      <HeroSection>
        <h1>Calendário vacinal Vacivitta</h1>
        <p>Conheça todas as vacinas disponíveis por faixa etária e mantenha a sua saúde em dia</p>
      </HeroSection>
      
      <ContentSection>
        <SearchContainer>
          <SearchIcon>
            <FaSearch />
          </SearchIcon>
          <SearchInput 
            type="text" 
            placeholder="Buscar vacinas..." 
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </SearchContainer>
        
        {!filteredVaccines && (
          <>
            <AgeGroupSection>
              <AgeGroupTitle>
                <FaChild /> Bebês (0 a 2 anos)
              </AgeGroupTitle>
              <VaccineCardsContainer>
                {vaccinesByAgeGroup.infants.map((vaccine) => (
                  <VaccineCard 
                    key={vaccine.id} 
                    to={`/vacinas/${vaccine.id}`}
                    accentColor={vaccine.accentColor}
                    onClick={handleCardClick}
                  >
                    <VaccineTitle>{vaccine.title}</VaccineTitle>
                    <VaccineAgeInfo>
                      <FaCalendarAlt /> {vaccine.ageRecommendation}
                    </VaccineAgeInfo>
                    <VaccineDescription>{vaccine.description}</VaccineDescription>
                    <VaccineRecommended>
                      <FaSyringe /> {vaccine.recommended}
                    </VaccineRecommended>
                  </VaccineCard>
                ))}
              </VaccineCardsContainer>
            </AgeGroupSection>
            
            <AgeGroupSection>
              <AgeGroupTitle>
                <FaChild /> Crianças (2 a 10 anos)
              </AgeGroupTitle>
              <VaccineCardsContainer>
                {vaccinesByAgeGroup.children.map((vaccine) => (
                  <VaccineCard 
                    key={vaccine.id} 
                    to={`/vacinas/${vaccine.id}`}
                    accentColor={vaccine.accentColor}
                    onClick={handleCardClick}
                  >
                    <VaccineTitle>{vaccine.title}</VaccineTitle>
                    <VaccineAgeInfo>
                      <FaCalendarAlt /> {vaccine.ageRecommendation}
                    </VaccineAgeInfo>
                    <VaccineDescription>{vaccine.description}</VaccineDescription>
                    <VaccineRecommended>
                      <FaSyringe /> {vaccine.recommended}
                    </VaccineRecommended>
                  </VaccineCard>
                ))}
              </VaccineCardsContainer>
            </AgeGroupSection>
            
            <AgeGroupSection>
              <AgeGroupTitle>
                <FaUser /> Adolescentes (11 a 19 anos)
              </AgeGroupTitle>
              <VaccineCardsContainer>
                {vaccinesByAgeGroup.adolescents.map((vaccine) => (
                  <VaccineCard 
                    key={vaccine.id} 
                    to={`/vacinas/${vaccine.id}`}
                    accentColor={vaccine.accentColor}
                    onClick={handleCardClick}
                  >
                    <VaccineTitle>{vaccine.title}</VaccineTitle>
                    <VaccineAgeInfo>
                      <FaCalendarAlt /> {vaccine.ageRecommendation}
                    </VaccineAgeInfo>
                    <VaccineDescription>{vaccine.description}</VaccineDescription>
                    <VaccineRecommended>
                      <FaSyringe /> {vaccine.recommended}
                    </VaccineRecommended>
                  </VaccineCard>
                ))}
              </VaccineCardsContainer>
            </AgeGroupSection>
            
            <AgeGroupSection>
              <AgeGroupTitle>
                <FaUser /> Adultos (20 a 59 anos)
              </AgeGroupTitle>
              <VaccineCardsContainer>
                {vaccinesByAgeGroup.adults.map((vaccine) => (
                  <VaccineCard 
                    key={vaccine.id} 
                    to={`/vacinas/${vaccine.id}`}
                    accentColor={vaccine.accentColor}
                    onClick={handleCardClick}
                  >
                    <VaccineTitle>{vaccine.title}</VaccineTitle>
                    <VaccineAgeInfo>
                      <FaCalendarAlt /> {vaccine.ageRecommendation}
                    </VaccineAgeInfo>
                    <VaccineDescription>{vaccine.description}</VaccineDescription>
                    <VaccineRecommended>
                      <FaSyringe /> {vaccine.recommended}
                    </VaccineRecommended>
                  </VaccineCard>
                ))}
              </VaccineCardsContainer>
            </AgeGroupSection>
            
            <AgeGroupSection>
              <AgeGroupTitle>
                <FaUserTie /> Idosos (60 anos ou mais)
              </AgeGroupTitle>
              <VaccineCardsContainer>
                {vaccinesByAgeGroup.elderly.map((vaccine) => (
                  <VaccineCard 
                    key={vaccine.id} 
                    to={`/vacinas/${vaccine.id}`}
                    accentColor={vaccine.accentColor}
                    onClick={handleCardClick}
                  >
                    <VaccineTitle>{vaccine.title}</VaccineTitle>
                    <VaccineAgeInfo>
                      <FaCalendarAlt /> {vaccine.ageRecommendation}
                    </VaccineAgeInfo>
                    <VaccineDescription>{vaccine.description}</VaccineDescription>
                    <VaccineRecommended>
                      <FaSyringe /> {vaccine.recommended}
                    </VaccineRecommended>
                  </VaccineCard>
                ))}
              </VaccineCardsContainer>
            </AgeGroupSection>
            
            <AgeGroupSection>
              <AgeGroupTitle>
                <FaUser /> Vacinas especiais
              </AgeGroupTitle>
              <VaccineCardsContainer>
                {vaccinesByAgeGroup.special.map((vaccine) => (
                  <VaccineCard 
                    key={vaccine.id} 
                    to={`/vacinas/${vaccine.id}`}
                    accentColor={vaccine.accentColor}
                    onClick={handleCardClick}
                  >
                    <VaccineTitle>{vaccine.title}</VaccineTitle>
                    <VaccineAgeInfo>
                      <FaCalendarAlt /> {vaccine.ageRecommendation}
                    </VaccineAgeInfo>
                    <VaccineDescription>{vaccine.description}</VaccineDescription>
                    <VaccineRecommended>
                      <FaSyringe /> {vaccine.recommended}
                    </VaccineRecommended>
                  </VaccineCard>
                ))}
              </VaccineCardsContainer>
            </AgeGroupSection>
          </>
        )}
        
        {filteredVaccines && (
          <AgeGroupSection>
            <AgeGroupTitle>
              <FaSearch /> Resultados da busca
            </AgeGroupTitle>
            <VaccineCardsContainer>
              {filteredVaccines.map((vaccine) => (
                <VaccineCard 
                  key={vaccine.id} 
                  to={`/vacinas/${vaccine.id}`}
                  accentColor={vaccine.accentColor}
                  onClick={handleCardClick}
                >
                  <VaccineTitle>{vaccine.title}</VaccineTitle>
                  <VaccineAgeInfo>
                    <FaCalendarAlt /> {vaccine.ageRecommendation}
                  </VaccineAgeInfo>
                  <VaccineDescription>{vaccine.description}</VaccineDescription>
                  <VaccineRecommended>
                    <FaSyringe /> {vaccine.recommended}
                  </VaccineRecommended>
                </VaccineCard>
              ))}
            </VaccineCardsContainer>
          </AgeGroupSection>
        )}
      </ContentSection>
    </PageContainer>
  );
}

export default Vacinas;

Zerion Mini Shell 1.0