m

1 files changed, 64 insertions, 0 deletions

diff --git a/src/picker/LevelPicker.tsx b/src/picker/LevelPicker.tsx
new file mode 100644
index 0000000..037febf
--- /dev/null
+++ b/src/picker/LevelPicker.tsx
@@ -0,0 +1,64 @@
+//
+"use client";
+
+import React from "react";
+import {
+  TextSelect,
+  Combine,
+  WholeWord,
+  Highlighter,
+  Atom,
+  Mic2,
+  CheckCircle2,
+} from "lucide-react";
+
+// --- Granularity Definition ---
+export const GRANULARITY_LEVELS = [
+  { id: "text", name: "Text", icon: TextSelect },
+  { id: "paragraph", name: "Paragraph", icon: Combine },
+  { id: "sentence", name: "Sentence", icon: Highlighter },
+  { id: "clause", name: "Clause (Sentence Lvl)", icon: Highlighter },
+  { id: "word", name: "Word/Token", icon: WholeWord },
+  { id: "syllable", name: "Syllable (Word Lvl)", icon: Mic2 },
+  { id: "phoneme", name: "Phoneme (Word Lvl)", icon: Atom },
+] as const;
+export type GranularityId = (typeof GRANULARITY_LEVELS)[number]["id"];
+
+// --- Granularity Menu ---
+interface GranularityMenuProps {
+  selectedGranularity: GranularityId;
+  onSelectGranularity: (granularity: GranularityId) => void;
+}
+const GranularityMenu: React.FC<GranularityMenuProps> = ({
+  selectedGranularity,
+  onSelectGranularity,
+}) => (
+  <nav className="w-full bg-slate-800 text-slate-100 p-4 space-y-2 rounded-lg shadow-lg">
+    <h2 className="text-lg font-semibold text-sky-400 mb-4">
+      Granularity Level
+    </h2>
+    {GRANULARITY_LEVELS.map((level) => {
+      const Icon = level.icon;
+      const isSelected = selectedGranularity === level.id;
+      return (
+        <button
+          key={level.id}
+          onClick={() => onSelectGranularity(level.id)}
+          className={`w-full flex items-center space-x-3 p-3 rounded-md text-left transition-all duration-150 ease-in-out
+                      ${isSelected ? "bg-sky-500 text-white shadow-md scale-105" : "hover:bg-slate-700 hover:text-sky-300"}`}
+        >
+          <Icon
+            size={20}
+            className={`${isSelected ? "text-white" : "text-sky-400"}`}
+          />
+          <span>{level.name}</span>
+          {isSelected && (
+            <CheckCircle2 size={18} className="ml-auto text-white" />
+          )}
+        </button>
+      );
+    })}
+  </nav>
+);
+
+export default GranularityMenu;