106 lines
3.5 KiB
TypeScript
106 lines
3.5 KiB
TypeScript
'use client'
|
|
|
|
import { GlassButton } from "@/components/glass-button"
|
|
import { useRouter } from "next/navigation"
|
|
import { LightbulbIcon, LightbulbOffIcon, User2Icon } from "lucide-react"
|
|
import { useState } from "react";
|
|
import { useMap } from "./map-context";
|
|
|
|
export default function Toolbar() {
|
|
const router = useRouter();
|
|
|
|
const { setOpacity, opacity } = useMap();
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6 items-center h-full">
|
|
<GlassButton className="p-2" onClick={
|
|
() => {
|
|
router.push('/me');
|
|
}
|
|
}>
|
|
<User2Icon className="w-3 h-3" />
|
|
</GlassButton>
|
|
|
|
<Opacity initOpacity={opacity.current} setOpacity={setOpacity} />
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Opacity({ initOpacity, setOpacity }: { initOpacity: number, setOpacity: (opacity: number) => void }) {
|
|
|
|
const [opacity, setIOpacity] = useState(initOpacity);
|
|
|
|
const handleOpacityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const newOpacity = parseFloat(e.target.value);
|
|
setOpacity(newOpacity);
|
|
setIOpacity(newOpacity);
|
|
};
|
|
|
|
return (
|
|
|
|
<div className="flex flex-col gap-2 items-center h-full w-full">
|
|
<LightbulbIcon className="w-3 h-3" onClick={() => {
|
|
setOpacity(100);
|
|
setIOpacity(100);
|
|
}} />
|
|
<div
|
|
className="relative bg-black/20 border border-white/10 backdrop-blur-xl rounded-xl shadow-2xl overflow-hidden w-full h-30"
|
|
>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
step="1"
|
|
value={opacity}
|
|
onChange={handleOpacityChange}
|
|
className="absolute inset-0 cursor-pointer"
|
|
style={{
|
|
width: '120px',
|
|
height: '100%',
|
|
left: '50%',
|
|
top: '50%',
|
|
transform: 'translate(-50%, -50%) rotate(270deg)',
|
|
transformOrigin: 'center',
|
|
background: 'transparent',
|
|
borderRadius: '12px',
|
|
WebkitAppearance: 'none',
|
|
MozAppearance: 'none',
|
|
appearance: 'none',
|
|
overflow: 'hidden',
|
|
transition: 'height 0.1s',
|
|
}}
|
|
/>
|
|
<style>
|
|
{
|
|
`
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: 0;
|
|
height: 0;
|
|
box-shadow: -200px 0 0 200px #ffffffdd;
|
|
}
|
|
|
|
input[type="range"]::-moz-range-thumb {
|
|
width: 0;
|
|
height: 0;
|
|
border-radius: 0;
|
|
border: none;
|
|
box-shadow: -200px 0 0 200px #ffffffdd;
|
|
}
|
|
`
|
|
}
|
|
|
|
</style>
|
|
|
|
</div>
|
|
<LightbulbOffIcon className="w-3 h-3" onClick={() => {
|
|
setOpacity(0);
|
|
setIOpacity(0);
|
|
}} />
|
|
</div>
|
|
|
|
|
|
|
|
)
|
|
} |