refactor: cleanup
This commit is contained in:
parent
a0ea8c2646
commit
4a65994d35
2 changed files with 71 additions and 71 deletions
|
|
@ -25,7 +25,7 @@ export default function Carousel({ images, className }: Props) {
|
||||||
const scrollNext = useCallback(() => emblaApi && emblaApi.scrollNext(), [emblaApi]);
|
const scrollNext = useCallback(() => emblaApi && emblaApi.scrollNext(), [emblaApi]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative max-w-lg h-fit">
|
<div className="relative w-full h-fit">
|
||||||
<div className={`overflow-hidden rounded-xl bg-zinc-300 border-2 border-zinc-300 ${className}`} ref={emblaRef}>
|
<div className={`overflow-hidden rounded-xl bg-zinc-300 border-2 border-zinc-300 ${className}`} ref={emblaRef}>
|
||||||
<div className="flex">
|
<div className="flex">
|
||||||
{images.map((src, index) => (
|
{images.map((src, index) => (
|
||||||
|
|
|
||||||
|
|
@ -104,82 +104,82 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
|
||||||
requestRef.current = requestAnimationFrame(scanQRCode);
|
requestRef.current = requestAnimationFrame(scanQRCode);
|
||||||
}, [permissionGranted]);
|
}, [permissionGranted]);
|
||||||
|
|
||||||
if (isOpen)
|
if (!isOpen) return null;
|
||||||
return (
|
|
||||||
<div className="fixed inset-0 flex items-center justify-center z-40 backdrop-brightness-75 backdrop-blur-xs">
|
|
||||||
<div className="bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md">
|
|
||||||
<div className="flex justify-between items-center mb-2">
|
|
||||||
<h2 className="text-xl font-bold">Scan QR Code</h2>
|
|
||||||
<button onClick={() => setIsOpen(false)} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
|
|
||||||
<Icon icon="material-symbols:close-rounded" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{devices.length > 0 && (
|
return (
|
||||||
<div className="mb-4 flex flex-col gap-1">
|
<div className="fixed inset-0 flex items-center justify-center z-40 backdrop-brightness-75 backdrop-blur-xs">
|
||||||
<label className="text-sm font-semibold">Camera:</label>
|
<div className="bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md">
|
||||||
<div className="relative w-full">
|
<div className="flex justify-between items-center mb-2">
|
||||||
{/* Toggle button to open the dropdown */}
|
<h2 className="text-xl font-bold">Scan QR Code</h2>
|
||||||
<button type="button" {...getToggleButtonProps()} className="pill input w-full !px-2 !py-0.5 !justify-between text-sm">
|
<button onClick={() => setIsOpen(false)} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
|
||||||
{selectedItem?.label || "Select a camera"}
|
<Icon icon="material-symbols:close-rounded" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Icon icon="tabler:chevron-down" className="ml-2 size-5" />
|
{devices.length > 0 && (
|
||||||
</button>
|
<div className="mb-4 flex flex-col gap-1">
|
||||||
|
<label className="text-sm font-semibold">Camera:</label>
|
||||||
|
<div className="relative w-full">
|
||||||
|
{/* Toggle button to open the dropdown */}
|
||||||
|
<button type="button" {...getToggleButtonProps()} className="pill input w-full !px-2 !py-0.5 !justify-between text-sm">
|
||||||
|
{selectedItem?.label || "Select a camera"}
|
||||||
|
|
||||||
{/* Dropdown menu */}
|
<Icon icon="tabler:chevron-down" className="ml-2 size-5" />
|
||||||
<ul
|
</button>
|
||||||
{...getMenuProps()}
|
|
||||||
className={`absolute z-50 w-full bg-orange-200 border-2 border-orange-400 rounded-lg mt-1 shadow-lg max-h-60 overflow-y-auto ${
|
{/* Dropdown menu */}
|
||||||
isDropdownOpen ? "block" : "hidden"
|
<ul
|
||||||
}`}
|
{...getMenuProps()}
|
||||||
>
|
className={`absolute z-50 w-full bg-orange-200 border-2 border-orange-400 rounded-lg mt-1 shadow-lg max-h-60 overflow-y-auto ${
|
||||||
{isDropdownOpen &&
|
isDropdownOpen ? "block" : "hidden"
|
||||||
cameraItems.map((item, index) => (
|
}`}
|
||||||
<li
|
>
|
||||||
key={item.value}
|
{isDropdownOpen &&
|
||||||
{...getItemProps({ item, index })}
|
cameraItems.map((item, index) => (
|
||||||
className={`px-4 py-1 cursor-pointer text-sm ${highlightedIndex === index ? "bg-black/15" : ""}`}
|
<li
|
||||||
>
|
key={item.value}
|
||||||
{item.label}
|
{...getItemProps({ item, index })}
|
||||||
</li>
|
className={`px-4 py-1 cursor-pointer text-sm ${highlightedIndex === index ? "bg-black/15" : ""}`}
|
||||||
))}
|
>
|
||||||
</ul>
|
{item.label}
|
||||||
</div>
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="relative w-full aspect-square">
|
||||||
|
{!permissionGranted ? (
|
||||||
|
<div className="absolute inset-0 flex flex-col items-center justify-center rounded-2xl border-2 border-amber-500 text-center p-8">
|
||||||
|
<p className="text-red-400 font-bold text-lg mb-2">Camera access denied</p>
|
||||||
|
<p className="text-gray-600">Please allow camera access in your browser settings to scan QR codes</p>
|
||||||
|
<button type="button" onClick={requestPermission} className="pill button text-xs mt-2 !py-0.5 !px-2">
|
||||||
|
Request Permission
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Webcam
|
||||||
|
ref={webcamRef}
|
||||||
|
audio={false}
|
||||||
|
videoConstraints={{
|
||||||
|
deviceId: selectedDeviceId ? { exact: selectedDeviceId } : undefined,
|
||||||
|
}}
|
||||||
|
className="size-full object-cover rounded-2xl border-2 border-amber-500"
|
||||||
|
/>
|
||||||
|
<QrFinder />
|
||||||
|
<canvas ref={canvasRef} className="hidden" />
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="relative w-full aspect-square">
|
<div className="mt-4 flex justify-center">
|
||||||
{!permissionGranted ? (
|
<button type="button" onClick={() => setIsOpen(false)} className="pill button">
|
||||||
<div className="absolute inset-0 flex flex-col items-center justify-center rounded-2xl border-2 border-amber-500 text-center p-8">
|
Cancel
|
||||||
<p className="text-red-400 font-bold text-lg mb-2">Camera access denied</p>
|
</button>
|
||||||
<p className="text-gray-600">Please allow camera access in your browser settings to scan QR codes</p>
|
|
||||||
<button type="button" onClick={requestPermission} className="pill button text-xs mt-2 !py-0.5 !px-2">
|
|
||||||
Request Permission
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Webcam
|
|
||||||
ref={webcamRef}
|
|
||||||
audio={false}
|
|
||||||
videoConstraints={{
|
|
||||||
deviceId: selectedDeviceId ? { exact: selectedDeviceId } : undefined,
|
|
||||||
}}
|
|
||||||
className="size-full object-cover rounded-2xl border-2 border-amber-500"
|
|
||||||
/>
|
|
||||||
<QrFinder />
|
|
||||||
<canvas ref={canvasRef} className="hidden" />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-4 flex justify-center">
|
|
||||||
<button type="button" onClick={() => setIsOpen(false)} className="pill button">
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
else return null;
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue