bw-expo-app/app/(tabs)/history.tsx

import { ThemedView } from '@/components/themed-view';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Image, ScrollView, StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

type GalleryLane = 'leading' | 'trailing';

interface GalleryTile {
  id: string;
  lane: GalleryLane;
  uri: string;
  height: number;
}

const curatedGallery: GalleryTile[] = [
  {
    id: 'ember-circle',
    lane: 'leading',
    uri: 'https://images.unsplash.com/photo-1616004655122-818af0f3efc6?auto=format&fit=crop&w=1200&q=80',
    height: 232,
  },
  {
    id: 'ocean-horizon',
    lane: 'trailing',
    uri: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1200&q=80',
    height: 152,
  },
  {
    id: 'studio-poise',
    lane: 'trailing',
    uri: 'https://images.unsplash.com/photo-1582096897407-9b6c86e1a8d3?auto=format&fit=crop&w=1200&q=80',
    height: 232,
  },
  {
    id: 'duo-portrait',
    lane: 'leading',
    uri: 'https://images.unsplash.com/photo-1601040122900-86ad461b8234?auto=format&fit=crop&w=1200&q=80',
    height: 148,
  },
  {
    id: 'sage-armor',
    lane: 'leading',
    uri: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=1200&q=80',
    height: 224,
  },
  {
    id: 'velvet-repose',
    lane: 'trailing',
    uri: 'https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?auto=format&fit=crop&w=1200&q=80',
    height: 188,
  },
  {
    id: 'nocturne-lounge',
    lane: 'trailing',
    uri: 'https://images.unsplash.com/photo-1573497491208-6b1acb260507?auto=format&fit=crop&w=1200&q=80',
    height: 184,
  },
  {
    id: 'sunlit-duet',
    lane: 'leading',
    uri: 'https://images.unsplash.com/photo-1531257240576-a4a0ef4af1c8?auto=format&fit=crop&w=1200&q=80',
    height: 188,
  },
];

const leadingNarratives = curatedGallery.filter(tile => tile.lane === 'leading');
const trailingNarratives = curatedGallery.filter(tile => tile.lane === 'trailing');

export default function HistoryScreen() {
  return (
    <ThemedView style={styles.canvas} lightColor="#050505" darkColor="#050505">
      <StatusBar style="light" />
      <SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right']}>
        <ScrollView
          showsVerticalScrollIndicator={false}
          contentContainerStyle={styles.scrollContent}
        >
          <Text style={styles.heading}>Content Generation</Text>
          <Text style={styles.dateline}>10.19 Wednesday</Text>
          <View style={styles.gallery}>
            <View style={styles.leadingLane}>
              {leadingNarratives.map(tile => (
                <Image
                  key={tile.id}
                  source={{ uri: tile.uri }}
                  style={[styles.frame, { height: tile.height }]}
                />
              ))}
            </View>
            <View style={styles.trailingLane}>
              {trailingNarratives.map(tile => (
                <Image
                  key={tile.id}
                  source={{ uri: tile.uri }}
                  style={[styles.frame, { height: tile.height }]}
                />
              ))}
            </View>
          </View>
        </ScrollView>
      </SafeAreaView>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  canvas: {
    flex: 1,
  },
  safeArea: {
    flex: 1,
  },
  scrollContent: {
    paddingHorizontal: 24,
    paddingTop: 24,
    paddingBottom: 48,
  },
  heading: {
    fontSize: 24,
    fontWeight: '600',
    color: '#FFFFFF',
    textAlign: 'center',
    letterSpacing: 0.4,
  },
  dateline: {
    marginTop: 16,
    fontSize: 16,
    fontWeight: '500',
    color: '#EDEDED',
  },
  gallery: {
    flexDirection: 'row',
    marginTop: 24,
  },
  leadingLane: {
    flex: 1,
    paddingRight: 12,
  },
  trailingLane: {
    flex: 1,
    paddingLeft: 12,
  },
  frame: {
    width: '100%',
    borderRadius: 28,
    marginBottom: 16,
  },
});