2025-06-18 04:44:02 +08:00
|
|
|
import { usePanelTopOffset } from '@/constants/SafeArea';
|
2025-06-17 04:21:36 +08:00
|
|
|
import { useThemedStyles } from '@/hooks/useThemeColor';
|
|
|
|
|
import { X } from 'lucide-react-native';
|
|
|
|
|
import React from 'react';
|
|
|
|
|
import { TouchableOpacity, View } from 'react-native';
|
|
|
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
|
|
|
import { Body, H3 } from './Typography';
|
|
|
|
|
|
|
|
|
|
interface RightPanelProps {
|
|
|
|
|
isVisible: boolean;
|
|
|
|
|
onClose: () => void;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export const RightPanel: React.FC<RightPanelProps> = ({ isVisible, onClose }) => {
|
|
|
|
|
const insets = useSafeAreaInsets();
|
2025-06-18 04:44:02 +08:00
|
|
|
const panelTopOffset = usePanelTopOffset();
|
2025-06-17 04:21:36 +08:00
|
|
|
|
|
|
|
|
const styles = useThemedStyles((theme) => ({
|
|
|
|
|
panel: {
|
|
|
|
|
backgroundColor: theme.sidebar,
|
|
|
|
|
flex: 1,
|
|
|
|
|
height: '100%' as const,
|
2025-06-18 04:44:02 +08:00
|
|
|
paddingTop: panelTopOffset,
|
2025-06-17 04:21:36 +08:00
|
|
|
paddingBottom: insets.bottom,
|
|
|
|
|
paddingHorizontal: 20,
|
|
|
|
|
},
|
|
|
|
|
header: {
|
|
|
|
|
flexDirection: 'row' as const,
|
|
|
|
|
justifyContent: 'space-between' as const,
|
|
|
|
|
alignItems: 'center' as const,
|
|
|
|
|
paddingBottom: 20,
|
|
|
|
|
borderBottomWidth: 1,
|
|
|
|
|
borderBottomColor: theme.border,
|
|
|
|
|
marginBottom: 20,
|
|
|
|
|
},
|
|
|
|
|
title: {
|
|
|
|
|
color: theme.foreground,
|
|
|
|
|
},
|
|
|
|
|
closeButton: {
|
|
|
|
|
width: 32,
|
|
|
|
|
height: 32,
|
|
|
|
|
borderRadius: 16,
|
|
|
|
|
backgroundColor: theme.mutedWithOpacity(0.1),
|
|
|
|
|
justifyContent: 'center' as const,
|
|
|
|
|
alignItems: 'center' as const,
|
|
|
|
|
},
|
|
|
|
|
content: {
|
|
|
|
|
flex: 1,
|
|
|
|
|
},
|
|
|
|
|
placeholderText: {
|
|
|
|
|
color: theme.placeholderText,
|
|
|
|
|
},
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
if (!isVisible) return null;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<View style={styles.panel}>
|
|
|
|
|
<View style={styles.header}>
|
2025-06-18 04:44:02 +08:00
|
|
|
<H3 style={styles.title}>Tool</H3>
|
2025-06-17 04:21:36 +08:00
|
|
|
<TouchableOpacity style={styles.closeButton} onPress={onClose}>
|
|
|
|
|
<X size={16} color={styles.placeholderText.color} />
|
|
|
|
|
</TouchableOpacity>
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
|
|
<View style={styles.content}>
|
|
|
|
|
<Body style={styles.placeholderText}>
|
2025-06-18 04:44:02 +08:00
|
|
|
Tool content goes here...
|
2025-06-17 04:21:36 +08:00
|
|
|
</Body>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
);
|
|
|
|
|
};
|
