From 4a65994d3549f9287d539b591e1a63dbf0f3ef29 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Tue, 8 Apr 2025 22:51:43 +0100
Subject: [PATCH] refactor: cleanup

---
 src/app/components/carousel.tsx          |   2 +-
 src/app/components/submit/qr-scanner.tsx | 140 +++++++++++------------
 2 files changed, 71 insertions(+), 71 deletions(-)

diff --git a/src/app/components/carousel.tsx b/src/app/components/carousel.tsx
index 73749cc..db49c9e 100644
--- a/src/app/components/carousel.tsx
+++ b/src/app/components/carousel.tsx
@@ -25,7 +25,7 @@ export default function Carousel({ images, className }: Props) {
 	const scrollNext = useCallback(() => emblaApi && emblaApi.scrollNext(), [emblaApi]);
 
 	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="flex">
 					{images.map((src, index) => (
diff --git a/src/app/components/submit/qr-scanner.tsx b/src/app/components/submit/qr-scanner.tsx
index 216fead..d401163 100644
--- a/src/app/components/submit/qr-scanner.tsx
+++ b/src/app/components/submit/qr-scanner.tsx
@@ -104,82 +104,82 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
 		requestRef.current = requestAnimationFrame(scanQRCode);
 	}, [permissionGranted]);
 
-	if (isOpen)
-		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>
+	if (!isOpen) return null;
 
-					{devices.length > 0 && (
-						<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"}
+	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>
 
-									<Icon icon="tabler:chevron-down" className="ml-2 size-5" />
-								</button>
+				{devices.length > 0 && (
+					<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 */}
-								<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 ? "block" : "hidden"
-									}`}
-								>
-									{isDropdownOpen &&
-										cameraItems.map((item, index) => (
-											<li
-												key={item.value}
-												{...getItemProps({ item, index })}
-												className={`px-4 py-1 cursor-pointer text-sm ${highlightedIndex === index ? "bg-black/15" : ""}`}
-											>
-												{item.label}
-											</li>
-										))}
-								</ul>
-							</div>
+								<Icon icon="tabler:chevron-down" className="ml-2 size-5" />
+							</button>
+
+							{/* Dropdown menu */}
+							<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 ? "block" : "hidden"
+								}`}
+							>
+								{isDropdownOpen &&
+									cameraItems.map((item, index) => (
+										<li
+											key={item.value}
+											{...getItemProps({ item, index })}
+											className={`px-4 py-1 cursor-pointer text-sm ${highlightedIndex === index ? "bg-black/15" : ""}`}
+										>
+											{item.label}
+										</li>
+									))}
+							</ul>
 						</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">
-						{!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="mt-4 flex justify-center">
-						<button type="button" onClick={() => setIsOpen(false)} className="pill button">
-							Cancel
-						</button>
-					</div>
+				<div className="mt-4 flex justify-center">
+					<button type="button" onClick={() => setIsOpen(false)} className="pill button">
+						Cancel
+					</button>
 				</div>
 			</div>
-		);
-	else return null;
+		</div>
+	);
 }