create-rn-starter-kit/template/src/components/Tile/types.ts

Interactive CLI for creating modular React Native apps with Expo

// template/src/components/Tile/types.ts

export type TileType = 
  | 'account' 
  | 'creditCard' 
  | 'service' 
  | 'serviceGrid' 
  | 'promotional';

export interface BaseTileData {
  id: string;
  title: string;
  subtitle?: string;
  onPress?: () => void;
}

// Account tile (like "Club Lloyds", "Classic")
export interface AccountTileData extends BaseTileData {
  variant: 'detailed' | 'condensed'; // detailed for account statements, condensed for summary page
  accountNumber: string;
  balance: number;
  balanceLabel?: string; // "Overdraft limit", "Available credit", etc.
  additionalInfo?: string; // "Remaining overdraft: £14.82"
  actions?: Array<{
    label: string;
    onPress: () => void;
  }>;
  showMenu?: boolean;
  promoMessage?: {
    text: string;
    showArrow?: boolean;
    onPress: () => void;
  };
}

// Credit card tile (like "Lloyds Bank Cashback Credit Card")
export interface CreditTileData extends BaseTileData {
  cardNumber: string; // "****9053"
  balance: number;
  balanceLabel?: string; // "Balance after pending"
  availableCredit?: number;
  details?: Array<{
    label: string;
    value: string;
  }>;
  primaryAction?: {
    label: string;
    onPress: () => void;
  };
  showMenu?: boolean;
}

// Service tile (like "Everyday Offers", "Manage Cards")
export interface ServiceTileData extends BaseTileData {
  icon: {
    color: string; // "green", "blue", etc.
    name: string; // We'll use simple text for now instead of actual icons
  };
  description: string;
  badge?: {
    text: string;
    color: string;
  };
  showArrow?: boolean;
}

// Service grid (2x2 grid like "Add accounts", "Your credit score", etc.)
export interface ServiceGridData {
  id: string;
  items: Array<{
    id: string;
    title: string;
    description: string;
    icon: {
      color: string;
      name: string;
    };
    onPress: () => void;
  }>;
}

// Promotional tile (like "Is time on your side?")
export interface PromotionalTileData extends BaseTileData {
  description: string;
  image?: {
    color: string;
    name: string;
  };
  action: {
    label: string;
    onPress: () => void;
  };
}

// Union type for all tile data
export type TileData = 
  | AccountTileData 
  | CreditTileData 
  | ServiceTileData 
  | ServiceGridData 
  | PromotionalTileData;

// Main props for the Tile component
export interface TileProps {
  type: TileType;
  data: TileData;
  style?: any; // React Native StyleProp
}