App.tsx

import { StatusBar } from "expo-status-bar";
import { useMemo } from "react";
import {
  Linking,
  Pressable,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from "react-native";

import AppWebView from "./src/components/AppWebView";
import { REACT_PDF_KIT_URL } from "./src/constants/urls";

type SampleCardProps = {
  description: string;
  height: number;
  title: string;
};

function SampleCard({ description, height, title }: SampleCardProps) {
  return (
    <View style={styles.card}>
      <Text style={styles.cardTitle}>{title}</Text>
      <Text style={styles.cardDescription}>{description}</Text>
      <AppWebView sourceUrl={REACT_PDF_KIT_URL} height={height} />
    </View>
  );
}

export default function App() {
  const sampleCards = useMemo(
    () => [
      {
        title: "Default WebView",
        description:
          "Loads the React PDF Kit website inside a full-height mobile WebView.",
        height: 420,
      },
      {
        title: "Compact Mobile View",
        description:
          "Shows the same URL in a shorter viewport to mimic a tighter mobile layout.",
        height: 280,
      },
    ],
    []
  );

  return (
    <SafeAreaView style={styles.safeArea}>
      <StatusBar style="dark" />
      <ScrollView
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
      >
        <View style={styles.hero}>
          <Text style={styles.eyebrow}>Expo + TypeScript</Text>
          <Text style={styles.title}>
            React PDF Kit Starter Toolkit in Expo React Native
          </Text>
          <Text style={styles.subtitle}>
            This sample uses the URL domain method by rendering
            `https://www.react-pdf-kit.dev/` in a React Native WebView.
          </Text>
          <Pressable
            accessibilityRole="button"
            onPress={() => Linking.openURL(REACT_PDF_KIT_URL)}
            style={styles.primaryButton}
          >
            <Text style={styles.primaryButtonText}>Open In Browser</Text>
          </Pressable>
        </View>

        {sampleCards.map((sample) => (
          <SampleCard key={sample.title} {...sample} />
        ))}

        <View style={styles.card}>
          <Text style={styles.cardTitle}>Browser Handoff</Text>
          <Text style={styles.cardDescription}>
            Keep a lightweight embedded preview and let users jump to the full
            site in their browser when needed.
          </Text>
          <AppWebView sourceUrl={REACT_PDF_KIT_URL} height={220} />
          <Pressable
            accessibilityRole="button"
            onPress={() => Linking.openURL(REACT_PDF_KIT_URL)}
            style={styles.secondaryButton}
          >
            <Text style={styles.secondaryButtonText}>
              Launch react-pdf-kit.dev
            </Text>
          </Pressable>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: "#f3f4f6",
  },
  scrollContent: {
    paddingHorizontal: 16,
    paddingTop: 12,
    paddingBottom: 32,
    gap: 16,
  },
  hero: {
    backgroundColor: "#111827",
    borderRadius: 20,
    padding: 20,
    gap: 12,
  },
  eyebrow: {
    color: "#93c5fd",
    fontSize: 12,
    fontWeight: "700",
    letterSpacing: 1,
    textTransform: "uppercase",
  },
  title: {
    color: "#f9fafb",
    fontSize: 28,
    fontWeight: "800",
    lineHeight: 34,
  },
  subtitle: {
    color: "#d1d5db",
    fontSize: 15,
    lineHeight: 22,
  },
  card: {
    backgroundColor: "#ffffff",
    borderRadius: 20,
    padding: 16,
    gap: 12,
    shadowColor: "#111827",
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.08,
    shadowRadius: 24,
    elevation: 3,
  },
  cardTitle: {
    color: "#111827",
    fontSize: 18,
    fontWeight: "700",
  },
  cardDescription: {
    color: "#4b5563",
    fontSize: 14,
    lineHeight: 20,
  },
  primaryButton: {
    alignSelf: "flex-start",
    backgroundColor: "#2563eb",
    borderRadius: 999,
    paddingHorizontal: 16,
    paddingVertical: 10,
  },
  primaryButtonText: {
    color: "#eff6ff",
    fontSize: 14,
    fontWeight: "700",
  },
  secondaryButton: {
    alignSelf: "flex-start",
    borderColor: "#bfdbfe",
    borderRadius: 999,
    borderWidth: 1,
    paddingHorizontal: 16,
    paddingVertical: 10,
  },
  secondaryButtonText: {
    color: "#1d4ed8",
    fontSize: 14,
    fontWeight: "700",
  },
});