update

2025-08-13 21:03:58 +08:00
parent 7d8942e125
commit 41636b5dbc
31 changed files with 907 additions and 91 deletions
@@ -0,0 +1,74 @@
+import { View, Text, Pressable, StyleSheet } 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 }) => {
+  return (
+    <View style={{ gap: 12 }}>
+      <SearchBar />
+      <View
+        style={{
+          ...Style.containerRow,
+          gap: 6,
+        }}
+      >
+        {["Playbacks", "Clips", "Musiques", "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={20} style={styles.blurView}>
+                <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,
+  },
+});