1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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;
|
