Thomas Demirdjian
96 lines
2.4 KiB
JavaScript
96 lines
2.4 KiB
JavaScript
import { View, Text, Pressable, StyleSheet, Platform } from "react-native";
|
|
import React from "react";
|
|
import SearchBar from "../../../components/SearchBar";
|
|
import { Palette, Style } from "../../../styles";
|
|
import BorderGradient from "../../../components/BorderGradient/BorderGradient";
|
|
import { BlurView } from "expo-blur";
|
|
import { FONT_FAMILY } from "../../../styles/Fonts";
|
|
|
|
const ResearchHeader = ({
|
|
onPress,
|
|
selected,
|
|
searchValue = "",
|
|
onChangeSearch = () => {},
|
|
showSearchBar = true,
|
|
autoFocusSearch = true,
|
|
}) => {
|
|
return (
|
|
<View style={{ gap: 12 }}>
|
|
{showSearchBar && (
|
|
<SearchBar
|
|
textInputProps={{
|
|
value: searchValue,
|
|
onChangeText: onChangeSearch,
|
|
autoFocus: autoFocusSearch,
|
|
}}
|
|
/>
|
|
)}
|
|
<View
|
|
style={{
|
|
...Style.containerRow,
|
|
gap: 6,
|
|
}}
|
|
>
|
|
{["Musiques", "Playback", "Profils"].map((item, index) => (
|
|
<Pressable key={index} onPress={() => onPress(item)}>
|
|
<BorderGradient
|
|
gradientProps={{
|
|
colors:
|
|
selected === item
|
|
? ["#F94697", "#7023F7"]
|
|
: [Palette.tran, Palette.tran],
|
|
locations: [0, 1],
|
|
start: { x: 0, y: 0 },
|
|
end: { x: 1, y: 0 },
|
|
}}
|
|
style={styles.borderGradient}
|
|
/>
|
|
<View style={styles.blurContainer}>
|
|
<BlurView
|
|
intensity={Platform.OS !== "ios" ? 10 : 20}
|
|
style={styles.blurView}
|
|
// experimentalBlurMethod={
|
|
// Platform.OS !== "ios" ? "dimezisBlurView" : "none"
|
|
// }
|
|
>
|
|
<Text style={styles.menu}>{item}</Text>
|
|
</BlurView>
|
|
</View>
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default ResearchHeader;
|
|
|
|
const styles = StyleSheet.create({
|
|
menu: {
|
|
fontSize: 12,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
},
|
|
borderGradient: {
|
|
borderWidth: 1,
|
|
borderRadius: 100,
|
|
height: 30,
|
|
position: "absolute",
|
|
zIndex: 1,
|
|
width: "100%",
|
|
},
|
|
blurContainer: {
|
|
height: 30,
|
|
zIndex: -1,
|
|
borderRadius: 100,
|
|
overflow: "hidden",
|
|
backgroundColor: Palette.glass,
|
|
},
|
|
blurView: {
|
|
width: "100%",
|
|
height: "100%",
|
|
justifyContent: "center",
|
|
paddingHorizontal: 10,
|
|
},
|
|
});
|