antoinepiron
bbbcf9f586
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
85 lines
2.0 KiB
TypeScript
85 lines
2.0 KiB
TypeScript
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,
|
|
},
|
|
});
|