Start character display

src/app/components/CharacterDisplay.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+// import strings from "@/strings";
+
+export interface CharacterDisplayProps {
+  sourceFile: File | null;
+}
+
+export const CharacterDisplay: React.FC<CharacterDisplayProps> = ({
+  sourceFile,
+}) => {
+  return (
+    <div className="flex flex-col items-center justify-center">
+      {sourceFile === null && <p className="text-black dark:text-white">No file selected</p>}
+      {sourceFile !== null && (
+        <>
+          <img
+            src={URL.createObjectURL(sourceFile)}
+            alt={"Character Data"}
+            className="w-64 h-64 rounded-full"
+          />
+          <p className="text-black">{sourceFile.name}</p>
+        </>
+      )}
+    </div>
+  );
+};

src/app/page.tsx

@@ -1,9 +1,16 @@
 "use client";
 import Image from "next/image";
 import CombatTracker from "./components/CombatTracker";
+import {
+  CharacterDisplay,
+  CharacterDisplayProps,
+} from "./components/CharacterDisplay";
+import { useState } from "react";
+// import {
 
 export default function Home() {
   // TODO: add round tracker and eslapsed real time
+  const [characterFile, setCharacterFile] = useState<File | null>(null);
   return (
     <main className="flex min-h-screen flex-col items-left justify-between p-24">
       {/* <div
@@ -32,7 +39,13 @@ export default function Home() {
             />
           </a>
         </div> */}
-      <CombatTracker />
+
+      <div className="mai flex justify-start items-center gap-x-4">
+        <CombatTracker />
+        <div className="flex-grow">
+          <CharacterDisplay sourceFile={characterFile} />
+        </div>
+      </div>
       {/* </div> */}
 
       {/* <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">