mirror of
https://github.com/lemeow125/Reactnative-notesapp.git
synced 2025-06-28 16:35:44 +08:00
Added pages and basic drawer
This commit is contained in:
parent
4755f592c2
commit
95255a49c1
22 changed files with 1085 additions and 17 deletions
16
src/Components/Background/Background.tsx
Normal file
16
src/Components/Background/Background.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
88
src/Components/Buttons/ButtonAlignLeft/ButtonAlignLeft.tsx
Normal file
88
src/Components/Buttons/ButtonAlignLeft/ButtonAlignLeft.tsx
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
import * as React from 'react';
|
||||
import {Text, View, Pressable, GestureResponderEvent} from 'react-native';
|
||||
import {StyleSheet} from 'react-native';
|
||||
import styles from '../../../styles';
|
||||
|
||||
export interface props {
|
||||
children: React.ReactNode;
|
||||
onPress: (event: GestureResponderEvent) => void;
|
||||
color: string;
|
||||
width: number;
|
||||
}
|
||||
|
||||
export default function ButtonAlignLeft(props: props) {
|
||||
switch (props.color) {
|
||||
case 'Red':
|
||||
return (
|
||||
<Pressable
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.button_generic,
|
||||
...{
|
||||
backgroundColor: '#bc231e',
|
||||
width: props.width,
|
||||
justifyContent: 'flex-start',
|
||||
},
|
||||
}}>
|
||||
{props.children}
|
||||
</Pressable>
|
||||
);
|
||||
case 'Yellow':
|
||||
return (
|
||||
<Pressable
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.button_generic,
|
||||
...{
|
||||
backgroundColor: '#e2b465',
|
||||
width: props.width,
|
||||
justifyContent: 'flex-start',
|
||||
},
|
||||
}}>
|
||||
{props.children}
|
||||
</Pressable>
|
||||
);
|
||||
case 'Green':
|
||||
return (
|
||||
<Pressable
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.button_generic,
|
||||
...{
|
||||
backgroundColor: '#0dbc6a',
|
||||
width: props.width,
|
||||
justifyContent: 'flex-start',
|
||||
},
|
||||
}}>
|
||||
{props.children}
|
||||
</Pressable>
|
||||
);
|
||||
case 'Blue':
|
||||
return (
|
||||
<Pressable
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.button_generic,
|
||||
...{
|
||||
backgroundColor: '#005997',
|
||||
width: props.width,
|
||||
justifyContent: 'flex-start',
|
||||
},
|
||||
}}>
|
||||
{props.children}
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Pressable
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.button_generic,
|
||||
...{backgroundColor: '#bc231e'},
|
||||
}}>
|
||||
<Text style={{...styles.text_white, ...{fontSize: 32}}}>
|
||||
Invalid button color specified
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
72
src/Components/Buttons/ButtonCentered/ButtonCentered.tsx
Normal file
72
src/Components/Buttons/ButtonCentered/ButtonCentered.tsx
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
import * as React from 'react';
|
||||
import {Text, View, Pressable, GestureResponderEvent} from 'react-native';
|
||||
import {StyleSheet} from 'react-native';
|
||||
import styles from '../../../styles';
|
||||
|
||||
export interface props {
|
||||
children: React.ReactNode;
|
||||
onPress: (event: GestureResponderEvent) => void;
|
||||
color: string;
|
||||
width: number;
|
||||
}
|
||||
|
||||
export default function ButtonCentered(props: props) {
|
||||
switch (props.color) {
|
||||
case 'Red':
|
||||
return (
|
||||
<Pressable
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.button_generic,
|
||||
...{backgroundColor: '#bc231e', width: props.width},
|
||||
}}>
|
||||
{props.children}
|
||||
</Pressable>
|
||||
);
|
||||
case 'Yellow':
|
||||
return (
|
||||
<Pressable
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.button_generic,
|
||||
...{backgroundColor: '#e2b465', width: props.width},
|
||||
}}>
|
||||
{props.children}
|
||||
</Pressable>
|
||||
);
|
||||
case 'Green':
|
||||
return (
|
||||
<Pressable
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.button_generic,
|
||||
...{backgroundColor: '#0dbc6a', width: props.width},
|
||||
}}>
|
||||
{props.children}
|
||||
</Pressable>
|
||||
);
|
||||
case 'Blue':
|
||||
return (
|
||||
<Pressable
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.button_generic,
|
||||
...{backgroundColor: '#005997', width: props.width},
|
||||
}}>
|
||||
{props.children}
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Pressable
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.button_generic,
|
||||
...{backgroundColor: '#bc231e'},
|
||||
}}>
|
||||
<Text style={{...styles.text_white, ...{fontSize: 32}}}>
|
||||
Invalid button color specified
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
import * as React from "react";
|
||||
import { DrawerContentScrollView } from "@react-navigation/drawer";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { Text, View } from "react-native";
|
||||
import ButtonAlignLeft from "../../../Buttons/ButtonAlignLeft/ButtonAlignLeft";
|
||||
import styles from "../../../../styles";
|
||||
|
||||
import { RootDrawerParamList } from "../../../../Interfaces/Interfaces";
|
||||
|
||||
import AddIcon from "../../../Icons/AddIcon/AddIcon";
|
||||
import HomeIcon from "../../../Icons/HomeIcon/HomeIcon";
|
||||
import LoginIcon from "../../../Icons/LoginIcon/LoginIcon";
|
||||
import SignupIcon from "../../../Icons/SignupIcon/SignupIcon";
|
||||
import UserIcon from "../../../Icons/UserIcon/UserIcon";
|
||||
import AppIcon from "../../../Icons/AppIcon/AppIcon";
|
||||
|
||||
export default function CustomDrawerContent(props: {}) {
|
||||
const navigation = useNavigation<RootDrawerParamList>();
|
||||
const width = 224;
|
||||
return (
|
||||
<DrawerContentScrollView {...props}>
|
||||
<View
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{ justifyContent: "center" },
|
||||
}}
|
||||
>
|
||||
<AppIcon size={32} color="white" />
|
||||
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
|
||||
Clip Notes
|
||||
</Text>
|
||||
</View>
|
||||
<ButtonAlignLeft
|
||||
color="Blue"
|
||||
width={width}
|
||||
onPress={() => {
|
||||
navigation.navigate("Home");
|
||||
}}
|
||||
>
|
||||
<HomeIcon size={32} color="white" />
|
||||
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>Home</Text>
|
||||
</ButtonAlignLeft>
|
||||
<ButtonAlignLeft
|
||||
color="Green"
|
||||
width={width}
|
||||
onPress={() => {
|
||||
navigation.navigate("Add Note");
|
||||
}}
|
||||
>
|
||||
<AddIcon size={32} color="white" />
|
||||
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
|
||||
Add Note
|
||||
</Text>
|
||||
</ButtonAlignLeft>
|
||||
<ButtonAlignLeft
|
||||
color="Green"
|
||||
width={width}
|
||||
onPress={() => {
|
||||
navigation.navigate("Login");
|
||||
}}
|
||||
>
|
||||
<LoginIcon size={32} color="white" />
|
||||
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>Login</Text>
|
||||
</ButtonAlignLeft>
|
||||
<ButtonAlignLeft
|
||||
color="Yellow"
|
||||
width={width}
|
||||
onPress={() => {
|
||||
navigation.navigate("User Info");
|
||||
}}
|
||||
>
|
||||
<UserIcon size={32} color="white" />
|
||||
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
|
||||
User Info
|
||||
</Text>
|
||||
</ButtonAlignLeft>
|
||||
<ButtonAlignLeft
|
||||
color="Yellow"
|
||||
width={width}
|
||||
onPress={() => {
|
||||
navigation.navigate("Register");
|
||||
}}
|
||||
>
|
||||
<SignupIcon size={32} color="white" />
|
||||
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
|
||||
Register
|
||||
</Text>
|
||||
</ButtonAlignLeft>
|
||||
</DrawerContentScrollView>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { View, Image, Text } from "react-native";
|
||||
import type { DrawerNavigationOptions } from "@react-navigation/drawer";
|
||||
import AppIcon from "../../Icons/AppIcon/AppIcon";
|
||||
const DrawerScreenSettings: DrawerNavigationOptions = {
|
||||
headerTitleStyle: { color: "white", fontSize: 26 },
|
||||
unmountOnBlur: true,
|
||||
headerStyle: { backgroundColor: "#0087e4" },
|
||||
headerTintColor: "white",
|
||||
drawerType: "slide",
|
||||
drawerLabelStyle: {
|
||||
color: "white",
|
||||
},
|
||||
drawerStyle: {
|
||||
backgroundColor: "#002d4d",
|
||||
width: 260,
|
||||
},
|
||||
headerRight: () => (
|
||||
<View
|
||||
style={{ flexDirection: "row", marginRight: 16, alignItems: "center" }}
|
||||
>
|
||||
<AppIcon size={32} color="white" />
|
||||
</View>
|
||||
),
|
||||
};
|
||||
export default DrawerScreenSettings;
|
||||
26
src/Components/Icons/AddIcon/AddIcon.tsx
Normal file
26
src/Components/Icons/AddIcon/AddIcon.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import * as React from "react";
|
||||
import { IconProps } from "../../../Interfaces/Interfaces";
|
||||
|
||||
import { Svg, Path } from "react-native-svg";
|
||||
|
||||
export default function AddIcon(props: IconProps) {
|
||||
return (
|
||||
<>
|
||||
<Svg
|
||||
width={props.size}
|
||||
height={props.size}
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth="2"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
|
||||
<Path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></Path>
|
||||
<Path d="M9 12l6 0"></Path>
|
||||
<Path d="M12 9l0 6"></Path>
|
||||
</Svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
27
src/Components/Icons/AppIcon/AppIcon.tsx
Normal file
27
src/Components/Icons/AppIcon/AppIcon.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import * as React from "react";
|
||||
import { IconProps } from "../../../Interfaces/Interfaces";
|
||||
|
||||
import { Svg, Path } from "react-native-svg";
|
||||
|
||||
export default function AppIcon(props: IconProps) {
|
||||
return (
|
||||
<>
|
||||
<Svg
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth="2"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
|
||||
<Path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"></Path>
|
||||
<Path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></Path>
|
||||
<Path d="M9 12h6"></Path>
|
||||
<Path d="M9 16h6"></Path>
|
||||
</Svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
26
src/Components/Icons/HomeIcon/HomeIcon.tsx
Normal file
26
src/Components/Icons/HomeIcon/HomeIcon.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import * as React from "react";
|
||||
import { IconProps } from "../../../Interfaces/Interfaces";
|
||||
|
||||
import { Svg, Path } from "react-native-svg";
|
||||
|
||||
export default function HomeIcon(props: IconProps) {
|
||||
return (
|
||||
<>
|
||||
<Svg
|
||||
width={props.size}
|
||||
height={props.size}
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth="2"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
|
||||
<Path d="M5 12l-2 0l9 -9l9 9l-2 0"></Path>
|
||||
<Path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></Path>
|
||||
<Path d="M10 12h4v4h-4z"></Path>
|
||||
</Svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
25
src/Components/Icons/LoginIcon/LoginIcon.tsx
Normal file
25
src/Components/Icons/LoginIcon/LoginIcon.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import * as React from "react";
|
||||
import { IconProps } from "../../../Interfaces/Interfaces";
|
||||
|
||||
import { Svg, Path } from "react-native-svg";
|
||||
|
||||
export default function LoginIcon(props: IconProps) {
|
||||
return (
|
||||
<>
|
||||
<Svg
|
||||
width={props.size}
|
||||
height={props.size}
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth="2"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
|
||||
<Path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></Path>
|
||||
<Path d="M20 12h-13l3 -3m0 6l-3 -3"></Path>
|
||||
</Svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
26
src/Components/Icons/SignupIcon/SignupIcon.tsx
Normal file
26
src/Components/Icons/SignupIcon/SignupIcon.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import * as React from "react";
|
||||
import { IconProps } from "../../../Interfaces/Interfaces";
|
||||
|
||||
import { Svg, Path } from "react-native-svg";
|
||||
|
||||
export default function SignupIcon(props: IconProps) {
|
||||
return (
|
||||
<>
|
||||
<Svg
|
||||
width={props.size}
|
||||
height={props.size}
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth="2"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
|
||||
<Path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></Path>
|
||||
<Path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></Path>
|
||||
<Path d="M16 11h6m-3 -3v6"></Path>
|
||||
</Svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
25
src/Components/Icons/UserIcon/UserIcon.tsx
Normal file
25
src/Components/Icons/UserIcon/UserIcon.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import * as React from "react";
|
||||
import { IconProps } from "../../../Interfaces/Interfaces";
|
||||
|
||||
import { Svg, Path } from "react-native-svg";
|
||||
|
||||
export default function UserIcon(props: IconProps) {
|
||||
return (
|
||||
<>
|
||||
<Svg
|
||||
width={props.size}
|
||||
height={props.size}
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth="2"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
|
||||
<Path d="M12 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></Path>
|
||||
<Path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></Path>
|
||||
</Svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue