@value variables: "../../style/variables.module.css";

@value buttonPrimaryTextColor from variables;

.dropdown {
  padding: 0.8rem 1.5rem;
}

.dropdownForward {
  padding: 0.6rem 1.5rem;
  min-height: 3.9rem;
  align-items: center;
}

.dropdownItems .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.dropdownItems .tag {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  border: 0.5px solid var(--secondary_border);
  box-sizing: border-box;
  padding: 0.2rem 2rem;
  font-weight: 400;
  line-height: normal;
  background: var(--icon_background);
  border-radius: 5px;
  color: var(--header_text);
  font-size: 1.4rem;
}

.dropdownItems .placeholder {
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdownItems .placeholder label {
  color: var(--primary_text_dark);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: normal;
}

.dropdownItems .placeholder i {
  color: #b6b6b6;
}

.dropdownItems .selection {
  display: flex;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  align-items: center;
  text-overflow: ellipsis;
}

.item {
  padding: 1rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.label {
  padding-left: 2rem;
}

.searchItem {
  padding: 2rem 2rem 1.2rem 2rem;
  width: inherit;
}

.searchIcon:hover {
  cursor: pointer;
  filter: brightness(80%);
}

.noSearchResultsItem {
  padding: 1rem 2rem 1rem 2rem;
  color: #ccc;
  text-align: center;
}

.selection > label {
  font-weight: 400;
  font-size: 1.8rem;
  line-height: normal;
  color: var(--header_text);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
the above code is a css code of DropdownItem
import { Placement } from "@popperjs/core"
import classNames from "classnames"
import {
  CSSProperties,
  Fragment,
  ReactNode,
  useEffect,
  useRef,
  useState,
} from "react"
import { Checkbox } from "../checkbox/checkbox.component"
import { InputContainer } from "../input-container/input-container.component"
import { Input } from "../input/input.component"
import { Menu, MenuItem } from "../menu"
import { Popup } from "../popup/popup.component"
import { PopupOptions, PopupPosition } from "../popup/popup.types"
import styles from "./dropdown.styles.module.css"

export function DropdownItems<T>({
  style,
  menuStyle,
  menuClassName,
  menuItemClassName,
  dropDownContent,
  popupStyle,
  mode = "primary",
  type = "dropdown",
  checkboxes = true,
  multiselect = false,
  placeholder,
  selectMaxDisplayed = 1,
  onSearch,
  items,
  itemRender,
  tagRender,
  elemRender,
  checked,
  onChange,
  searchNoResultsLabel,
  searchPlaceholder,
  onClose,
  checkBoxPosition = "left",
}: {
  style?: CSSProperties
  menuStyle?: CSSProperties
  menuClassName?: string
  menuItemClassName?: string
  dropDownContent?: string
  popupStyle?: CSSProperties
  mode?: "primary" | "secondary"
  type?: "dropdown" | "tags" | "forward"
  multiselect?: boolean
  checkboxes?: boolean
  items: T[]
  itemRender: (item: T, checked: boolean) => ReactNode
  tagRender?: (item: T, checked: boolean) => ReactNode
  elemRender?: (item: T, checked: boolean) => ReactNode
  checked: (item: T) => boolean
  onChange: (item: T, checked: boolean) => void
  onSearch?: (items: T[], keyword: string) => T[]
  onClose?: () => void
  placeholder: string
  selectMaxDisplayed?: number
  searchNoResultsLabel?: string
  searchPlaceholder?: string
  checkBoxPosition?: "left" | "right"
}) {
  // ---------------------------------------------------------------------------
  // variables
  // ---------------------------------------------------------------------------

  const ref = useRef<any>(null)
  const inputRef = useRef<HTMLInputElement | null>(null)
  const [popupOptions, setPopupOptions] = useState<PopupOptions>({
    placement: "bottom-start",
    offset: [0, 5],
  })
  const [searchKeyword, setSearchKeyword] = useState("")
  const selectedItems = items.filter((item) => checked(item))
  const visibleItems =
    onSearch && searchKeyword ? onSearch(items, searchKeyword) : items

  // ---------------------------------------------------------------------------
  // effects
  // ---------------------------------------------------------------------------

  useEffect(() => {
    setPopupOptions((options) => ({
      ...options,
      style: popupStyle,
    }))
  }, [popupStyle])

  // ---------------------------------------------------------------------------
  // functions
  // ---------------------------------------------------------------------------

  function openPopup(position: PopupPosition) {
    setPopupOptions((options) => ({
      ...options,
      position,
    }))
  }

  function closePopup() {
    setPopupOptions((options) => ({
      ...options,
      position: undefined,
    }))
    if (!onClose) return
    onClose()
  }

  function isPopupOpened() {
    return popupOptions.position !== undefined
  }

  // ---------------------------------------------------------------------------
  // memos
  // ---------------------------------------------------------------------------

  const ArrowIcon = (
    <i
      className={classNames({
        fal: true,
        "fa-chevron-right": !isPopupOpened(),
        "fa-chevron-down": isPopupOpened(),
      })}
      style={{ lineHeight: "normal" }}
    />
  )

  const DropdownContent = () => {
    if (dropDownContent) {
      return (
        <div className={styles.placeholder}>
          {dropDownContent}
          {ArrowIcon}
        </div>
      )
    } else if (type === "tags" && selectedItems.length && tagRender) {
      return (
        <div className={styles.tags}>
          {selectedItems.map((item, index) => (
            <div key={index} className={styles.tag}>
              {tagRender(item, checked(item))}
            </div>
          ))}
        </div>
      )
    } else {
      if (type === "forward" && selectedItems.length && elemRender) {
        return (
          <div className={styles.tags}>
            {selectedItems.map((item, index) => (
              <Fragment key={index}>{elemRender(item, checked(item))}</Fragment>
            ))}
          </div>
        )
      } else {
        if (selectedItems.length === 0) {
          return (
            <div className={styles.placeholder}>
              <label>{placeholder}</label>
              {type !== "forward" && ArrowIcon}
            </div>
          )
        } else if (selectedItems.length <= selectMaxDisplayed) {
          if (multiselect && selectedItems.length > 1) {
            return (
              <div className={styles.selection}>
                <label>
                  {selectedItems
                    .map((item) => itemRender(item, checked(item)))
                    .join(", ")}
                </label>
                {ArrowIcon}
              </div>
            )
          } else {
            return (
              <div className={styles.selection}>
                <label>
                  {selectedItems.map((item) => itemRender(item, checked(item)))}
                </label>
                {ArrowIcon}
              </div>
            )
          }
        } else if (selectedItems.length > selectMaxDisplayed) {
          return (
            <div className={styles.selection}>
              <label>{selectedItems.length} selected</label>
              {ArrowIcon}
            </div>
          )
        }
      }
    }
  }

  const DropdownMenu = (
    <Menu style={menuStyle} className={menuClassName}>
      {onSearch && (
        <>
          <MenuItem className={styles.searchItem} hover={false}>
            <div style={{ margin: "-1rem 0", width: "100%" }}>
              <Input
                inputRef={inputRef}
                style={{ width: "100%" }}
                mode="secondary"
                iconClassName={searchKeyword ? styles.searchIcon : ""}
                className={styles.searchInputContainer}
                placeholder={searchPlaceholder}
                value={searchKeyword}
                onChange={(e) => setSearchKeyword(e.target.value)}
                onIconClick={() => {
                  if (inputRef.current) {
                    inputRef.current.focus()
                  }
                  setSearchKeyword("")
                }}
                icon={searchKeyword ? "fa-light fa-xmark" : "fal fa-search"}
              />
            </div>
          </MenuItem>
          {/* <MenuSeparator /> */}
        </>
      )}

      {visibleItems.map((item, index) => (
        <MenuItem
          className={menuItemClassName}
          key={index}
          selected={checkboxes === false && checked(item)}
          onClick={() => {
            onChange(item, !checked(item))
            if (multiselect === false) {
              closePopup()
            }
          }}
        >
          {checkboxes && checkBoxPosition === "right" ? (
            <div
              style={{
                display: "flex",
                flexDirection: "row-reverse",
                justifyContent: "space-between",
                alignItems: "center",
                width: "100%",
                margin: "0.8rem 1.5rem",
              }}
            >
              <Checkbox
                style={{ marginLeft: "2rem" }}
                checked={checked(item)}
              />
              {itemRender(item, checked(item))}
            </div>
          ) : checkboxes && checkBoxPosition === "left" ? (
            <Checkbox className={styles.item} checked={checked(item)}>
              <span className={styles.label}>
                {itemRender(item, checked(item))}
              </span>
            </Checkbox>
          ) : (
            <></>
          )}
          {!checkboxes && (
            <div className={styles.item}>{itemRender(item, checked(item))}</div>
          )}
        </MenuItem>
      ))}
      {visibleItems.length === 0 && searchKeyword && (
        <MenuItem hover={false}>
          <div className={styles.noSearchResultsItem}>
            {searchNoResultsLabel || "No results"}
          </div>
        </MenuItem>
      )}
    </Menu>
  )

  // ---------------------------------------------------------------------------
  return (
    <>
      <Popup options={popupOptions} onOptionsChange={setPopupOptions}>
        {(!!visibleItems.length || onSearch) && DropdownMenu}
      </Popup>
      <div
        ref={ref}
        style={style}
        className={styles.dropdownItems}
        onClick={(e) => {
          if (isPopupOpened()) return
          e.preventDefault()
          openPopup(ref)
        }}
      >
        <InputContainer
          mode={mode}
          className={
            type === "forward" ? styles.dropdownForward : styles.dropdown
          }
          focused={isPopupOpened()}
        >
          {DropdownContent()}
        </InputContainer>
      </div>
    </>
  )
}

export function DropdownMenu<T>({
  style,
  popupStyle,
  items,
  itemRender,
  onClickItem,
  children,
  opened,
  className,
  onOpen,
  onClose,
  placement = "bottom-start",
  selectedIndex,
}: {
  style?: CSSProperties
  popupStyle?: CSSProperties
  items: T[]
  itemRender: (item: T) => ReactNode
  onClickItem: (item: T) => void
  children: ReactNode
  opened: boolean
  className?: string
  onOpen?: () => void
  onClose?: () => void
  placement?: Placement
  selectedIndex?: number
}) {
  // ---------------------------------------------------------------------------
  // variables
  // ---------------------------------------------------------------------------

  const ref = useRef<any>(null)
  const [popupOptions, setPopupOptions] = useState<PopupOptions>({
    placement: placement,
    offset: [0, 5],
  })

  // ---------------------------------------------------------------------------
  // effects
  // ---------------------------------------------------------------------------

  // useEffect(() => {
  //   console.log("keyWord  opened", opened, items)
  // }, [opened, items])

  useEffect(() => {
    setPopupOptions((options) => ({
      ...options,
      style: popupStyle,
    }))
  }, [popupStyle])

  useEffect(() => {
    if (opened) {
      if (isPopupOpened) return
      openPopup(ref)
    } else {
      closePopup()
    }
  }, [opened])

  // ---------------------------------------------------------------------------
  // functions
  // ---------------------------------------------------------------------------

  function openPopup(position: PopupPosition) {
    if (onOpen) onOpen()
    setPopupOptions((options) => ({
      ...options,
      position,
    }))
  }

  function closePopup() {
    if (onClose) onClose()

    setPopupOptions((options) => ({
      ...options,
      position: undefined,
    }))
  }

  const isPopupOpened = popupOptions.position !== undefined

  // ---------------------------------------------------------------------------
  // ui-components
  // ---------------------------------------------------------------------------

  const DropdownMenu = (
    <Menu className={className}>
      {items.map((item, index) => (
        <MenuItem
          key={index}
          selected={selectedIndex !== undefined && selectedIndex === index}
          onClick={() => {
            onClickItem(item)
            closePopup()
          }}
        >
          {itemRender(item)}
        </MenuItem>
      ))}
    </Menu>
  )

  // ---------------------------------------------------------------------------
  return (
    <>
      <Popup options={popupOptions} onOptionsChange={setPopupOptions}>
        {!!items.length && DropdownMenu}
      </Popup>
      <div
        ref={ref}
        style={style}
        className={classNames(styles.popup, styles.dropdownItems)}
      >
        {children}
      </div>
    </>
  )
}
this is code of dropdownItem component. I want you convert dropdown item component with css to react native. Please don't leave anything