ui/components: add PreviewBanner with commit hash for coolify

Update PreviewBanner.astro with design tokens from styles/global.css:

Co-authored-by: redsh4de <25299353+redsh4de@users.noreply.github.com>

Author: plowsof

src/components/ui/PreviewBanner.astro

@@ -0,0 +1,35 @@
+---
+const isCoolifyPreview = import.meta.env.COOLIFY_PREVIEW;
+const sourceCommit = import.meta.env.SOURCE_COMMIT;
+const coolifyBranch = import.meta.env.COOLIFY_BRANCH; // "pull/2639/head:pr-2639-coolify",
+const coolifyRepo = import.meta.env.COOLIFY_REPO;
+if (!isCoolifyPreview) return;
+const coolifyPrNum = coolifyBranch.split("/")[1];
+---
+
+<div class="preview-banner">
+  <span class="preview-banner-style">
+    <a href={`${coolifyRepo}/pull/${coolifyPrNum}/changes/${sourceCommit}`}
+      >{sourceCommit.slice(0, 7)}</a
+    > Preview powered by <a href="https://coolify.io/">Coolify</a>
+  </span>
+</div>
+
+<style>
+  .preview-banner {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    text-align: center;
+    z-index: 999;
+  }
+
+  .preview-banner-style {
+    display: inline-block;
+    background: black;
+    color: white;
+    padding: var(--space-2xs) var(--space-md);
+    border-radius: var(--radius-md);
+  }
+</style>

src/layouts/Layout.astro

@@ -1,4 +1,5 @@
 ---
+import PreviewBanner from "@/components/ui/PreviewBanner.astro";
 import Footer from "@/components/ui/Footer.astro";
 import Header from "@/components/ui/header/Header.astro";
 import { locales } from "@/i18n/config";
@@ -130,6 +131,7 @@ const fullTitle = title.includes("|")
       <slot />
     </main>
     <Footer />
+    <PreviewBanner />
   </body>
 </html>