chore: revert quotes in camermap

web/src/routes/CameraMap.jsx

@@ -20,7 +20,10 @@ export default function CameraMasks({ camera, url }) {
     zones,
   } = cameraConfig;
 
-  const { width, height } = cameraConfig.detect;
+  const {
+    width,
+    height
+  } = cameraConfig.detect;
 
   const [{ width: scaledWidth }] = useResizeObserver(imageRef);
   const imageScale = scaledWidth / width;
@@ -196,8 +199,8 @@ ${Object.keys(objectMaskPoints)
   );
 
   return (
-    <div className='flex-col space-y-4 p-2 px-4'>
+    <div className="flex-col space-y-4 p-2 px-4">
-      <Heading size='2xl'>{camera} mask & zone creator</Heading>
+      <Heading size="2xl">{camera} mask & zone creator</Heading>
 
       <Card
         content={
@@ -207,11 +210,11 @@ ${Object.keys(objectMaskPoints)
             save your changes.
           </p>
         }
-        header='Warning'
+        header="Warning"
       />
 
-      <div className='space-y-4'>
+      <div className="space-y-4">
-        <div className='relative'>
+        <div className="relative">
           <img ref={imageRef} src={`${apiHost}/api/${camera}/latest.jpg`} />
           <EditableMask
             onChange={handleUpdateEditable}
@@ -222,12 +225,12 @@ ${Object.keys(objectMaskPoints)
             height={height}
           />
         </div>
-        <div className='max-w-xs'>
+        <div className="max-w-xs">
-          <Switch checked={snap} label='Snap to edges' labelPosition='after' onChange={handleChangeSnap} />
+          <Switch checked={snap} label="Snap to edges" labelPosition="after" onChange={handleChangeSnap} />
         </div>
       </div>
 
-      <div className='flex-col space-y-4'>
+      <div className="flex-col space-y-4">
         <MaskValues
           editing={editing}
           title='Motion masks'
@@ -242,20 +245,20 @@ ${Object.keys(objectMaskPoints)
 
         <MaskValues
           editing={editing}
-          title='Zones'
+          title="Zones"
           onCopy={handleCopyZones}
           onCreate={handleAddZone}
           onEdit={handleEditZone}
           onRemove={handleRemoveZone}
           points={zonePoints}
-          yamlPrefix='zones:'
+          yamlPrefix="zones:"
           yamlKeyPrefix={zoneYamlKeyPrefix}
         />
 
         <MaskValues
           isMulti
           editing={editing}
-          title='Object masks'
+          title="Object masks"
           onAdd={handleAddToObjectMask}
           onCopy={handleCopyObjectMasks}
           onCreate={handleAddObjectMask}
@@ -354,7 +357,7 @@ function EditableMask({ onChange, points, scale, snap, width, height }) {
 
   return (
     <div
-      className='absolute'
+      className="absolute"
       style={`top: -${MaskInset}px; right: -${MaskInset}px; bottom: -${MaskInset}px; left: -${MaskInset}px`}
     >
       {!scaledPoints
@@ -369,16 +372,16 @@ function EditableMask({ onChange, points, scale, snap, width, height }) {
             y={y + MaskInset}
           />
         ))}
-      <div className='absolute inset-0 right-0 bottom-0' onClick={handleAddPoint} ref={boundingRef} />
+      <div className="absolute inset-0 right-0 bottom-0" onClick={handleAddPoint} ref={boundingRef} />
       <svg
-        width='100%'
+        width="100%"
-        height='100%'
+        height="100%"
-        className='absolute pointer-events-none'
+        className="absolute pointer-events-none"
         style={`top: ${MaskInset}px; right: ${MaskInset}px; bottom: ${MaskInset}px; left: ${MaskInset}px`}
       >
         {!scaledPoints ? null : (
           <g>
-            <polyline points={polylinePointsToPolyline(scaledPoints)} fill='rgba(244,0,0,0.5)' />
+            <polyline points={polylinePointsToPolyline(scaledPoints)} fill="rgba(244,0,0,0.5)" />
           </g>
         )}
       </svg>
@@ -441,15 +444,15 @@ function MaskValues({
   );
 
   return (
-    <div className='overflow-hidden' onMouseOver={handleMousein} onMouseOut={handleMouseout}>
+    <div className="overflow-hidden" onMouseOver={handleMousein} onMouseOut={handleMouseout}>
-      <div className='flex space-x-4'>
+      <div className="flex space-x-4">
-        <Heading className='flex-grow self-center' size='base'>
+        <Heading className="flex-grow self-center" size="base">
           {title}
         </Heading>
         <Button onClick={onCopy}>Copy</Button>
         <Button onClick={onCreate}>Add</Button>
       </div>
-      <pre className='relative overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2'>
+      <pre className="relative overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2">
         {yamlPrefix}
         {Object.keys(points).map((mainkey) => {
           if (isMulti) {
@@ -457,7 +460,7 @@ function MaskValues({
               <div>
                 {`    ${mainkey}:\n      mask:\n`}
                 {onAdd && showButtons ? (
-                  <Button className='absolute -mt-12 right-0 font-sans' data-key={mainkey} onClick={handleAdd}>
+                  <Button className="absolute -mt-12 right-0 font-sans" data-key={mainkey} onClick={handleAdd}>
                     {`Add to ${mainkey}`}
                   </Button>
                 ) : null}
@@ -503,13 +506,13 @@ function Item({ mainkey, subkey, editing, handleEdit, points, showButtons, handl
         editing.key === mainkey && editing.subkey === subkey ? 'text-blue-800 dark:text-blue-600' : ''
       }`}
       onClick={handleEdit}
-      title='Click to edit'
+      title="Click to edit"
     >
       {`${yamlKeyPrefix(points, mainkey, subkey)}${polylinePointsToPolyline(points)}`}
       {showButtons ? (
         <Button
-          className='absolute top-0 right-0'
+          className="absolute top-0 right-0"
-          color='red'
+          color="red"
           data-key={mainkey}
           data-subkey={subkey}
           onClick={handleRemove}