> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fitlocus.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Componentes UI
> Biblioteca de componentes visuais do FitLocus
# Componentes UI
O FitLocus utiliza uma biblioteca de componentes consistente em todas as suas interfaces, garantindo uma experiência de usuário coesa e de alta qualidade. Esta página documenta os principais componentes utilizados no aplicativo móvel e na landing page.
## Princípios de Design
Todos os componentes do FitLocus seguem estes princípios fundamentais:
* **Consistência**: Aparência e comportamento uniformes em toda a plataforma
* **Acessibilidade**: Componentes projetados para serem acessíveis a todos os usuários
* **Responsividade**: Adaptação a diferentes tamanhos de tela e dispositivos
* **Minimalismo**: Design limpo e focado, sem elementos desnecessários
* **Feedback**: Respostas visuais claras para interações do usuário
## Botões
Os botões são componentes fundamentais para ações do usuário.
Botão Primário
Botão Secundário
Botão Outline
### Variações de Tamanho
## Inputs
Os inputs permitem a entrada de dados pelo usuário.
## Cards
Os cards são utilizados para agrupar informações relacionadas.
### Card de Exercício
Peito
Supino Reto
Exercício para desenvolvimento do peitoral com foco na parte central.
Séries
4
Repetições
12
Descanso
60s
### Card de Treino
Treino A: Peito e Tríceps
6 exercícios
45 min
## Navegação
### Barra de Navegação Inferior
Início
Treinos
Recordes
Perfil
## Implementação
Os componentes são implementados de forma consistente em todas as plataformas:
### Web (Next.js)
```tsx theme={null}
// Exemplo de implementação de botão no Next.js
import React from 'react';
import { cn } from '@/lib/utils';
interface ButtonProps extends React.ButtonHTMLAttributes {
variant?: 'primary' | 'secondary' | 'outline';
size?: 'sm' | 'md' | 'lg';
}
export const Button = React.forwardRef(
({ className, variant = 'primary', size = 'md', ...props }, ref) => {
return (
);
}
);
```
### Mobile (React Native)
```tsx theme={null}
// Exemplo de implementação de botão no React Native
import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
interface ButtonProps {
title: string;
variant?: 'primary' | 'secondary' | 'outline';
size?: 'sm' | 'md' | 'lg';
onPress?: () => void;
}
export const Button: React.FC = ({
title,
variant = 'primary',
size = 'md',
onPress,
}) => {
return (
{title}
);
};
const styles = StyleSheet.create({
button: {
borderRadius: 8,
alignItems: 'center',
justifyContent: 'center',
},
primary: {
backgroundColor: '#B4ED00',
},
secondary: {
backgroundColor: '#202020',
},
outline: {
backgroundColor: 'transparent',
borderWidth: 2,
borderColor: '#B4ED00',
},
sm: {
paddingVertical: 8,
paddingHorizontal: 16,
},
md: {
paddingVertical: 12,
paddingHorizontal: 24,
},
lg: {
paddingVertical: 16,
paddingHorizontal: 32,
},
text: {
fontFamily: 'HankenGrotesk-Medium',
fontSize: 16,
},
primaryText: {
color: '#202020',
},
secondaryText: {
color: '#F9F9F9',
},
outlineText: {
color: '#202020',
},
});
```
Para mais detalhes sobre a implementação de componentes específicos, consulte a documentação técnica do [aplicativo móvel](/architecture/frontend) e da [landing page](/architecture/landing).