fix list selection and other tickets

src/screens/Writing/Rhymes.js

@@ -1,59 +1,31 @@
-import { View, Text, StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
 import React, { useState } from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
-import { BlurView } from "expo-blur";
-import { Palette, Style } from "../../styles";
+import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
+import ListSelection from "../../components/ListSelection/ListSelection";
 
 const Rhymes = ({ selected: selectedProp, setSelected: setSelectedProp }) => {
   const [internalSelected, setInternalSelected] = useState(null);
   const selected = selectedProp ?? internalSelected;
   const setSelected = setSelectedProp ?? setInternalSelected;
 
-  const onPressSelect = (item) => {
-    if (selected === item) {
-      setSelected(null);
-    } else {
-      setSelected(item);
-    }
-  };
+  // Selection handled by ListSelection
 
   return (
     <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
       <CreateLyricsHeader title="Avec ou sans rimes" />
       <ItemContainer height={200}>
-        <View style={{ gap: 10 }}>
-          {["Avec rimes", "Sans rimes", "Mélange des deux"].map(
-            (item, index) => {
-              const selectedItem = selected === item;
-
-              return (
-                <CreateLyricsHeader
-                  key={index}
-                  onPress={() => onPressSelect(item)}
-                  tint={selectedItem ? "default" : "dark"}
-                  colors={[Palette.tran, Palette.tran]}
-                  containerStyle={{
-                    ...styles.itemContainer,
-                    borderWidth: selectedItem ? 2 : 0,
-                    borderColor: selectedItem ? "#F94697" : "transparent",
-                  }}
-                >
-                  <View
-                    style={{
-                      height: 54,
-                      ...Style.containerCenter,
-                      paddingHorizontal: 14,
-                    }}
-                  >
-                    <Text style={styles.dropzone}>{item}</Text>
-                  </View>
-                </CreateLyricsHeader>
-              );
-            }
-          )}
-        </View>
+        <ListSelection
+          options={["Avec rimes", "Sans rimes", "Mélange des deux"]}
+          variant="simple"
+          selected={selected}
+          setSelected={setSelected}
+          contentContainerStyle={{ gap: 10 }}
+          itemContainerStyle={styles.itemContainer}
+          itemTextStyle={styles.dropzone}
+        />
       </ItemContainer>
     </View>
   );