From 2297a243546e8037f64a2ed577cbb6a1b37ad34b Mon Sep 17 00:00:00 2001
From: BANANAPEEL202 <bbob52645@gmail.com>
Date: Fri, 4 Oct 2024 22:31:57 -0400
Subject: [PATCH] did stuff

---
 package-lock.json              | 25 +++++++++
 package.json                   |  1 +
 src/App.tsx                    |  4 +-
 src/components/PreviewCard.tsx | 96 ++++++++++++++++++++++++++++++++++
 src/css/PreviewCard.css        | 23 ++++++++
 5 files changed, 147 insertions(+), 2 deletions(-)
 create mode 100644 src/components/PreviewCard.tsx
 create mode 100644 src/css/PreviewCard.css

diff --git a/package-lock.json b/package-lock.json
index 1a56085..b1b13ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@mantine/dates": "^7.13.1",
         "@mantine/form": "^7.13.1",
         "@mantine/hooks": "^7.13.1",
+        "@tabler/icons-react": "^3.19.0",
         "dayjs": "^1.11.13",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -2469,6 +2470,30 @@
         "@swc/counter": "^0.1.3"
       }
     },
+    "node_modules/@tabler/icons": {
+      "version": "3.19.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.19.0.tgz",
+      "integrity": "sha512-A4WEWqpdbTfnpFEtwXqwAe9qf9sp1yRPvzppqAuwcoF0q5YInqB+JkJtSFToCyBpPVeLxJUxxkapLvt2qQgnag==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "3.19.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.19.0.tgz",
+      "integrity": "sha512-AqEWGI0tQWgqo6ZjMO5yJ9sYT8oXLuAM/up0hN9iENS6IdtNZryKrkNSiMgpwweNTpl8wFFG/dAZ959S91A/uQ==",
+      "dependencies": {
+        "@tabler/icons": "3.19.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
diff --git a/package.json b/package.json
index 51d0a7e..3f4e8f1 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@mantine/dates": "^7.13.1",
     "@mantine/form": "^7.13.1",
     "@mantine/hooks": "^7.13.1",
+    "@tabler/icons-react": "^3.19.0",
     "dayjs": "^1.11.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/src/App.tsx b/src/App.tsx
index e2cdc9b..fbc0092 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,12 @@
 import "@mantine/core/styles.css";
 import { MantineProvider } from "@mantine/core";
 import { theme } from "@/theme";
-import SearchBar from "./components/SearchBar";
+import PreviewCard from "./components/PreviewCard";
 
 export default function App() {
   return (
     <MantineProvider theme={theme}>
-      <SearchBar />
+      <PreviewCard />
     </MantineProvider>
   );
 }
diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx
new file mode 100644
index 0000000..dc1f82d
--- /dev/null
+++ b/src/components/PreviewCard.tsx
@@ -0,0 +1,96 @@
+import React from "react";
+import { Text, Button, Grid } from "@mantine/core";
+import { IconDownload } from "@tabler/icons-react";
+import "@/css/PreviewCard.css";
+
+function PreviewCard() {
+  return (
+    <div className="preview-container">
+      <Grid>
+        <Grid.Col span={4} className="image-column">
+          <img
+            src="https://camo.githubusercontent.com/25de56138803873d9ea83567c55b9a022ad86d0acb53bb7c733bb038583e2279/68747470733a2f2f6d69726f2e6d656469756d2e636f6d2f76322f726573697a653a6669743a3430302f312a7241676c6b664c4c316676384a6363697a4a33572d512e706e67"
+            alt="Preview"
+            className="preview-image"
+          />
+        </Grid.Col>
+        <Grid.Col span={4} className="image-column">
+          <img
+            src="https://camo.githubusercontent.com/25de56138803873d9ea83567c55b9a022ad86d0acb53bb7c733bb038583e2279/68747470733a2f2f6d69726f2e6d656469756d2e636f6d2f76322f726573697a653a6669743a3430302f312a7241676c6b664c4c316676384a6363697a4a33572d512e706e67"
+            alt="Preview"
+            className="preview-image"
+          />
+        </Grid.Col>
+        <Grid.Col span={4} style={{ position: "relative", padding: "10px" }}>
+          <Text size="md" fw={700}>
+            run 2024-18-10.mcap
+          </Text>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <Text size="xs" fw={700}>
+              Date:{" "}
+            </Text>
+            <span style={{ marginLeft: "5px" }} /> {/* Spacer */}
+            <Text size="xs" fw={400}>
+              Fri, Oct 18, 2024
+            </Text>
+          </div>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <Text size="xs" fw={700}>
+              Time:{" "}
+            </Text>
+            <span style={{ marginLeft: "5px" }} /> {/* Spacer */}
+            <Text size="xs" fw={400}>
+              12:24:02 PM
+            </Text>
+          </div>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <Text size="xs" fw={700}>
+              Location:{" "}
+            </Text>
+            <span style={{ marginLeft: "5px" }} /> {/* Spacer */}
+            <Text size="xs" fw={400}>
+              MRDC
+            </Text>
+          </div>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <Text size="xs" fw={700}>
+              Sensors:{" "}
+            </Text>
+            <span style={{ marginLeft: "5px" }} /> {/* Spacer */}
+            <Text size="xs" fw={400}>
+              aero_sensor_1
+            </Text>
+          </div>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              position: "absolute",
+              bottom: 0,
+              right: 0,
+              padding: 20,
+              gap: "10px",
+            }}
+          >
+            <Button
+              variant="filled"
+              size="xs"
+              rightSection={<IconDownload size={20} />}
+            >
+              MAT
+            </Button>
+            <Button
+              variant="filled"
+              size="xs"
+              rightSection={<IconDownload size={20} />}
+            >
+              MCAP
+            </Button>
+          </div>
+        </Grid.Col>
+      </Grid>
+    </div>
+  );
+}
+
+export default PreviewCard;
diff --git a/src/css/PreviewCard.css b/src/css/PreviewCard.css
new file mode 100644
index 0000000..0c54e9c
--- /dev/null
+++ b/src/css/PreviewCard.css
@@ -0,0 +1,23 @@
+.preview-container {
+    width: 75%;
+    height: 30%;
+    justify-content: center;
+    margin: 20px;
+    background-color: lightgrey;
+  }
+  
+.image-column {
+    display: flex;
+    justify-content: center; /* Centers horizontally */
+    align-items: center; /* Centers vertically */
+    height: 100%; /* Ensures the column takes the full height */
+    width: 100%; /* Ensures the column takes the full width */
+}
+
+.preview-image {
+    display: flex;
+    max-width: 70%; /* Ensures the image scales with the column width */
+    max-height: 70%; /* Ensures the image does not exceed the column height */
+    height: auto; /* Maintains aspect ratio */
+    margin: 20px;
+}