zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added the first version of BigActionButton

Browse Source
This commit is contained in:
Clément Le Bihan
2023-04-07 00:52:05 +02:00
parent 728bb3d6a2
commit a0040c26ca
2 changed files with 194 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
front/components/BigActionButton.tsx Normal file
View File

@@ -0,0 +1,152 @@
import React from "react";
import {
Box,
Center,
Heading,
Image,
Text,
Pressable,
useBreakpointValue,
Icon,
Row,
PresenceTransition,
} from "native-base";
import { FontAwesome5 } from "@expo/vector-icons";
import { StyleProp, ViewStyle } from "react-native";
type BigActionButtonProps = {
title: string;
subtitle: string;
image: string;
style?: StyleProp<ViewStyle>;
iconName?: string;
iconProvider?: any;
onPress: () => void;
};
// a button with a picture in the background a title and a subtitle
// on hover the picture is zoomed in and the title and subtitle are displayed
const BigActionButton = ({
title,
subtitle,
image,
style,
iconName,
iconProvider,
onPress,
}: BigActionButtonProps) => {
const screenSize = useBreakpointValue({ base: "small", md: "big" });
return (
<Pressable onPress={onPress} style={style}>
{({ isHovered, isPressed }) => {
return (
<Box
style={{
width: "100%",
height: "100%",
position: "relative",
borderRadius: 10,
overflow: "hidden",
}}
>
<PresenceTransition
style={{
width: "100%",
height: "100%",
}}
visible={isHovered}
initial={{
scale: 1,
}}
animate={{
scale: 1.1,
}}
>
<Image
source={{ uri: image }}
alt="image"
style={{
width: "100%",
height: "100%",
resizeMode: "cover",
borderRadius: 10,
}}
/>
</PresenceTransition>
<PresenceTransition
style={{
height: "30%",
}}
visible={isHovered}
initial={{
translateY: -40,
opacity: 0.8,
}}
animate={{
translateY: -85,
opacity: 1,
}}
>
<Box
style={{
position: "absolute",
left: "0",
width: "100%",
height: "100%",
backgroundColor: "white",
padding: "10px",
}}
>
<PresenceTransition
visible={isHovered}
initial={{
scale: 1,
}}
animate={{
scale: 1.2,
translateX: 40,
}}
>
<Row>
<Icon
as={iconProvider}
name={iconName}
size={screenSize === "small" ? "sm" : "md"}
color="black"
marginRight="10px"
/>
<Heading fontSize={screenSize === "small" ? "md" : "xl"} isTruncated>
{title}
</Heading>
</Row>
</PresenceTransition>
{isHovered && (
<PresenceTransition
visible={isHovered}
initial={{
opacity: 0,
translateY: 10,
}}
animate={{
opacity: 1,
translateY: 0,
}}
>
<Text fontSize={screenSize === "small" ? "sm" : "md"} isTruncated noOfLines={2}>
{subtitle}
</Text>
</PresenceTransition>
)}
</Box>
</PresenceTransition>
</Box>
);
}}
{/* The text should be visible on the bottom left corner and when hovering the
button the image will darken and the subtitle will be show in a transition */}
</Pressable>
);
};
export default BigActionButton;

72
front/views/StartPageView.tsx
View File

@@ -1,6 +1,22 @@
import React from "react";
import { View, Text, Stack, Box, Button, Pressable, useBreakpointValue } from "native-base";
import { useNavigation } from "../Navigation";
import {
View,
Text,
Stack,
Box,
Button,
Pressable,
useBreakpointValue,
} from "native-base";
import { FontAwesome5 } from "@expo/vector-icons";
import Card from "../components/Card";
import BigActionButton from "../components/BigActionButton";
const imgLogin =
"https://imgs.search.brave.com/xX-jA3Rspi-ptSFABle5hpVNdOyKDHdVYNr320buGyQ/rs:fit:1200:800:1/g:ce/aHR0cDovL3d3dy5z/dHJhdGVnaWMtYnVy/ZWF1LmNvbS93cC1j/b250ZW50L3VwbG9h/ZHMvMjAxNC8wNy9B/TVgtMTBSQ1ItMTAw/LVNCSS1EUy5qcGc";
const imgGuest =
"https://imgs.search.brave.com/BzxPphCCWbF_Vm0KhenmxH61M3Vm3_HhxWO0s_rw4Nk/rs:fit:1200:1200:1/g:ce/aHR0cHM6Ly9pLnJl/ZGQuaXQvYW9waWtp/dXFrOTV6LmpwZw";
const StartPageView = () => {
const navigation = useNavigation();
@@ -9,47 +25,43 @@ const StartPageView = () => {
<View>
<Text>StartPage</Text>
<Stack
direction={ screenSize === "small" ? "column" : "row" }
direction={screenSize === "small" ? "column" : "row"}
style={{
width: "100%",
justifyContent: "center",
alignItems: "center",
}}
>
<Pressable
<BigActionButton
title="Authenticate"
subtitle="Save and resume your learning at anytime on all devices"
image={imgLogin}
iconName="user"
iconProvider={FontAwesome5}
onPress={() => {
console.log("login");
}}
style={{
width: "clamp(100px, 33.3%, 250px)",
height: "250px",
width: "clamp(100px, 33.3%, 400px)",
height: "300px",
margin: "clamp(10px, 2%, 50px)",
}}
>
<Box
style={{
width: "100%",
height: "100%",
backgroundColor: "red",
}}
>
<Text>Login</Text>
</Box>
</Pressable>
<Pressable
/>
<BigActionButton
title="Test Chromacase"
subtitle="Use a guest account to see around but your progression won't be saved"
image={imgGuest}
iconName="user-clock"
iconProvider={FontAwesome5}
onPress={() => {
console.log("guest");
}}
style={{
width: "clamp(100px, 33.3%, 250px)",
height: "250px",
width: "clamp(100px, 33.3%, 400px)",
height: "300px",
margin: "clamp(10px, 2%, 50px)",
}}
>
<Box
style={{
width: "100%",
height: "100%",
backgroundColor: "blue",
}}
>
<Text>Guest</Text>
</Box>
</Pressable>
/>
</Stack>
</View>
);