Au 06 - Front-end - React - Componentizando nossos elementos e estilizando o select - Mestres BEGIN
Objetivo da Aula
Criar um cabeçalho funcional e estilizado contendo:
- Dropdown de filtros (Select)
- Slider de preço (RangePriceFilter)
- Botão de ação principal (Novo Produto)
Estrutura de Componentes
ProductSubHeader (Container Principal)
Select (Componente Reutilizável)
RangePriceFilter (Específico para Produtos)
Button (Componente Reutilizável)
Organização de arquivos:
1src/
2 components/ # Componentes genéricos
3 ├── Select/
4 └── Button/
5 pages/
6 └── products/
7 ├── components/ # Componentes específicos
8 └── RangePriceFilter/
9 └── ProductSubHeader.tsxImplementação do ProductSubHeader
1import styles from "./ProductSubHeader.module.css";
2import Select from "../../components/Select";
3import RangePriceFilter from "./components/RangePriceFilter";
4import Button from "../../components/Button";
5const ProductSubHeader = () => (
6 <div className={styles.container}>
7 <h1 className={styles.title}>Produtos</h1>
8 <div className={styles.filters}>
9 <Select />
10 <RangePriceFilter />
11 </div>
12 <Button variant="primary">Novo Produto</Button>
13 </div>
14);Estilização com CSS Modules
Arquivo ProductSubHeader.module.css:
1.container {
2 display: flex;
3 align-items: center;
4 justify-content: space-between;
5 padding: 1rem 2rem;
6 background: white;
7 border-bottom: 1px solid var(--border-color);
8}
9.title {
10 color: var(--text-primary);
11 font-size: 1.5rem;
12}
13.filters {
14 display: flex;
15 gap: 2rem;
16 align-items: center;
17}Customização do Select
Técnicas avançadas de estilização:
1/* Reset do estilo nativo */
2select {
3 -webkit-appearance: none;
4 -moz-appearance: none;
5 appearance: none;
6 border: 1px solid var(--border-color);
7 border-radius: 4px;
8 padding: 0.5rem 2rem 0.5rem 1rem;
9 background-color: white;
10 background-image: url("data:image/svg+xml;utf8,<svg...>");
11 background-repeat: no-repeat;
12 background-position: right 0.7rem center;
13 background-size: 1rem;
14 cursor: pointer;
15 transition: border-color 0.3s ease;
16}
17/* Estilo para o container do select */
18.selectContainer {
19 display: flex;
20 align-items: center;
21 gap: 0.5rem;
22}
23.selectContainer label {
24 color: var(--text-secondary);
25 font-size: 0.9rem;
26}Sistema de Cores com Variáveis CSS
Definição no arquivo global:
1:root {
2 --text-primary: #2d3748;
3 /* Azul escuro */
4 --text-secondary: #718096;
5 /* Cinza médio */
6 --border-color: #e2e8f0;
7 /* Cinza claro */
8 --primary-color: #4299e1;
9 /* Azul principal */
10}Próximas Etapas de Desenvolvimento
RangePriceFilter
- Estilo customizado para o slider
- Indicador visual do valor selecionado
- Responsividade para mobile
Button
- Estados hover/active/focus
- Ícone de "+" integrado
- Transições suaves
Select
- Substituir por componente custom
- Animação de abertura
- Suporte a pesquisa
Destaques Técnicos
- Flexbox: Alinhamento preciso dos elementos
1display: flex; justify-content: space-between; align-items: center; - CSS Modules: Escopo local para estilos
- Design System: Uso de variáveis CSS para consistência
- Semântica: Nomes claros de classes e componentes
Lições Aprendidas
✅ Acertos
- Hierarquia clara de componentes
- Separação entre genéricos e específicos
- Estilos modulares e reutilizáveis
📌 Desafios
- Customização completa do select nativo
- Alinhamento cross-browser
- Gestão de espaçamentos consistentes
