Byte & Logs sections

src/App.tsx

@@ -7,7 +7,7 @@ function App() {
   const [currentSave, setCurrentSave] = useState<string | null>(null);
 
   return (
-    <main class="h-[100vh] w-[100vw] bg-zinc-800 px-4 py-2 flex flex-col">
+    <main class="h-[100vh] w-[100vw] bg-zinc-800 px-3 py-2 flex flex-col">
       {currentSave === null ? (
         <SaveSelector
           onFile={(path) => {

src/components/Bytes.tsx

@@ -0,0 +1,46 @@
+import { cn } from "../utils";
+
+interface BytesProps {
+  className?: string;
+}
+
+export default function Bytes({ className }: BytesProps) {
+  const bytes = new Array(16 * 16).fill(0).map(() =>
+    Math.floor(Math.random() * 256)
+      .toString(16)
+      .padStart(2, "0")
+  );
+
+  return (
+    <div
+      className={cn(
+        "bg-black/40 pt-1.5 pb-2.5 rounded overflow-hidden",
+        className
+      )}
+    >
+      <p className="text-xs font-medium mx-2.5">Bytes</p>
+      <p className="text-xs mx-3 pt-0.5 text-zinc-400">
+        You can change the offset of the bytes modified in this menu if it
+        doesn't work initially.
+      </p>
+      <div
+        className={cn(
+          "pt-2 grid grid-cols-16 font-mono mx-5 gap-1 text-center text-xs h-full overflow-y-scroll",
+          className
+        )}
+      >
+        {bytes.map((byte, index) => (
+          <div
+            key={index}
+            className={cn("hover:bg-black/45", {
+              "text-zinc-500":
+                Math.random() < 0.9 || index < 50 || index > 16 * 10,
+            })}
+          >
+            {byte}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/Logs.tsx

@@ -0,0 +1,46 @@
+import { cn } from "../utils";
+
+export default function Logs() {
+  const data = [
+    {
+      type: "info",
+      message: "Starting patcher...",
+    },
+    {
+      type: "warning",
+      message: "Checking for updates...",
+    },
+    {
+      type: "info",
+      message: "No updates found.",
+    },
+    {
+      type: "error",
+      message: "Patching...",
+    },
+    {
+      type: "info",
+      message: "Patching complete.",
+    },
+  ];
+
+  return (
+    <div className="bg-black/40 py-2.5 rounded">
+      <p className="text-xs font-medium mx-2.5">Logs</p>
+      <div className="flex flex-col space-y-1 mt-1 text-zinc-400">
+        {data.map((log) => {
+          return (
+            <p
+              className={cn("text-xs w-full px-2.5 hover:bg-black/45", {
+                "text-emerald-400/90": log.type === "warning",
+                "text-rose-400/90": log.type === "error",
+              })}
+            >
+              {log.message}
+            </p>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/views/Patcher.tsx

@@ -1,4 +1,6 @@
 import { useEffect, useState } from "preact/hooks";
+import Logs from "../components/Logs";
+import Bytes from "../components/Bytes";
 
 interface PatcherProps {
   className?: string;
@@ -33,18 +35,21 @@ export default function Patcher({ onComplete, path }: PatcherProps) {
   }, []);
 
   return (
-    <div className="max-w-[600px] flex flex-col">
-      <div className="rounded-xl bg-black/40 px-3.5 py-2 shadow-lg mb-2.5">
-        <p className="text-sm text-zinc-300 select-none">{filename}</p>
-        <p className="flex justify-end  overflow-hidden text-xs text-zinc-400">
-          {path}
-        </p>
+    <div className="flex flex-col justify-between h-full pb-2">
+      <div className="space-y-3">
+        <div className="rounded-lg bg-black/40 px-3.5 py-2 shadow-lg mb-2.5">
+          <p className="text-sm text-zinc-300 select-none">{filename}</p>
+          <p className="flex justify-end overflow-hidden text-xs text-zinc-400">
+            {path}
+          </p>
+        </div>
+        <Logs />
+        <Bytes className="max-h-[300px]" />
       </div>
-
       <button
         type="button"
         style={{ textShadow: "2px 2px 10px rgba(0,0,0,0.42)" }}
-        class="text-white bg-emerald-500 font-medium rounded-lg text-sm px-5 py-2.5 text-center drop-shadow-"
+        class="text-white bg-emerald-500 font-medium rounded-lg text-sm py-2.5 text-center drop-shadow-"
       >
         Patch
       </button>

tailwind.config.js

@@ -2,7 +2,11 @@
 export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      gridTemplateColumns: {
+        16: "repeat(16, minmax(0, 1fr))",
+      },
+    },
   },
   plugins: [],
 };