Reusable UI components in the CruciDrive design system

import { GlassCard } from '@/components';
import { Text } from 'react-native';

// Default glass card
<GlassCard>
  <Text style={{ color: '#F1F5F9' }}>Malecón / Playa</Text>
  <Text style={{ color: '#F59E0B', fontSize: 32 }}>$1.50</Text>
</GlassCard>

// Highlighted variant for active selection
<GlassCard variant="highlight" borderRadius={24}>
  <Text>Centro de Crucita</Text>
</GlassCard>

// Danger variant for cancellation confirmation
<GlassCard variant="danger" noPadding>
  <CancelRideSheet />
</GlassCard>

import { GlassButton } from '@/components';
import { Ionicons } from '@expo/vector-icons';

// Primary CTA
<GlassButton
  label="Solicitar Tricimoto"
  onPress={handleRequest}
  variant="primary"
  size="lg"
/>

// Secondary amber button
<GlassButton
  label="Ver tarifa"
  onPress={handleViewFare}
  variant="secondary"
  leftIcon={<Ionicons name="pricetag" size={16} color="#0B0F19" />}
/>

// Danger with loading state
<GlassButton
  label="Cancelar viaje"
  onPress={handleCancel}
  variant="danger"
  loading={isCancelling}
/>

// Ghost button
<GlassButton
  label="Más información"
  onPress={handleInfo}
  variant="ghost"
  size="sm"
/>

import { GlassInput } from '@/components';

// Phone number field
<GlassInput
  label="Número de teléfono"
  placeholder="+593 99 123 4567"
  keyboardType="phone-pad"
  required
  error={errors.telefono}
/>

// OTP code entry
<GlassInput
  label="Código de verificación"
  placeholder="123456"
  keyboardType="number-pad"
  maxLength={6}
  helperText="Revisa tu SMS"
/>

import { BlurContainer } from '@/components';
import { MapView } from './Map';

// Blurred overlay on top of the map
<View style={{ flex: 1 }}>
  <MapView style={StyleSheet.absoluteFill} />
  <BlurContainer
    intensity={30}
    style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 200 }}
  >
    <RideInfoContent />
  </BlurContainer>
</View>

import { PanicButton } from '@/components';

<PanicButton
  onActivate={async () => {
    await sendEmergencyAlert({ coords, userId });
  }}
  isActivated={panicActivated}
/>

import { LoadingSpinner } from '@/components';

// Inline spinner in a card
<LoadingSpinner message="Buscando conductor..." />

// Full-screen blocking overlay
{isRequestingRide && (
  <LoadingSpinner
    overlay
    message="Conectando con un conductor..."
    size={64}
  />
)}

import MapView, { Marker, PROVIDER_GOOGLE, Region } from 'react-native-maps';

export { Marker, PROVIDER_GOOGLE, type Region };
export default MapView;

import MapView, { Marker, Region } from '@/components/Map';
import { useLocationStore } from '@/store/useLocationStore';
import { COLORS } from '@/constants/theme';

const CRUCITA_REGION: Region = {
  latitude: -0.9167,
  longitude: -80.4167,
  latitudeDelta: 0.025,
  longitudeDelta: 0.025,
};

export function RideMap() {
  const nearbyDrivers = useLocationStore((s) => s.nearbyDrivers);
  const userCoords = useLocationStore((s) => s.userCoords);

  return (
    <MapView
      style={{ flex: 1 }}
      provider={PROVIDER_GOOGLE}
      initialRegion={CRUCITA_REGION}
      showsUserLocation
    >
      {[...nearbyDrivers.values()].map((driver) => (
        <Marker
          key={driver.conductorId}
          coordinate={{ latitude: driver.coords.lat, longitude: driver.coords.lng }}
          title={driver.nombre}
          description={driver.estado}
          pinColor={
            driver.estado === 'disponible' ? COLORS.success : COLORS.secondary
          }
        />
      ))}
    </MapView>
  );
}

import { AppTabLayout } from '@/components/AppTabLayout';

export interface TabDefinition {
  /** Route name matched by expo-router (e.g. 'index', 'chat') */
  name: string;
  /** Human-readable tab label */
  title: string;
  /** Ionicons glyph key for the tab icon */
  iconName: keyof typeof Ionicons.glyphMap;
}

import { AppTabLayout, type TabDefinition } from '@/components/AppTabLayout';
import { COLORS } from '@/constants/theme';

const PASSENGER_TABS: TabDefinition[] = [
  { name: 'index',  title: 'Inicio',  iconName: 'home-outline' },
  { name: 'chat',   title: 'Chat',    iconName: 'chatbubble-outline' },
  { name: 'perfil', title: 'Perfil',  iconName: 'person-outline' },
];

// Inside (pasajero)/_layout.tsx
export default function PassengerLayout() {
  return <AppTabLayout tabs={PASSENGER_TABS} activeColor={COLORS.primary} />;
}

export { GlassCard } from './GlassCard';
export { GlassButton } from './GlassButton';
export { GlassInput } from './GlassInput';
export { BlurContainer } from './BlurContainer';
export { PanicButton } from './PanicButton';
export { LoadingSpinner } from './LoadingSpinner';