components/compte/ModeSwitcher.tsx

component·mobile·1.3 KB · 50 lignes· Voir l'itinéraire

Annotation non disponible

Lance npm run annotate (nécessite ANTHROPIC_API_KEY dans .env.local) pour générer une annotation française par Claude Haiku 4.5.

Concepts détectés — comprends la théorie

Hooks React

5 occurrences

Ce fichier utilise des hooks React. Les hooks sont la façon moderne de gérer l'état et les effets dans React. Voir l'architecture mobile pour le pattern complet.

Voir l'article général

UI React Native

2 occurrences

Composants UI React Native (View, Text, etc.). Différents de l'HTML web — on rend du natif.

Voir l'article général

1 export

ModeSwitcher

Code source· tsx

import React, { useMemo } from 'react';
import { View, StyleSheet } from 'react-native';
import FilterChip from '@/components/ui/FilterChip';
import { useAuthStore } from '@/store/authStore';
import { SPACING } from '@/lib/constants';
import { Storefront, ShoppingCart } from '@/lib/icons';
import type { TenantPublic } from '@/types/api';

type Props = { tenant: TenantPublic | null };

export function ModeSwitcher({ tenant }: Props) {
  const modeGerant = useAuthStore((s) => s.modeGerant);
  const activerModeGerant = useAuthStore((s) => s.activerModeGerant);
  const desactiverModeGerant = useAuthStore((s) => s.desactiverModeGerant);
  const styles = useMemo(() => makeStyles(), []);

  if (!tenant) return null;

  return (
    <View style={styles.row}>
      <FilterChip
        label="Cliente"
        Icon={ShoppingCart}
        active={!modeGerant}
        onPress={desactiverModeGerant}
        size="md"
      />
      <FilterChip
        label={tenant.nom}
        Icon={Storefront}
        active={modeGerant}
        onPress={activerModeGerant}
        size="md"
      />
    </View>
  );
}

function makeStyles() {
  return StyleSheet.create({
    row: {
      flexDirection: 'row',
      gap: SPACING.sm,
      paddingHorizontal: SPACING.xl,
      paddingBottom: SPACING.base,
      flexWrap: 'wrap',
    },
  });
}

import React, { useMemo } from 'react';
import { View, StyleSheet } from 'react-native';
import FilterChip from '@/components/ui/FilterChip';
import { useAuthStore } from '@/store/authStore';
import { SPACING } from '@/lib/constants';
import { Storefront, ShoppingCart } from '@/lib/icons';
import type { TenantPublic } from '@/types/api';

type Props = { tenant: TenantPublic | null };

export function ModeSwitcher({ tenant }: Props) {
  const modeGerant = useAuthStore((s) => s.modeGerant);
  const activerModeGerant = useAuthStore((s) => s.activerModeGerant);
  const desactiverModeGerant = useAuthStore((s) => s.desactiverModeGerant);
  const styles = useMemo(() => makeStyles(), []);

  if (!tenant) return null;

  return (
    <View style={styles.row}>
      <FilterChip
        label="Cliente"
        Icon={ShoppingCart}
        active={!modeGerant}
        onPress={desactiverModeGerant}
        size="md"
      />
      <FilterChip
        label={tenant.nom}
        Icon={Storefront}
        active={modeGerant}
        onPress={activerModeGerant}
        size="md"
      />
    </View>
  );
}

function makeStyles() {
  return StyleSheet.create({
    row: {
      flexDirection: 'row',
      gap: SPACING.sm,
      paddingHorizontal: SPACING.xl,
      paddingBottom: SPACING.base,
      flexWrap: 'wrap',
    },
  });
}