Add much better system for style lists in Input.astro, and format.

astro.config.mjs

@@ -6,18 +6,20 @@ import sitemap from "@astrojs/sitemap";
 // https://astro.build/config
 export default defineConfig({
   site: "https://aluu.xyz",
-  integrations: [sitemap({
+  integrations: [
+    sitemap({
       lastmod: new Date(),
       i18n: {
         locales: {
           en: "en-US",
           jp: "ja-JP",
         },
-      defaultLocale: "en"
+        defaultLocale: "en",
-    }
+      },
-  })],
+    }),
+  ],
   output: "hybrid",
   adapter: node({
-    mode: "middleware"
+    mode: "middleware",
-  })
+  }),
 });

index.js

@@ -151,7 +151,7 @@ app.get("/robots.txt", (req, res) => {
   } else {
     res.sendFile(path.join(process.cwd(), "dist/client/robots-deny.txt"));
   }
-})
+});
 app.get("/search", async (req, res) => {
   try {
     const { query } = req.query;

src/components/UI/Input.astro

@@ -1,5 +1,18 @@
 ---
-const { inputName, defaultTextContent, height, placeholder, className, defaultStyles = true } = Astro.props;
+const {
+  inputName,
+  defaultTextContent,
+  height,
+  placeholder,
+  className,
+  defaultStyles = true,
+} = Astro.props;
+
+const styleList = className ? className.split(" ") : [];
+
+if (defaultStyles) {
+  styleList.push("astro-input");
+}
 
 interface Props {
   inputName: string;
@@ -17,27 +30,5 @@ interface Props {
   placeholder={placeholder || ""}
   value={defaultTextContent || ""}
   type="text"
-  class={className}
+  class={styleList.map((style) => style).join(" ")}
 />
-
-{defaultStyles && <style>
-    input {
-      font-size: 16px;
-      width: 100%;
-      border: 2px solid var(--background-highlight);
-      border-radius: 10px;
-      background-color: var(--accent-color);
-      color: var(--text-color);
-      transition: 0.1s ease-in-out;
-    }
-    input::placeholder {
-      color: var(--text-color);
-    }
-    input:focus {
-      outline: none;
-      border: 2px solid var(--text-color);
-    }
-  </style>
-}
-
-

src/layouts/Layout.astro

@@ -199,6 +199,22 @@ const { title, optionalPreloads } = Astro.props;
         border-radius: 15px;
         cursor: pointer;
       }
+      .astro-input {
+        font-size: 16px;
+        width: 100%;
+        border: 2px solid var(--background-highlight);
+        border-radius: 10px;
+        background-color: var(--accent-color);
+        color: var(--text-color);
+        transition: 0.1s ease-in-out;
+      }
+      .astro-input::placeholder {
+        color: var(--text-color);
+      }
+      .astro-input:focus {
+        outline: none;
+        border: 2px solid var(--text-color);
+      }
     </style>
   </body>
 </html>