library screen web

src/screens/Library/components/LikedMusic.js

@@ -7,19 +7,20 @@ import {
   useWindowDimensions,
 } from "react-native";
 import { img } from "../../../assets";
+import useLayoutType from "../../../hooks/useLayoutType";
 import { Routes } from "../../../navigation";
 import { navigate } from "../../../navigation/NavigationService";
 import { useUser } from "../../../providers/UserDataProvider";
 import CardContainer from "./CardContainer";
-
 const LikedMusic = () => {
   const { userLikedProjects = [] } = useUser();
   const items = Array.isArray(userLikedProjects)
     ? userLikedProjects.slice(0, 3)
     : [];
   const { width: screenWidth } = useWindowDimensions();
+  const { isWeb } = useLayoutType();
   const [containerWidth, setContainerWidth] = useState(screenWidth);
-  const numColumns = 3;
+  const numColumns = isWeb ? 2 : 3;
   const gap = 8;
   const itemWidth = Math.max(
     0,
@@ -42,7 +43,7 @@ const LikedMusic = () => {
         data={items}
         numColumns={numColumns}
         key={numColumns}
-        contentContainerStyle={{}}
+        contentContainerStyle={{ gap: gap }}
         columnWrapperStyle={numColumns > 1 ? { gap } : null}
         keyExtractor={(item) => item.id}
         renderItem={({ item }) => (