Spaces:
Running
Running
File size: 2,033 Bytes
b162b24 173eaab b162b24 |
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 65 66 67 68 69 70 |
import classNames from "classnames";
import { useMemo, useRef, useState } from "react";
import { useClickAway, useUpdateEffect } from "react-use";
import { FiChevronDown } from "react-icons/fi";
import { LENGTHS } from "@/utils";
export const Length = ({
value,
onChange,
}: {
value: number;
onChange: (value: number) => void;
}) => {
const [open, setOpen] = useState(false);
const ref = useRef<HTMLDivElement>(null);
useClickAway(ref, () => {
setOpen(false);
});
const label = useMemo(() => {
return LENGTHS.find((length) => length.value === value)?.label;
}, [value]);
useUpdateEffect(() => {
setOpen(false);
}, [value]);
return (
<div ref={ref} className="max-w-max">
<p className="text-white font-semibold text-base mb-4">Duration</p>
<div className="relative z-1">
<p
className="text-transparent bg-gradient-to-r from-blue-500 to-pink-500 bg-clip-text text-5xl font-extrabold cursor-pointer relative"
onClick={() => setOpen(!open)}
>
{label}s
<FiChevronDown
className={classNames(
"inline-block text-white text-2xl ml-2 transition-all duration-200",
{
"transform rotate-180": open,
}
)}
/>
</p>
<ul
className={classNames(
"border-white/10 bg-black shadow-lg absolute top-14 p-3 left-0 w-full border border-gray-800 rounded-lg max-w-max z-20",
{
"opacity-0 pointer-events-none": !open,
}
)}
>
{LENGTHS.map((length) => (
<li
key={length.value}
className="text-white text-base hover:from-blue-500/40 hover:to-pink-500/40 bg-gradient-to-r transition-all duration-200 p-2 rounded-md cursor-pointer"
onClick={() => onChange(length.value)}
>
{length.label} seconds
</li>
))}
</ul>
</div>
</div>
);
};
|