48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import { UserResponse } from "@/api/types";
|
|
import { router } from "expo-router";
|
|
import { StyleSheet, View } from "react-native";
|
|
import { Avatar, AvatarFallbackText } from "./ui/avatar";
|
|
import { Button, ButtonText } from "./ui/button";
|
|
import Panel from "./ui/panel";
|
|
import { ThemedText } from "./ui/themed-text";
|
|
interface UserHeaderProps {
|
|
user?: UserResponse
|
|
}
|
|
|
|
const UserHeader = ({ user }: UserHeaderProps) => {
|
|
return (
|
|
<Panel>
|
|
{user && (
|
|
<View className="flex-row">
|
|
<Avatar className="bg-indigo-600 me-3">
|
|
<AvatarFallbackText className="text-white">
|
|
{user.username}
|
|
</AvatarFallbackText>
|
|
</Avatar>
|
|
<View>
|
|
<ThemedText type="subtitle">Welcome, {user.username}</ThemedText>
|
|
<ThemedText>{user.type}</ThemedText>
|
|
</View>
|
|
</View>
|
|
)}
|
|
{!user && (
|
|
<>
|
|
<ThemedText type="subtitle">Hello, Guest</ThemedText>
|
|
<ThemedText style={styles.unathorizedText}>Please log in to proceed.</ThemedText>
|
|
<Button variant="solid" size="md" onPress={() => router.push("/login")}>
|
|
<ButtonText>Login</ButtonText>
|
|
</Button>
|
|
</>
|
|
)}
|
|
|
|
</Panel>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
unathorizedText: {
|
|
marginBottom: 10
|
|
}
|
|
});
|
|
|
|
export default UserHeader; |