70 lines
1.8 KiB
JavaScript
70 lines
1.8 KiB
JavaScript
import { Image, Pressable, Text, View } from "react-native";
|
|
import React from "reactn";
|
|
import { responsiveWidth } from "../actions/responsiveSizes.js";
|
|
|
|
import { icons } from "../assets";
|
|
import { Fonts, Style, gutters } from "../styles";
|
|
|
|
import { Routes } from "../navigation";
|
|
import { navigate } from "../navigation/NavigationService";
|
|
|
|
import useLayoutType, { sidebarWidth } from "../hooks/useLayoutType.js";
|
|
import useNotifications from "../hooks/useNotifications";
|
|
|
|
export default ({ title = "", containerStyle = {}, bell = false }) => {
|
|
const { isDesktop } = useLayoutType();
|
|
const notificationsContext = useNotifications();
|
|
const unreadCount = notificationsContext?.unreadCount || 0;
|
|
const hasUnread = unreadCount > 0;
|
|
|
|
return (
|
|
<View
|
|
style={[
|
|
Style.containerSpaceBetween,
|
|
{ marginBottom: 20, ...containerStyle },
|
|
]}
|
|
>
|
|
<View style={Style.containerRow}>
|
|
<Text
|
|
numberOfLines={1}
|
|
style={{
|
|
...Fonts({
|
|
type: "mainTitle",
|
|
style: {
|
|
marginRight: 10,
|
|
maxWidth: isDesktop
|
|
? sidebarWidth - 4 * gutters
|
|
: responsiveWidth(70),
|
|
},
|
|
}),
|
|
}}
|
|
>
|
|
{title}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={{ ...Style.containerRow }}>
|
|
<Pressable onPress={() => navigate(Routes.Notifications)}>
|
|
{bell && (
|
|
<Image
|
|
resizeMode="contain"
|
|
source={icons.bell}
|
|
style={{
|
|
...Style.iconDefault,
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{hasUnread ? (
|
|
<View
|
|
style={{
|
|
...Style.itemBadge,
|
|
}}
|
|
/>
|
|
) : null}
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|