Content for web and mobile
This commit is contained in:
parent
6ced9091b3
commit
bc347c3f05
@ -1,18 +1,41 @@
|
|||||||
import { ContentPadding } from "@/constants/theme";
|
import { ContentPadding } from "@/constants/theme";
|
||||||
import { forwardRef } from "react";
|
import { forwardRef } from "react";
|
||||||
import { ScrollView, ScrollViewProps, StyleSheet } from "react-native";
|
import {
|
||||||
|
Platform,
|
||||||
|
ScrollView,
|
||||||
|
ScrollViewProps,
|
||||||
|
StyleSheet,
|
||||||
|
} from "react-native";
|
||||||
|
|
||||||
interface ContentProps extends ScrollViewProps {
|
interface ContentProps extends ScrollViewProps {
|
||||||
children?: React.ReactNode;
|
children?: React.ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Content = forwardRef<ScrollView, ContentProps>(({ children, style, ...rest }, ref) => {
|
const Content = forwardRef<ScrollView, ContentProps>(
|
||||||
return (
|
({ children, style, ...rest }, ref) => {
|
||||||
<ScrollView ref={ref} contentContainerStyle={[styles.content, style]} {...rest}>
|
return (
|
||||||
{children}
|
<>
|
||||||
</ScrollView>
|
{Platform.OS === "web" ? (
|
||||||
);
|
<ScrollView
|
||||||
});
|
ref={ref}
|
||||||
|
style={[styles.content, style]}
|
||||||
|
{...rest}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</ScrollView>
|
||||||
|
) : (
|
||||||
|
<ScrollView
|
||||||
|
ref={ref}
|
||||||
|
contentContainerStyle={[styles.content, style]}
|
||||||
|
{...rest}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</ScrollView>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
Content.displayName = "Content";
|
Content.displayName = "Content";
|
||||||
|
|
||||||
@ -20,8 +43,8 @@ const styles = StyleSheet.create({
|
|||||||
content: {
|
content: {
|
||||||
paddingHorizontal: ContentPadding,
|
paddingHorizontal: ContentPadding,
|
||||||
paddingTop: ContentPadding + 30,
|
paddingTop: ContentPadding + 30,
|
||||||
paddingBottom: ContentPadding + 20
|
paddingBottom: ContentPadding + 20,
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export default Content;
|
export default Content;
|
||||||
@ -87,9 +87,9 @@ const UserTest = ({ userTest, onPress }: UserTestProps) => {
|
|||||||
{userTest.answers.length} Questions
|
{userTest.answers.length} Questions
|
||||||
</ThemedText>
|
</ThemedText>
|
||||||
|
|
||||||
<ThemedText type="meta">
|
{testStatus !== TestStatus.InProgress && <ThemedText type="meta">
|
||||||
{successAnswers} / {userTest.answers.length} Correct
|
{successAnswers} / {userTest.answers.length} Correct
|
||||||
</ThemedText>
|
</ThemedText>}
|
||||||
</View>
|
</View>
|
||||||
</Panel>
|
</Panel>
|
||||||
</Pressable>
|
</Pressable>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user