🍜💼 ↝ Working on the rover page, bit of organisation & files to be wor…

…ked out [ SGV2-7 ]

@/components/garden-dashboard.tsx

@@ -21,10 +21,10 @@ export function GardenDashboard() {
         <Button onClick={handleOpenGalaxy} className="mt-4 px-4 py-2 rounded">
             Visit a planet
         </Button>
-        <div className="mt-20 mb-4">
+        <div className="mt-10">
           {showGalaxy &&
             <>
-              <div className="mt-20">
+              <div className="mt-10">
                 <Garden onClose={() => setShowGalaxy(false)} />
               </div>
             </>

components/Modals/UponSignup.tsx

@@ -0,0 +1,70 @@
+/**
+ * v0 by Vercel.
+ * @see https://v0.dev/t/bOg9oEOPYfV
+ * Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
+ */
+import { Button } from "../ui/Button"
+
+export default function UponSignupModal() {
+  return (
+    <div className="relative w-full max-w-2xl p-4 rounded-lg border border-gray-100 shadow-lg md:p-8 dark:border-gray-800 bg-gray-200 mt-10">
+      <div className="absolute top-4 right-4">
+        <Button size="icon" variant="outline">
+          <XIcon className="w-4 h-4" />
+          <span className="sr-only">Close</span>
+        </Button>
+      </div>
+      <div className="space-y-4 text-center">
+        <div className="space-y-2">
+          <h1 className="text-2xl font-bold tracking-tighter sm:text-3xl md:text-4xl">Getting Started</h1>
+          <p className="text-sm tracking-wide leading-loose text-gray-500 md:text-base/relaxed lg:text-sm/relaxed xl:text-base/relaxed dark:text-gray-400">
+            Learn how to play the game
+          </p>
+        </div>
+        <div className="space-y-6">
+          <div className="space-y-4">
+            <h2 className="text-lg font-bold">Step 1: Visit a planet</h2>
+            <p className="text-sm tracking-wide leading-loose text-gray-500 md:text-base/relaxed lg:text-sm/relaxed xl:text-base/relaxed dark:text-gray-400">
+              There's 6 planets to choose from for your starter planet. Visit them all and pick one you like
+            </p>
+          </div>
+          <div className="space-y-4">
+            <h2 className="text-lg font-bold">Create a sector</h2>
+            <p className="text-sm tracking-wide leading-loose text-gray-500 md:text-base/relaxed lg:text-sm/relaxed xl:text-base/relaxed dark:text-gray-400">
+              Note (admin): This should be done when the user chooses their planet
+            </p>
+          </div>
+          <div className="space-y-4">
+            <h2 className="text-lg font-bold">Explore your sector</h2>
+            <p className="text-sm tracking-wide leading-loose text-gray-500 md:text-base/relaxed lg:text-sm/relaxed xl:text-base/relaxed dark:text-gray-400">
+              Send out some rovers & collect resources
+            </p>
+          </div>
+        </div>
+        <Button className="mx-auto" size="lg" variant="outline">
+          Close Guide
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+function XIcon(props) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
+};

components/Modals/rover-interface.tsx

@@ -0,0 +1,277 @@
+/**
+ * This code was generated by v0 by Vercel.
+ * @see https://v0.dev/t/Tc8IlVFBEh5
+ */
+import { Button } from "../ui/Button"
+import { Checkbox } from "../ui/checkbox"
+// import { ResponsiveLine } from "@nivo/line";
+import { Input } from "../ui/input"
+
+export function RoverInterface() {
+  return (
+    <div className="bg-white text-gray-900 p-4">
+      <div className="grid grid-cols-3 gap-4">
+        <div className="space-y-4">
+          <div className="p-4 bg-white rounded-md shadow-md">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-lg font-semibold">Map</h2>
+              <Button className="text-xs" variant="secondary">
+                Expand
+              </Button>
+            </div>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Checkbox id="position-a" />
+                <label className="flex-1 ml-2" htmlFor="position-a">
+                  Position A - 130m
+                </label>
+              </div>
+              <div className="flex items-center justify-between">
+                <Checkbox id="position-b" />
+                <label className="flex-1 ml-2" htmlFor="position-b">
+                  Position B - 75m
+                </label>
+              </div>
+              <img
+                alt="Map"
+                className="w-full h-auto"
+                height="100"
+                src="/placeholder.svg"
+                style={{
+                  aspectRatio: "200/100",
+                  objectFit: "cover",
+                }}
+                width="200"
+              />
+            </div>
+          </div>
+          <div className="p-4 bg-white rounded-md shadow-md">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-lg font-semibold">Test Results</h2>
+              <Button className="text-xs" variant="secondary">
+                Expand
+              </Button>
+            </div>
+            {/* <LineChart className="w-full h-[200px]" /> */}
+          </div>
+        </div>
+        <div className="space-y-4">
+          <div className="p-4 bg-white rounded-md shadow-md">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-lg font-semibold">Camera Feed</h2>
+              <Button className="text-xs" variant="secondary">
+                Expand
+              </Button>
+            </div>
+            <div className="space-y-2">
+              <img
+                alt="Dash Cam"
+                className="w-full h-auto"
+                height="100"
+                src="/placeholder.svg"
+                style={{
+                  aspectRatio: "200/100",
+                  objectFit: "cover",
+                }}
+                width="200"
+              />
+              <img
+                alt="Arm Cam"
+                className="w-full h-auto"
+                height="100"
+                src="/placeholder.svg"
+                style={{
+                  aspectRatio: "200/100",
+                  objectFit: "cover",
+                }}
+                width="200"
+              />
+              <img
+                alt="Corner Cam"
+                className="w-full h-auto"
+                height="100"
+                src="/placeholder.svg"
+                style={{
+                  aspectRatio: "200/100",
+                  objectFit: "cover",
+                }}
+                width="200"
+              />
+            </div>
+          </div>
+          <div className="p-4 bg-white rounded-md shadow-md">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-lg font-semibold">Power Control</h2>
+              <Button className="text-xs" variant="secondary">
+                Expand
+              </Button>
+            </div>
+            <div className="space-y-2">
+              <div className="flex justify-between items-center">
+                <span>Front Arm</span>
+                {/* <Progress className="w-[60%]" value={0} /> */}
+              </div>
+              <div className="flex justify-between items-center">
+                <span>Back Camera</span>
+                {/* <Progress className="w-[60%]" value={36} /> */}
+              </div>
+              <div className="flex justify-between items-center">
+                <span>Sensor (Main)</span>
+                {/* <Progress className="w-[60%]" value={24} /> */}
+              </div>
+              <div className="flex justify-center items-center mt-4">
+                <BatteryIcon className="text-4xl" />
+                <span className="ml-2 text-2xl">34/100</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="space-y-4">
+          <div className="p-4 bg-white rounded-md shadow-md">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-lg font-semibold">Command Log</h2>
+              <Button className="text-xs" variant="secondary">
+                Expand
+              </Button>
+            </div>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Checkbox id="cmd1" />
+                <label className="flex-1 ml-2" htmlFor="cmd1">
+                  Rotate Camera 39° - Sent 15:35
+                </label>
+              </div>
+              <div className="flex items-center justify-between">
+                <Checkbox id="cmd2" />
+                <label className="flex-1 ml-2" htmlFor="cmd2">
+                  Rotate Side Camera 56° - Sent 15:24
+                </label>
+              </div>
+              <div className="flex items-center justify-between">
+                <Checkbox id="cmd3" />
+                <label className="flex-1 ml-2" htmlFor="cmd3">
+                  Movement Control Initiated - Sent 15:23
+                </label>
+              </div>
+              <Button className="mt-4" variant="destructive">
+                Clear Log
+              </Button>
+            </div>
+          </div>
+          <div className="p-4 bg-white rounded-md shadow-md">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-lg font-semibold">Command</h2>
+              <Button className="text-xs" variant="secondary">
+                Expand
+              </Button>
+            </div>
+            <Input className="mb-4" placeholder="/Enter Manual Command" type="text" />
+            <div className="grid grid-cols-2 gap-4">
+              <Button variant="outline">FD: Forward</Button>
+              <Button variant="outline">BK: Backward</Button>
+              <Button variant="outline">LT: Left</Button>
+              <Button variant="outline">RT: Right</Button>
+            </div>
+            <Input className="mt-4" placeholder="Distance/Angle" type="text" />
+            <Input className="mt-4" placeholder="Speed" type="text" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+
+// function LineChart(props) {
+//   return (
+//     <div {...props}>
+//       <ResponsiveLine
+//         data={[
+//           {
+//             id: "Desktop",
+//             data: [
+//               { x: "Jan", y: 43 },
+//               { x: "Feb", y: 137 },
+//               { x: "Mar", y: 61 },
+//               { x: "Apr", y: 145 },
+//               { x: "May", y: 26 },
+//               { x: "Jun", y: 154 },
+//             ],
+//           },
+//           {
+//             id: "Mobile",
+//             data: [
+//               { x: "Jan", y: 60 },
+//               { x: "Feb", y: 48 },
+//               { x: "Mar", y: 177 },
+//               { x: "Apr", y: 78 },
+//               { x: "May", y: 96 },
+//               { x: "Jun", y: 204 },
+//             ],
+//           },
+//         ]}
+//         margin={{ top: 10, right: 10, bottom: 40, left: 40 }}
+//         xScale={{
+//           type: "point",
+//         }}
+//         yScale={{
+//           type: "linear",
+//         }}
+//         axisTop={null}
+//         axisRight={null}
+//         axisBottom={{
+//           tickSize: 0,
+//           tickPadding: 16,
+//         }}
+//         axisLeft={{
+//           tickSize: 0,
+//           tickValues: 5,
+//           tickPadding: 16,
+//         }}
+//         colors={["#2563eb", "#e11d48"]}
+//         pointSize={6}
+//         useMesh={true}
+//         gridYValues={6}
+//         theme={{
+//           tooltip: {
+//             chip: {
+//               borderRadius: "9999px",
+//             },
+//             container: {
+//               fontSize: "12px",
+//               textTransform: "capitalize",
+//               borderRadius: "6px",
+//             },
+//           },
+//           grid: {
+//             line: {
+//               stroke: "#f3f4f6",
+//             },
+//           },
+//         }}
+//         role="application"
+//       />
+//     </div>
+//   )
+// }
+
+
+function BatteryIcon(props) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <rect width="16" height="10" x="2" y="7" rx="2" ry="2" />
+      <line x1="22" x2="22" y1="11" y2="13" />
+    </svg>
+  )
+}