refactor: index, search and bg designed for V4

.prettierrc

@@ -3,7 +3,7 @@
     "tabWidth": 4,
     "trailingComma": "none",
     "singleQuote": false,
-    "printWidth": 80,
+    "printWidth": 120,
     "endOfLine": "lf"
   }
   

components/background.tsx

@@ -1,30 +1,41 @@
-"use client";
-
-import { useContext } from "react";
-import { SettingsContext } from "../contexts/settingsContext";
 import Image from "next/image";
-
+import { useRecoilValue } from "recoil";
+import { settingsState } from "./state/settings";
+import validUrl from "valid-url";
+import validateColor from "validate-color";
 
 function Background(props: {
     isFocus: boolean;
     src: string;
     onClick: () => void;
 }) {
-    const settings = useContext(SettingsContext);
+    const settings = useRecoilValue(settingsState);
-    const css = "w-full h-full fixed object-cover inset-0 duration-200 z-0";
+    if (validateColor(props.src)) {
-    let focusCSS = settings.bgBlur
+        return (
-        ? "blur-lg scale-110"
+            <div
-        : "brightness-50 scale-105";
+                className="w-full h-full fixed object-cover inset-0 duration-200 z-0"
-    let varCSS = props.isFocus ? focusCSS : "";
+                style={{ backgroundColor: props.src }}
-    return (
+                onClick={props.onClick}
-        <Image
+            ></div>
-            src={props.src}
+        );
-            className={css + " " + varCSS}
+    } else if (validUrl.isWebUri(props.src)) {
-            alt="background"
+        return (
-            onClick={props.onClick}
+            <Image
-            fill={true}
+                src={props.src}
-        />
+                className={
-    );
+                    "w-full h-full fixed object-cover inset-0 duration-200 z-0 " +
+                    (props.isFocus
+                        ? settings.bgBlur
+                            ? "blur-lg scale-110"
+                            : "brightness-50 scale-105"
+                        : "")
+                }
+                alt="background"
+                onClick={props.onClick}
+                fill={true}
+            />
+        );
+    }
 }
 
 export default Background;

components/index.tsx

@@ -1,22 +1,23 @@
-"use client";
+import { useRecoilState } from "recoil";
-
-import { atom, useRecoilState } from "recoil";
 import Background from "./background";
+import Search from "./search/search";
+import { bgFocusState } from "./state/background";
 
 export default function Homepage() {
-    const bgFocus = atom({
+    const [isFocus, setFocus] = useRecoilState(bgFocusState);
-        key: "isBackgroundFocus",
-        default: false
-    });
-
-    const [isFocus, setFocus] = useRecoilState(bgFocus);
     return (
-        <>
+        <div className="h-full fixed overflow-hidden w-full bg-black">
             <Background
-                src="https://a2x.pub/sbcA1"
+                src="rgb(23,25,29)"
                 isFocus={isFocus}
                 onClick={() => setFocus(false)}
             />
-        </>
+            <Search
+                onFocus={() => {
+                    setFocus(true);
+                    console.log("focus");
+                }}
+            />
+        </div>
     );
 }

components/search/search.tsx

@@ -1,7 +1,48 @@
-export default function Search() {
+import { atom, useRecoilValue } from "recoil";
-    return (
+import { settingsState } from "../state/settings";
-        <>
+
-            <input id="searchBox" type="text" />
+export default function Search(props: {
-        </>
+    onFocus: () => void;
-    );
+}) {
+    const settings = useRecoilValue(settingsState);
+    let style = "default";
+    if (style === "default") {
+        return (
+            // 祖传样式，勿动
+            <div className="absolute w-full top-[8.5rem] lg:top-56 short:top-24 z-1 left-1/2 translate-x-[-50%] ">
+                <input
+                    className="absolute z-1 w-11/12 sm:w-[700px] h-10 rounded-lg left-1/2 translate-x-[-50%] 
+                    text-center outline-none border-[1px] focus:border-2 duration-200 pr-2 shadow-lg bg-white dark:bg-[rgb(23,25,29)] 
+                    dark:border-neutral-500 dark:focus:border-neutral-300 placeholder:text-slate-500 
+                    dark:placeholder:text-slate-400 text-slate-900 dark:text-white"
+                    id="searchBox"
+                    type="text"
+                    placeholder="Search"
+                    onFocus={props.onFocus}
+                />
+            </div>
+        );
+    } else if (style == "image") {
+        return (
+            // 祖传样式，勿动
+            <div className="absolute w-full top-[8.5rem] lg:top-56 short:top-24 z-1 left-1/2 translate-x-[-50%] ">
+                <input
+                    className={
+                        `absolute z-1 w-2/3 sm:w-80 md:w-[400px] focus:w-11/12 focus:sm:w-[700px] hover:w-11/12 
+                        hover:sm:w-[700px] h-10 rounded-3xl left-1/2 translate-x-[-50%] text-center outline-none 
+                        border-solid border-0 duration-200 pr-2 shadow-lg` +
+                        (settings.bgBlur
+                            ? `bg-[rgba(255,255,255,0.5)] dark:bg-[rgba(24,24,24,0.75)] backdrop-blur-xl 
+                        placeholder:text-slate-500 dark:placeholder:text-slate-400 text-slate-900 dark:text-white`
+                            : `bg-[rgba(235,235,235,0.9)] dark:bg-[rgba(20,20,20,0.9)] placeholder:text-slate-500 
+                        text-slate-800 dark:text-white`)
+                    }
+                    id="searchBox"
+                    type="text"
+                    placeholder="Search"
+                    onFocus={props.onFocus}
+                />
+            </div>
+        );
+    }
 }

components/state/background.ts

@@ -0,0 +1,10 @@
+import { atom, selector } from "recoil";
+
+const bgFocusState = atom({
+    key: "isBackgroundFocus",
+    default: false
+});
+
+export {
+    bgFocusState,
+}

components/state/settings.ts

@@ -0,0 +1,14 @@
+import { atom, selector } from "recoil";
+
+const settingsState = atom({
+    key: "settings",
+    default: {
+        version: 1,
+        elementBackdrop: true,
+        bgBlur: true
+    }
+});
+
+export {
+    settingsState,
+}

contexts/settingsContext.ts

@@ -1,6 +0,0 @@
-import { createContext } from 'react';
-
-export const SettingsContext = createContext(<settings>{
-    bgBlur: true
-});
-export const SettingsDispatchContext = createContext(null);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sparkhome",
-  "version": "0.1.0",
+  "version": "4.1.0",
-  "private": true,
+  "private": false,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -12,12 +12,15 @@
     "next": "14.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "recoil": "^0.7.7"
+    "recoil": "^0.7.7",
+    "valid-url": "^1.0.9",
+    "validate-color": "^2.2.4"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/valid-url": "^1.0.7",
     "autoprefixer": "^10.0.1",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",

pnpm-lock.yaml

@@ -17,6 +17,12 @@ dependencies:
   recoil:
     specifier: ^0.7.7
     version: 0.7.7(react-dom@18.2.0)(react@18.2.0)
+  valid-url:
+    specifier: ^1.0.9
+    version: 1.0.9
+  validate-color:
+    specifier: ^2.2.4
+    version: 2.2.4
 
 devDependencies:
   '@types/node':
@@ -28,6 +34,9 @@ devDependencies:
   '@types/react-dom':
     specifier: ^18
     version: 18.2.19
+  '@types/valid-url':
+    specifier: ^1.0.7
+    version: 1.0.7
   autoprefixer:
     specifier: ^10.0.1
     version: 10.4.18(postcss@8.4.35)
@@ -237,6 +246,10 @@ packages:
     resolution: {integrity: sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==}
     dev: true
 
+  /@types/valid-url@1.0.7:
+    resolution: {integrity: sha512-tgsWVG80dM5PVEBSbXUttPJTBCOo0IKbBh4R4z/SHsC5C81A3aaUH4fsbj+JYk7fopApU/Mao1c0EWTE592TSg==}
+    dev: true
+
   /ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
@@ -1064,6 +1077,14 @@ packages:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
 
+  /valid-url@1.0.9:
+    resolution: {integrity: sha512-QQDsV8OnSf5Uc30CKSwG9lnhMPe6exHtTXLRYX8uMwKENy640pU+2BgBL0LRbDh/eYRahNCS7aewCx0wf3NYVA==}
+    dev: false
+
+  /validate-color@2.2.4:
+    resolution: {integrity: sha512-Znolz+b6CwW6eBXYld7MFM3O7funcdyRfjKC/X9hqYV/0VcC5LB/L45mff7m3dIn9wdGdNOAQ/fybNuD5P/HDw==}
+    dev: false
+
   /which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}