|
1
|
import { useState } from "react"; |
|
2
|
import { Button } from "@/components/ui/button"; |
|
3
|
|
|
4
|
export default function FloatingActionButton() { |
|
5
|
const [isExpanded, setIsExpanded] = useState(false); |
|
6
|
|
|
7
|
const quickActions = [ |
|
8
|
{ |
|
9
|
id: "emergency", |
|
10
|
label: "Emergency Shutdown", |
|
11
|
icon: "emergency", |
|
12
|
color: "text-danger-500", |
|
13
|
action: () => alert("Emergency shutdown guide: Hold power button for 10 seconds to force shutdown."), |
|
14
|
}, |
|
15
|
{ |
|
16
|
id: "tools", |
|
17
|
label: "Tool Checklist", |
|
18
|
icon: "construction", |
|
19
|
color: "text-primary-700", |
|
20
|
action: () => alert("Basic tool checklist: Phillips screwdriver, anti-static wrist strap, compressed air."), |
|
21
|
}, |
|
22
|
{ |
|
23
|
id: "safety", |
|
24
|
label: "Safety Guide", |
|
25
|
icon: "security", |
|
26
|
color: "text-warning-700", |
|
27
|
action: () => alert("Safety reminders: Power down device, ground yourself, work in clean environment."), |
|
28
|
}, |
|
29
|
{ |
|
30
|
id: "software", |
|
31
|
label: "Download Tools", |
|
32
|
icon: "download", |
|
33
|
color: "text-cyan-600", |
|
34
|
action: () => { |
|
35
|
const softwareSection = document.querySelector('[data-section="software-tools"]') || |
|
36
|
document.querySelector('section:last-of-type'); |
|
37
|
if (softwareSection) { |
|
38
|
softwareSection.scrollIntoView({ behavior: 'smooth' }); |
|
39
|
} |
|
40
|
}, |
|
41
|
}, |
|
42
|
]; |
|
43
|
|
|
44
|
const handleQuickAction = (action: () => void) => { |
|
45
|
action(); |
|
46
|
setIsExpanded(false); |
|
47
|
}; |
|
48
|
|
|
49
|
return ( |
|
50
|
<div className="fixed bottom-6 right-6 z-40 no-print"> |
|
51
|
<div className="relative"> |
|
52
|
{/* Quick access menu */} |
|
53
|
<div |
|
54
|
className={`absolute bottom-16 right-0 space-y-2 transition-all duration-200 ${ |
|
55
|
isExpanded ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none" |
|
56
|
}`} |
|
57
|
> |
|
58
|
{quickActions.map((item) => ( |
|
59
|
<Button |
|
60
|
key={item.id} |
|
61
|
onClick={() => handleQuickAction(item.action)} |
|
62
|
className="flex items-center space-x-3 bg-white shadow-material rounded-full px-4 py-3 hover:shadow-material-lg transition-shadow text-gray-700 hover:text-gray-900" |
|
63
|
variant="outline" |
|
64
|
> |
|
65
|
<i className={`material-icons ${item.color}`}>{item.icon}</i> |
|
66
|
<span className="text-sm font-medium whitespace-nowrap">{item.label}</span> |
|
67
|
</Button> |
|
68
|
))} |
|
69
|
</div> |
|
70
|
|
|
71
|
{/* Main FAB */} |
|
72
|
<Button |
|
73
|
onClick={() => setIsExpanded(!isExpanded)} |
|
74
|
className="w-14 h-14 bg-primary-700 text-white rounded-full shadow-material-lg hover:bg-primary-900 hover:shadow-xl transition-all duration-200 flex items-center justify-center" |
|
75
|
> |
|
76
|
<i className={`material-icons text-2xl transition-transform ${isExpanded ? "rotate-45" : ""}`}> |
|
77
|
{isExpanded ? "close" : "help"} |
|
78
|
</i> |
|
79
|
</Button> |
|
80
|
</div> |
|
81
|
</div> |
|
82
|
); |
|
83
|
} |