katoikia-app/mobile-ui/App.js

139 lines
3.2 KiB
JavaScript
Raw Normal View History

2022-08-04 07:22:41 +00:00
import React from "react";
import {
Text,
Link,
HStack,
Center,
Heading,
Switch,
useColorMode,
NativeBaseProvider,
extendTheme,
VStack,
Box,
FormControl,
Input,
Button,
2022-08-05 21:38:20 +00:00
Image
2022-08-04 07:22:41 +00:00
} from "native-base";
import NativeBaseIcon from "./components/NativeBaseIcon";
import { Platform } from "react-native";
2022-07-18 20:54:08 +00:00
2022-08-04 07:22:41 +00:00
// Define the config
const config = {
useSystemColorMode: false,
initialColorMode: "dark",
};
2022-07-18 20:54:08 +00:00
2022-08-04 07:22:41 +00:00
// extend the theme
2022-08-05 21:38:20 +00:00
export const theme = extendTheme({ config,
colors: {
brown: "#D7A86E"
} });
//const logo = require('./assets/')
2022-07-18 20:54:08 +00:00
2022-08-04 07:22:41 +00:00
export default function App() {
return (
<NativeBaseProvider>
<Center w="100%">
<Box safeArea p="2" py="8" w="90%" maxW="290">
2022-08-05 21:38:20 +00:00
{/* <Image source={{
uri: logo.default.src
}} width={500} height={500}
alt="Katoikia logo" size="xl" /> */}
2022-08-04 07:22:41 +00:00
<Heading
size="lg"
fontWeight="600"
color="coolGray.800"
_dark={{
color: "warmGray.50",
}}
>
2022-08-05 21:38:20 +00:00
Bienvenido a Katoikia
2022-08-04 07:22:41 +00:00
</Heading>
<Heading
mt="1"
_dark={{
color: "warmGray.200",
}}
color="coolGray.600"
fontWeight="medium"
size="xs"
>
2022-08-05 21:38:20 +00:00
Su app de comunidad de confianza
2022-08-04 07:22:41 +00:00
</Heading>
2022-07-18 20:54:08 +00:00
2022-08-04 07:22:41 +00:00
<VStack space={3} mt="5">
<FormControl>
2022-08-05 21:38:20 +00:00
<FormControl.Label> Correo Electrónico</FormControl.Label>
2022-08-04 07:22:41 +00:00
<Input />
</FormControl>
<FormControl>
2022-08-05 21:38:20 +00:00
<FormControl.Label> Contraseña </FormControl.Label>
2022-08-04 07:22:41 +00:00
<Input type="password" />
<Link
_text={{
fontSize: "xs",
fontWeight: "500",
color: "indigo.500",
}}
alignSelf="flex-end"
mt="1"
>
2022-08-05 21:38:20 +00:00
Recuperar contraseña
2022-08-04 07:22:41 +00:00
</Link>
</FormControl>
2022-08-05 21:38:20 +00:00
<Button mt="2" colorScheme="primary"
>
<Text>Continuar</Text>
2022-08-04 07:22:41 +00:00
</Button>
<HStack mt="6" justifyContent="center">
2022-08-05 21:38:20 +00:00
{/* <Text
2022-08-04 07:22:41 +00:00
fontSize="sm"
color="coolGray.600"
_dark={{
color: "warmGray.200",
}}
>
I'm a new user.
2022-08-05 21:38:20 +00:00
</Text> */}
2022-08-04 07:22:41 +00:00
<Link
_text={{
2022-08-05 21:38:20 +00:00
color: "warning.300",
2022-08-04 07:22:41 +00:00
fontWeight: "medium",
fontSize: "sm",
}}
href="#"
>
2022-08-05 21:38:20 +00:00
Regístrese aquí
2022-08-04 07:22:41 +00:00
</Link>
</HStack>
</VStack>
</Box>
</Center>
</NativeBaseProvider>
);
2022-07-18 20:54:08 +00:00
}
2022-08-04 07:22:41 +00:00
// Color Switch Component
function ToggleDarkMode() {
const { colorMode, toggleColorMode } = useColorMode();
return (
<HStack space={2} alignItems="center">
<Text>Dark</Text>
<Switch
isChecked={colorMode === "light"}
onToggle={toggleColorMode}
aria-label={
colorMode === "light" ? "switch to dark mode" : "switch to light mode"
}
2022-07-18 20:54:08 +00:00
/>
2022-08-04 07:22:41 +00:00
<Text>Light</Text>
</HStack>
);
2022-07-18 20:54:08 +00:00
}