Add core functionality for mobile post scheduling app

Adds necessary dependencies including axios and react-native-calendars to pnpm-lock.yaml. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 7b0991ce-c7b8-4c82-9acc-fd3f9e762a01 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: dc1266fa-8375-43e1-aca0-9df31350f647 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/86064bd6-c937-4ca5-a5bf-bbef5749fb60/7b0991ce-c7b8-4c82-9acc-fd3f9e762a01/kWnlAIM Replit-Helium-Checkpoint-Created: true
2026-05-03 11:41:45 +00:00
parent 5b0eedb94b
commit bbbcf9f586
31 changed files with 10631 additions and 9 deletions
@@ -0,0 +1,84 @@
+import { Feather } from "@expo/vector-icons";
+import { Image } from "expo-image";
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { useColors } from "@/hooks/useColors";
+import { PostizIntegration } from "@/context/PostizContext";
+
+interface ChannelChipProps {
+  integration: PostizIntegration;
+  selected: boolean;
+  onToggle: () => void;
+}
+
+export function ChannelChip({ integration, selected, onToggle }: ChannelChipProps) {
+  const colors = useColors();
+
+  return (
+    <TouchableOpacity
+      onPress={onToggle}
+      activeOpacity={0.7}
+      style={[
+        styles.chip,
+        {
+          backgroundColor: selected ? colors.primary + "20" : colors.card,
+          borderColor: selected ? colors.primary : colors.border,
+        },
+      ]}
+    >
+      {integration.picture ? (
+        <Image
+          source={{ uri: integration.picture }}
+          style={styles.avatar}
+          contentFit="cover"
+        />
+      ) : (
+        <View style={[styles.avatarFallback, { backgroundColor: colors.secondary }]}>
+          <Feather name="globe" size={12} color={colors.mutedForeground} />
+        </View>
+      )}
+      <Text
+        style={[
+          styles.name,
+          { color: selected ? colors.primary : colors.foreground },
+        ]}
+        numberOfLines={1}
+      >
+        {integration.name}
+      </Text>
+      {selected && (
+        <Feather name="check" size={12} color={colors.primary} />
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 20,
+    borderWidth: 1,
+    gap: 6,
+    maxWidth: 150,
+  },
+  avatar: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+  },
+  avatarFallback: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  name: {
+    fontSize: 12,
+    fontFamily: "Inter_500Medium",
+    flexShrink: 1,
+  },
+});