update

src/components/ItemContainer/ItemContainer.js

@@ -4,17 +4,24 @@ import BorderGradient from "../BorderGradient/BorderGradient";
 import { BlurView } from "expo-blur";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 
-const ItemContainer = ({ height = responsiveHeight(40), children }) => {
+const ItemContainer = ({
+  height = responsiveHeight(40),
+  children,
+  gradientProps,
+  style,
+}) => {
   return (
     <BorderGradient
       gradientProps={{
         colors: ["#FFFFFF00", "#FFFFFF"],
         start: { x: 0.3, y: 0 },
         end: { x: 1, y: 1 },
+        ...gradientProps,
       }}
       style={{
         ...styles.borderGradientStyle,
         height,
+        ...style,
       }}
     >
       <View style={styles.blurContainer}>

src/components/ItemContainer/ItemContainer.web.js

@@ -5,7 +5,12 @@ import { responsiveHeight } from "react-native-responsive-dimensions";
 import { BlurView } from "expo-blur";
 import { Style } from "../../styles";
 
-const ItemContainer = ({ height = responsiveHeight(40), children }) => {
+const ItemContainer = ({
+  height = responsiveHeight(40),
+  children,
+  gradientProps,
+  style,
+}) => {
   const [containerLayout, setContainerLayout] = useState(null);
 
   return (
@@ -20,10 +25,12 @@ const ItemContainer = ({ height = responsiveHeight(40), children }) => {
           start: { x: 0.3, y: 0 },
           end: { x: 1, y: 1 },
           locations: [0, 1],
+          ...gradientProps,
         }}
         style={{
           ...styles.borderGradientStyle,
           height: containerLayout?.height,
+          ...style,
         }}
       />
       <View

src/components/MusicLandHeader.js

@@ -13,7 +13,10 @@ const MusicLandHeader = ({
 }) => {
   return (
     <View style={{ alignItems: "center", gap: 16 }}>
-      <Image source={icons.musicLandLogo} />
+      <Image
+        source={icons.musicLandLogo}
+       
+      />
       <View style={{ width: "100%", ...Style.containerRow, gap: 16 }}>
         <Pressable
           style={{ width: 24, height: 24, ...Style.containerCenter }}

src/components/SearchBar.js

@@ -0,0 +1,37 @@
+import { View, Text, TextInput, Image } from "react-native";
+import React from "react";
+import { BlurView } from "expo-blur";
+import { icons } from "../assets";
+import Style, { size } from "../styles/Style";
+import { Palette } from "../styles";
+import { FONT_FAMILY } from "../styles/Fonts";
+
+const SearchBar = ({ placeholder = "Que souhaites-tu écouter?" }) => {
+  return (
+    <View style={{ borderRadius: 12, overflow: "hidden" }}>
+      <BlurView
+        intensity={10}
+        style={{
+          height: 40,
+          paddingHorizontal: 8,
+          gap: 10,
+          ...Style.containerRow,
+        }}
+      >
+        <Image source={icons.search} />
+        <TextInput
+          placeholder={placeholder}
+          placeholderTextColor={Palette.gray}
+          style={{
+            fontSize: 12,
+            color: Palette.white,
+            fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+            flex: 1,
+          }}
+        />
+      </BlurView>
+    </View>
+  );
+};
+
+export default SearchBar;