Add a header and remove some styles

ryanseddon · Nov 28, 2024 · 4e62ce8 · 4e62ce8
1 parent b55cfcd
commit 4e62ce8
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 74 deletions.
diff --git a/index.html b/index.html
@@ -7,6 +7,34 @@
     <title>FFPrompt | Natural Language video editing tool</title>
   </head>
   <body>
+    <header
+      class="fixed top-0 z-50 w-full border-b border-border/40 bg-background/95 dark:border-border"
+    >
+      <div class="flex gap-1 px-4 h-14 items-center">
+        <img src="/logo.svg" width="22" />
+        <h1>FFprompt</h1>
+
+        <div class="ml-auto">
+          <a
+            href="https://github.com/ryanseddon/FFprompt"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex items-baseline gap-1"
+            >GitHub<svg
+              width="13.5"
+              height="13.5"
+              aria-hidden="true"
+              viewBox="0 0 24 24"
+              class="iconExternalLink_awgD"
+            >
+              <path
+                fill="currentColor"
+                d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+              ></path></svg
+          ></a>
+        </div>
+      </div>
+    </header>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -36,12 +36,8 @@ function App() {
 
   return (
     <>
-      <div className="flex flex-col h-screen">
+      <div className="flex flex-col h-screen pt-14">
         <CardHeader>
-          <CardTitle className="flex gap-1">
-            <img src="/logo.svg" width="22" />
-            FFPrompt
-          </CardTitle>
           <CardDescription>
             Attach a video file and describe what you want to do in the chat
             below.

diff --git a/src/index.css b/src/index.css
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,6 +1,5 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import "./index.css";
 import App from "./App.tsx";
 import { FFmpegProvider } from "./components/ffmpeg-provider";
 import { AIProvider } from "./components/ai-provider";