initial UIs

This commit is contained in:
AngelV3rgs 2023-03-14 23:53:31 +08:00
parent 0318f4eb53
commit 7008729348
8 changed files with 354 additions and 18 deletions

179
package-lock.json generated
View file

@ -10,15 +10,20 @@
"dependencies": {
"@react-navigation/drawer": "^6.6.2",
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"expo": "~48.0.5",
"expo-linear-gradient": "^12.1.1",
"expo-status-bar": "~1.4.4",
"react": "18.2.0",
"react-native": "0.71.3",
"react-native-gesture-handler": "~2.9.0",
"react-native-paper": "^5.4.0",
"react-native-pell-rich-editor": "^1.8.8",
"react-native-reanimated": "~2.14.4",
"react-native-safe-area-context": "4.5.0",
"react-native-screens": "~3.20.0",
"react-native-svg": "13.4.0"
"react-native-svg": "13.4.0",
"react-native-webview": "^11.26.1"
},
"devDependencies": {
"@babel/core": "^7.20.0",
@ -1806,6 +1811,18 @@
"node": ">=6.9.0"
}
},
"node_modules/@callstack/react-theme-provider": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.8.tgz",
"integrity": "sha512-5U231sYY2sqQOaELX0WBCn+iluV8bFaXIS7em03k4W5Xz0AhGvKlnpLIhDGFP8im/SvNW7/2XoR0BsClhn9t6Q==",
"dependencies": {
"deepmerge": "^3.2.0",
"hoist-non-react-statics": "^3.3.0"
},
"peerDependencies": {
"react": ">=16.3.0"
}
},
"node_modules/@egjs/hammerjs": {
"version": "2.0.17",
"resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
@ -4862,6 +4879,22 @@
"react-native": "*"
}
},
"node_modules/@react-navigation/native-stack": {
"version": "6.9.12",
"resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.9.12.tgz",
"integrity": "sha512-kS2zXCWP0Rgt7uWaCUKrRl7U2U1Gp19rM1kyRY2YzBPXhWGVPjQ2ygBp88CTQzjgy8M07H/79jvGiZ0mlEJI+g==",
"dependencies": {
"@react-navigation/elements": "^1.3.17",
"warn-once": "^0.1.0"
},
"peerDependencies": {
"@react-navigation/native": "^6.0.0",
"react": "*",
"react-native": "*",
"react-native-safe-area-context": ">= 3.0.0",
"react-native-screens": ">= 3.0.0"
}
},
"node_modules/@react-navigation/native/node_modules/escape-string-regexp": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@ -7083,6 +7116,14 @@
"expo": "*"
}
},
"node_modules/expo-linear-gradient": {
"version": "12.1.1",
"resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-12.1.1.tgz",
"integrity": "sha512-W5WV9+SOlRSog/SLvDbpd0L/7g8WzoOKDE4WHv5wNk6m9iM1K0eAuP+MC+8JzVXoZOOj9OPuh9rkZ4KCzTOM1A==",
"peerDependencies": {
"expo": "*"
}
},
"node_modules/expo-modules-autolinking": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.1.2.tgz",
@ -11720,6 +11761,40 @@
"resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.15.tgz",
"integrity": "sha512-7S3pAuPaQJlhax6EZ4JMsDNpj05TfuzX9gPgWLrFfAIWIFLuJ6aDQYAZy2TEI9QJALPoWrj8LWaqP/DGYh14pw=="
},
"node_modules/react-native-paper": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.4.0.tgz",
"integrity": "sha512-f1etvm1RZakDH/oKUNH5BSFBysip3dv++Wr63Ng2p0YfG/iH4rzeQ5DVhksHObnIFWPFHRkrPsqcisaUlkl0oA==",
"dependencies": {
"@callstack/react-theme-provider": "^3.0.8",
"color": "^3.1.2",
"use-event-callback": "^0.1.0"
},
"peerDependencies": {
"react": "*",
"react-native": "*",
"react-native-safe-area-context": "*",
"react-native-vector-icons": "*"
}
},
"node_modules/react-native-paper/node_modules/color": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
"integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
"dependencies": {
"color-convert": "^1.9.3",
"color-string": "^1.6.0"
}
},
"node_modules/react-native-pell-rich-editor": {
"version": "1.8.8",
"resolved": "https://registry.npmjs.org/react-native-pell-rich-editor/-/react-native-pell-rich-editor-1.8.8.tgz",
"integrity": "sha512-pPpj3rVEbmOcGbUMiutuQhpxp5HzOQlhVGhZ6B7aWlsliWWDtsi+lu3RXNV+g62PcQ07qDDtZwKOx1fSzff6HQ==",
"peerDependencies": {
"react-native": ">=0.50.0",
"react-native-webview": ">=7.5.2"
}
},
"node_modules/react-native-reanimated": {
"version": "2.14.4",
"resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.14.4.tgz",
@ -11774,6 +11849,100 @@
"react-native": "*"
}
},
"node_modules/react-native-vector-icons": {
"version": "9.2.0",
"resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-9.2.0.tgz",
"integrity": "sha512-wKYLaFuQST/chH3AJRjmOLoLy3JEs1JR6zMNgTaemFpNoXs0ztRnTxcxFD9xhX7cJe1/zoN5BpQYe7kL0m5yyA==",
"peer": true,
"dependencies": {
"prop-types": "^15.7.2",
"yargs": "^16.1.1"
},
"bin": {
"fa5-upgrade": "bin/fa5-upgrade.sh",
"generate-icon": "bin/generate-icon.js"
}
},
"node_modules/react-native-vector-icons/node_modules/cliui": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
"peer": true,
"dependencies": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.0",
"wrap-ansi": "^7.0.0"
}
},
"node_modules/react-native-vector-icons/node_modules/strip-ansi": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
"peer": true,
"dependencies": {
"ansi-regex": "^5.0.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/react-native-vector-icons/node_modules/y18n": {
"version": "5.0.8",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
"peer": true,
"engines": {
"node": ">=10"
}
},
"node_modules/react-native-vector-icons/node_modules/yargs": {
"version": "16.2.0",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
"integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
"peer": true,
"dependencies": {
"cliui": "^7.0.2",
"escalade": "^3.1.1",
"get-caller-file": "^2.0.5",
"require-directory": "^2.1.1",
"string-width": "^4.2.0",
"y18n": "^5.0.5",
"yargs-parser": "^20.2.2"
},
"engines": {
"node": ">=10"
}
},
"node_modules/react-native-vector-icons/node_modules/yargs-parser": {
"version": "20.2.9",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
"integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
"peer": true,
"engines": {
"node": ">=10"
}
},
"node_modules/react-native-webview": {
"version": "11.26.1",
"resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-11.26.1.tgz",
"integrity": "sha512-hC7BkxOpf+z0UKhxFSFTPAM4shQzYmZHoELa6/8a/MspcjEP7ukYKpuSUTLDywQditT8yI9idfcKvfZDKQExGw==",
"dependencies": {
"escape-string-regexp": "2.0.0",
"invariant": "2.2.4"
},
"peerDependencies": {
"react": "*",
"react-native": "*"
}
},
"node_modules/react-native-webview/node_modules/escape-string-regexp": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
"integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
"engines": {
"node": ">=8"
}
},
"node_modules/react-native/node_modules/promise": {
"version": "8.3.0",
"resolved": "https://registry.npmjs.org/promise/-/promise-8.3.0.tgz",
@ -13594,6 +13763,14 @@
"node": ">=0.10.0"
}
},
"node_modules/use-event-callback": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/use-event-callback/-/use-event-callback-0.1.0.tgz",
"integrity": "sha512-5fTzY5UEXHMK5UR0NRkUz6TPfWmmX9fO8Tx3SnHrfMPdrQ7Rna0gDBy0r56SP68TwsP9DgwSBzeysCu3A/Z2NA==",
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/use-latest-callback": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.5.tgz",

View file

@ -11,15 +11,20 @@
"dependencies": {
"@react-navigation/drawer": "^6.6.2",
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"expo": "~48.0.5",
"expo-linear-gradient": "^12.1.1",
"expo-status-bar": "~1.4.4",
"react": "18.2.0",
"react-native": "0.71.3",
"react-native-gesture-handler": "~2.9.0",
"react-native-paper": "^5.4.0",
"react-native-pell-rich-editor": "^1.8.8",
"react-native-reanimated": "~2.14.4",
"react-native-safe-area-context": "4.5.0",
"react-native-screens": "~3.20.0",
"react-native-svg": "13.4.0"
"react-native-svg": "13.4.0",
"react-native-webview": "^11.26.1"
},
"devDependencies": {
"@babel/core": "^7.20.0",

View file

@ -2,12 +2,14 @@ import * as React from "react";
import { View } from "react-native";
import styles from "../../styles";
export interface props {
children: React.ReactNode;
}
export default function Background(props: props) {
return (
<View style={styles.background}>
<View style={{ margin: 8 }} />
{props.children}

View file

@ -1,12 +1,44 @@
import * as React from 'react';
import {View, Text} from 'react-native';
import {View, Text, TextInput} from 'react-native';
import styles from '../../styles';
import Background from '../../Components/Background/Background';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useState } from "react";
import {TouchableOpacity,} from "react-native";
export default function AddNote() {
const [addnote, setNote] = useState("");
return (
<Background>
<Text style={{...styles.text_white, ...{fontSize: 32}}}>Add Note</Text>
<SafeAreaView>
<View style={styles.addnotecont}>
<View style={styles.tle}>
<TextInput
style={styles.title}
placeholder="Title"
placeholderTextColor="white"
onChangeText={setNote}
value={addnote}
/>
</View>
<View style={styles.typehere}>
<TextInput
style={styles.typeinput}
placeholder="Type here...."
placeholderTextColor="white"
onChangeText={setNote}
value={addnote}
/>
</View>
<TouchableOpacity style={styles.savebtn}>
<Text style={styles.savenote}>SAVE</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</Background>
);
}

View file

@ -2,11 +2,13 @@ import * as React from 'react';
import {View, Text} from 'react-native';
import styles from '../../styles';
import Background from '../../Components/Background/Background';
import AppIcon from '../../Components/Icons/AppIcon/AppIcon';
import AddIcon from '../../Components/Icons/AddIcon/AddIcon';
export default function Home() {
//const navigation = ({ navigation}: {navigation:any}) => {
return (
<Background>
<Text style={{...styles.text_white, ...{fontSize: 25}}}>Clip Notes</Text>
<View
style={{
display: 'flex',
@ -14,12 +16,14 @@ export default function Home() {
alignItems: 'center',
justifyContent: 'center',
}}>
<AppIcon size={64} color="white" />
<Text style={{...styles.text_white, ...{fontSize: 32}}}>
Clip Notes
</Text>
</View>
<View style={styles.homecont}>
<View style={styles.addicon}>
<AddIcon size={32} color="white" />
<Text style={styles.no}>No notes yet...</Text>
</View>
<View style={{margin: 16}} />
</View>
</View>
</Background>
);
}

View file

@ -8,7 +8,6 @@ import { useState } from "react";
import {TouchableOpacity,} from "react-native";
export default function Login() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
@ -29,7 +28,6 @@ export default function Login() {
value={username}
/>
</View>
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}

View file

@ -2,11 +2,18 @@ import * as React from 'react';
import {View, Text} from 'react-native';
import styles from '../../styles';
import Background from '../../Components/Background/Background';
import { SafeAreaView } from 'react-native-safe-area-context';
import UserIcon from '../../Components/Icons/UserIcon/UserIcon';
export default function UserInfo() {
return (
<Background>
<Text style={{...styles.text_white, ...{fontSize: 32}}}>UserInfo</Text>
<Text style={{...styles.text_white, ...{fontSize: 32}}}></Text>
<SafeAreaView>
<View style={styles.userinfocont}>
<Text style ={styles.userlabel} > <UserIcon size={32} color="white"/> USER INFO</Text>
</View>
</SafeAreaView>
</Background>
);
}

View file

@ -1,11 +1,13 @@
import {StyleSheet} from 'react-native';
const styles = StyleSheet.create({
background: {
backgroundColor: '#002d4c',
height: '100%',
width: '100%',
backgroundColor:'#002d4d',
position: 'absolute',
},
text_white: {
color: 'white',
@ -44,7 +46,6 @@ const styles = StyleSheet.create({
width: "70%",
height: 45,
marginBottom: 20,
},
TextInput: {
color: 'white',
@ -103,6 +104,116 @@ const styles = StyleSheet.create({
marginBottom: 30,
color: 'white',
},
box:{
width: '100%',
height: 200,
},
userinfocont:{
marginTop: 10,
marginLeft: 50,
height: 80,
width: 300,
borderRadius: 25,
backgroundColor: 'orange',
alignItems: "center",
justifyContent: "center",
},
userlabel:{
fontWeight: 'bold',
fontSize: 25,
marginBottom: 10,
color: 'white',
},
addnote:{
marginLeft: 180,
width: "10%",
borderRadius: 25,
height: 30,
alignItems: "center",
justifyContent: "center",
backgroundColor: "lightgreen",
},
addtext:{
fontSize: 20,
color: 'white',
},
addnotescont:{
marginTop: 20,
marginLeft: 20,
height: 200,
width: 350,
backgroundColor: 'blue',
alignItems: 'flex-start',
justifyContent: 'center',
},
addicon:{
alignItems: 'center',
marginTop: 5,
},
no: {
fontSize: 20,
color: 'white',
marginTop: 20,
alignItems: 'center'
},
typehere:{
backgroundColor: "black",
borderRadius: 10,
width: "75%",
height: 300,
marginTop: 20,
},
typeinput: {
color: 'white',
flex: 1,
paddingBottom: 250,
marginLeft: 5,
},
title:{
color: 'white',
flex: 1,
marginLeft: 5,
},
tle:{
backgroundColor: "black",
borderRadius: 10,
width: "80%",
height: 40,
marginTop: 20,
},
addnotecont:{
marginTop: 30,
marginLeft: 22,
height: 500,
width: 350,
borderRadius: 25,
backgroundColor: '#7cb9e8',
alignItems: "center",
justifyContent: "center",
},
savebtn:{
width: "50%",
borderRadius: 25,
height: 50,
alignItems: "center",
justifyContent: "center",
marginTop: 40,
backgroundColor: "green",
},
savenote:{
color: 'white',
fontWeight: 'bold',
fontSize: 20,
},
homecont:{
marginTop: 30,
height: 150,
width: 350,
borderRadius: 25,
backgroundColor: '#7cb9e8',
alignItems: "center",
justifyContent: "center",
},
});
export default styles;