remake app ohome setup /notworking

src/components/Dropdown.js

@@ -0,0 +1,68 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Text, View } from 'react-native'
+
+const WrapperDropdown = styled(View)`
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    z-index:2;
+
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    background-color: ${({ theme }) => theme.colors.dp01 + 'cc'};
+    width: 200px;
+    max-height: 100px;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+`
+const DropdownItem = styled(Text)`
+    color: ${({ theme }) => theme.colors.textW2};
+    font-size: 20px;
+    &:hover{
+        background-color: #0001;
+    }
+`
+const HorizontalSeperator = styled(View)`
+    width: 100%;
+    height: 1px;
+    background-color: ${({ theme }) => theme.colors.dp02};
+`
+
+const Dropdown = (props) => {
+    let text = props.text
+    text = text.replace(/\W/g, '')
+    let regex = new RegExp(text, "i");
+
+    let newArray = props.array.filter((element) =>
+        regex.test(element)
+    )
+    if (newArray.length === 1 && newArray[0] === text) {
+        newArray = [];
+    }
+    let dropdownList = newArray.map((element, index) => {
+        return (
+            <View key={index}>
+                <DropdownItem onClick={() => props.setElement(element)}>{element}</DropdownItem>
+                <HorizontalSeperator />
+            </View>
+        )
+    })
+    return (
+        <WrapperDropdown>
+            {dropdownList}
+        </WrapperDropdown>
+    )
+}
+ 
+export const QtDropdown = (props) => {
+    const quantities = ["g", "kg", "mL", "L"]
+    return <Dropdown 
+                array={quantities} 
+                text={props.text} 
+                setElement={props.setElement} />
+}
+
+
+export default Dropdown