61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import {useEffect, useRef, useState} from "react";
|
|
|
|
import {
|
|
Animated,
|
|
Button,
|
|
Image,
|
|
Modal,
|
|
PanResponder,
|
|
Platform,
|
|
Text,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
View
|
|
} from "react-native";
|
|
import {Gesture, GestureDetector, GestureHandlerRootView, ScrollView} from 'react-native-gesture-handler';
|
|
// eslint-disable-next-line import/namespace
|
|
import MyColorPicker from "@/components/MyColorPicker";
|
|
// @ts-ignore
|
|
import DragAndDropObject from "@/components/DragAndDropObject";
|
|
export default function Index() {
|
|
|
|
const [heading="", setHeading] = useState<string>();
|
|
const [paragraph="", setParagraph] = useState<string>();
|
|
|
|
const[ selectedColor = "#FFFFFF", setSelectedColor ] = useState<string>();
|
|
|
|
|
|
const handleButtonPress = (): void => {
|
|
console.log('Input: ', heading);
|
|
console.log('Color', selectedColor);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
<GestureHandlerRootView style={{ flex: 1 }}>
|
|
<View className="flex-1 justify-center items-center">
|
|
<View className="flex-row items-center">
|
|
<View className="w-[63%] p-4 rounded-xl mt-8 ml-5 mr-3">
|
|
<View className="flex-1 justify-center items-center bg-gray-100">
|
|
<DragAndDropObject
|
|
heading={heading}
|
|
paragraph={paragraph}
|
|
color={selectedColor}
|
|
/>
|
|
</View>
|
|
</View>
|
|
<View className="flex-1 justify-center items-center pt-5">
|
|
<MyColorPicker onColorSelected={(color: string) => setSelectedColor(color)} />
|
|
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</GestureHandlerRootView>
|
|
);
|
|
}
|