diff --git a/package.json b/package.json index b1c2290..d955fc9 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@headlessui/react": "^1.7.16", "@tanstack/react-virtual": "^3.0.0-beta.48", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", diff --git a/src/App.js b/src/App.js index 53c9651..da81ac5 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,7 @@ import React, { } from "react"; import "rc-slider/assets/index.css"; import "./App.css"; +import { Dialog } from "@headlessui/react"; import ClipLoader from "react-spinners/ClipLoader"; import { genbankToJson } from "bio-parsers"; @@ -17,6 +18,8 @@ import { DebounceInput } from "react-debounce-input"; import { useWindowVirtualizer } from "@tanstack/react-virtual"; import Slider, { Range } from "rc-slider"; import { AiOutlineZoomIn, AiOutlineZoomOut } from "react-icons/ai"; +// settings icon +import { MdSettings } from "react-icons/md"; import { GiDna1 } from "react-icons/gi"; import {BsArrowRightCircleFill, BsArrowLeftCircleFill} from "react-icons/bs"; import { ToastContainer, toast } from "react-toastify"; @@ -156,10 +159,13 @@ function SearchPanel({ ); } -const ConfigPanel = ({ zoomLevel, setZoomLevel }) => { +const ConfigPanel = ({ zoomLevel, setZoomLevel, configModalOpen, setConfigModalOpen }) => { // zoom slider return ( <> +