{"size": 2569, "ext": "js", "max_stars_repo_path": "pages/SignIn/UI.js", "max_stars_repo_name": "truongduchuy910/timekeeping", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "pages/SignIn/UI.js", "max_issues_repo_name": "truongduchuy910/timekeeping", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "pages/SignIn/UI.js", "max_forks_repo_name": "truongduchuy910/timekeeping", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.0421052632, "max_line_length": 76, "alphanum_fraction": 0.4745036979}
import {
  Image,
  Text,
  TextInput,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View,
} from "react-native";
import { styles } from "../../styles/styles";
import React, { useMemo, useState } from "react";
import Button from "../../components/Button";
import AnimationEmoji from "../../components/Animation/Emoji";
import Layout from "../../components/Layout";
export default function UI({ onSignIn, result, pressAuthor, errors }) {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const clickSignIn = useMemo(
    () => (e) => {
      onSignIn({ username, password });
    },
    [username, password],
  );
  return (
    <TouchableWithoutFeedback style={{ backgroundColor: "tranparent" }}>
      <View style={styles.HomeContainer}>
        <View style={styles.logoContainer}>
          <Image source={require("./logo.png")} style={styles.logo}></Image>
        </View>
        <Text
          style={{
            fontSize: 30,
            fontWeight: "bold",
            color: "#333",
            textAlign: "center",
          }}
        >
          Welcome,
        </Text>
        <Text
          style={{
            color: "#aaa",
            textAlign: "center",
            fontSize: 22,
            paddingTop: "2%",
          }}
        >
          Sign in to continue!
        </Text>
        <View
          style={{
            paddingVertical: "10%",
          }}
        >
          <TextInput
            style={styles.textInput}
            placeholder="Username"
            onChangeText={setUsername}
          />
          <TextInput
            style={styles.textInput}
            placeholder="Password"
            onChangeText={setPassword}
            secureTextEntry={true}
          />

          <Button
            loading={result?.loading}
            onPress={clickSignIn}
            icon={"🚀"}
            value={"Sign In"}
            type="submit"
            css={{ marginBotton: 13 }}
          />
          {errors.map((error, index) => {
            return <Text key={index}>{error?.toString()}</Text>;
          })}
          <TouchableOpacity
            style={{
              color: "#aaa",
              textAlign: "center",
              marginTop: 21,
            }}
            onPress={pressAuthor}
          >
            {/* <AnimationEmoji
              emojis={["🤦‍♂️ 🙆‍♂️", "🙆‍♂️ 🙋‍♂️", "🙋‍♂️ 🤦‍♂️", "🤷‍♂️ 🤷‍♂️"]}
              as={Text}
            /> */}
          </TouchableOpacity>
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
}
