Skip to main content

​
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

​
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)

// Exemplo de implementação de botão no Next.js
import React from 'react';
import { cn } from '@/lib/utils';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'sm' | 'md' | 'lg';
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = 'primary', size = 'md', ...props }, ref) => {
    return (
      <button
        className={cn(
          'inline-flex items-center justify-center rounded-md font-medium transition-colors',
          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
          {
            'bg-primary text-dark': variant === 'primary',
            'bg-dark text-light': variant === 'secondary',
            'border-2 border-primary bg-transparent text-dark': variant === 'outline',
          },
          {
            'px-4 py-2 text-sm rounded-md': size === 'sm',
            'px-6 py-3 text-base rounded-lg': size === 'md',
            'px-8 py-4 text-lg rounded-xl': size === 'lg',
          },
          className
        )}
        ref={ref}
        {...props}
      />
    );
  }
);

​
Mobile (React Native)

// 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<ButtonProps> = ({
  title,
  variant = 'primary',
  size = 'md',
  onPress,
}) => {
  return (
    <TouchableOpacity
      style={[
        styles.button,
        styles[variant],
        styles[size],
      ]}
      onPress={onPress}
    >
      <Text style={[styles.text, styles[`${variant}Text`]]}>
        {title}
      </Text>
    </TouchableOpacity>
  );
};

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 e da landing page.