feat: add noise background image

2024-12-11 21:25:58 +08:00 · 2024-12-11 21:25:58 +08:00 · 821d87c568
commit 821d87c568
parent c3f2c0839b
3 changed files with 21 additions and 5 deletions
--- a/src/components/react/noise-bg.tsx
+++ b/src/components/react/noise-bg.tsx
@ -0,0 +1,19 @@
+export function NoiseBg() {
+  return (
+    <div
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: -1,
+        width: "100%",
+        height: "100%",
+        backgroundSize: "128px",
+        backgroundRepeat: "repeat",
+        backgroundImage:
+          "url('https://framerusercontent.com/images/rR6HYXBrMmX4cRpXfXUOvpvpB0.png')",
+        opacity: 0.06,
+        borderRadius: 0,
+      }}
+    ></div>
+  )
+}
--- a/src/components/react/test.tsx
+++ b/src/components/react/test.tsx
@ -1,5 +0,0 @@
-export function Test() {
-  return (
-    <div className="text-3xl text-blue-500">Test React and TailwindCSS</div>
-  )
-}
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@ -1,6 +1,7 @@
 ---
 import "~/styles/globals.css"
 import { config } from "~/config"
+import { NoiseBg } from "~/components/react/noise-bg"
 ---

 <!doctype html>
@ -35,6 +36,7 @@ import { config } from "~/config"
  <body class="dark:bg-[#121212] dark:text-white">
    <div class="flex min-h-screen w-full justify-center px-10 md:p-0">
      <slot />
+      <NoiseBg />
    </div>
  </body>
 </html>