From 0fb3232864fa159263010a5fc5b8418a97ae0456 Mon Sep 17 00:00:00 2001
From: Elton Fernandes <cfthody@hotmail.com>
Date: Thu, 2 May 2024 07:40:01 +0100
Subject: [PATCH] Fix bug #5 - Show the preselect difficulty in dropdown -
 Remove unused prop

---
 src/Components/ListboxSelector/index.tsx | 5 ++---
 src/Components/ListboxSelector/types.ts  | 1 -
 src/Components/NoteDisplay/index.tsx     | 5 ++---
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/Components/ListboxSelector/index.tsx b/src/Components/ListboxSelector/index.tsx
index 8e83204..db7034c 100644
--- a/src/Components/ListboxSelector/index.tsx
+++ b/src/Components/ListboxSelector/index.tsx
@@ -1,13 +1,12 @@
 import { Listbox, Transition } from "@headlessui/react";
 import { Fragment } from "react";
+import IconCheckMark from "../Icons/IconCheckMark";
 import IconChevronUpDown from "../Icons/IconChevronUpDown";
 import { ListBoxProps } from "./types";
-import IconCheckMark from "../Icons/IconCheckMark";
 
 function ListboxSelector({
   value,
   onChange,
-  buttonTitle,
   options,
   className,
 }: ListBoxProps) {
@@ -15,7 +14,7 @@ function ListboxSelector({
     <Listbox value={value} onChange={onChange}>
       <div className={`relative mt-1 ${className}`}>
         <Listbox.Button className="relative capitalize w-full rounded-lg border-2 border-yellow-500 hover:border-yellow-600 cursor-pointer py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-yellow-700 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
-          <span className="block truncate text-white">{buttonTitle}</span>
+          <span className="block truncate text-white">{value}</span>
           <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
             <IconChevronUpDown
               className="h-5 w-5 text-gray-400"
diff --git a/src/Components/ListboxSelector/types.ts b/src/Components/ListboxSelector/types.ts
index ae3f4e3..e3ab847 100644
--- a/src/Components/ListboxSelector/types.ts
+++ b/src/Components/ListboxSelector/types.ts
@@ -3,7 +3,6 @@ import { EDifficulty } from "../../types";
 export interface ListBoxProps {
   value: string;
   onChange: (value: EDifficulty) => void;
-  buttonTitle: string;
   options: {
     label: string;
     value: string;
diff --git a/src/Components/NoteDisplay/index.tsx b/src/Components/NoteDisplay/index.tsx
index 9ae1cbc..3a440bc 100644
--- a/src/Components/NoteDisplay/index.tsx
+++ b/src/Components/NoteDisplay/index.tsx
@@ -5,10 +5,10 @@ import { useAudioProcessor } from "../../Hooks/useAudioProcessor";
 import NoteUtils, { notes } from "../../Utils/NoteUtils";
 
 import { EDifficulty, INote } from "../../types";
-import ListboxSelector from "../ListboxSelector";
-import { Props, difficultyOptions } from "./types";
 import Button from "../Button";
 import IconMusikNote from "../Icons/IconMusikNote";
+import ListboxSelector from "../ListboxSelector";
+import { Props, difficultyOptions } from "./types";
 
 const NoteDisplay = ({ isStarted, setIsStarted }: Props) => {
   const { playedNote, initAudio, stopAudio } = useAudioProcessor(notes);
@@ -103,7 +103,6 @@ const NoteDisplay = ({ isStarted, setIsStarted }: Props) => {
           <ListboxSelector
             className="w-72"
             onChange={(value) => setDifficulty(value)}
-            buttonTitle="Change Difficulty"
             value={difficulty}
             options={difficultyOptions}
           />