diff --git a/.prettierrc b/.prettierrc
index cffb978..9c2105a 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,7 +3,7 @@
"tabWidth": 4,
"trailingComma": "none",
"singleQuote": false,
- "printWidth": 80,
+ "printWidth": 120,
"endOfLine": "lf"
}
\ No newline at end of file
diff --git a/components/background.tsx b/components/background.tsx
index 892ff3d..97d6b6d 100644
--- a/components/background.tsx
+++ b/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 css = "w-full h-full fixed object-cover inset-0 duration-200 z-0";
- let focusCSS = settings.bgBlur
- ? "blur-lg scale-110"
- : "brightness-50 scale-105";
- let varCSS = props.isFocus ? focusCSS : "";
- return (
-
- );
+ const settings = useRecoilValue(settingsState);
+ if (validateColor(props.src)) {
+ return (
+
+ );
+ } else if (validUrl.isWebUri(props.src)) {
+ return (
+
+ );
+ }
}
export default Background;
diff --git a/components/index.tsx b/components/index.tsx
index c7685cf..fcc8ba6 100644
--- a/components/index.tsx
+++ b/components/index.tsx
@@ -1,22 +1,23 @@
-"use client";
-
-import { atom, useRecoilState } from "recoil";
+import { useRecoilState } from "recoil";
import Background from "./background";
+import Search from "./search/search";
+import { bgFocusState } from "./state/background";
export default function Homepage() {
- const bgFocus = atom({
- key: "isBackgroundFocus",
- default: false
- });
-
- const [isFocus, setFocus] = useRecoilState(bgFocus);
+ const [isFocus, setFocus] = useRecoilState(bgFocusState);
return (
- <>
+
setFocus(false)}
/>
- >
+ {
+ setFocus(true);
+ console.log("focus");
+ }}
+ />
+
);
-}
+}
\ No newline at end of file
diff --git a/components/search/search.tsx b/components/search/search.tsx
index 48e65ef..99d3cdf 100644
--- a/components/search/search.tsx
+++ b/components/search/search.tsx
@@ -1,7 +1,48 @@
-export default function Search() {
- return (
- <>
-
- >
- );
-}
\ No newline at end of file
+import { atom, useRecoilValue } from "recoil";
+import { settingsState } from "../state/settings";
+
+export default function Search(props: {
+ onFocus: () => void;
+}) {
+ const settings = useRecoilValue(settingsState);
+ let style = "default";
+ if (style === "default") {
+ return (
+ // 祖传样式,勿动
+
+
+
+ );
+ } else if (style == "image") {
+ return (
+ // 祖传样式,勿动
+
+
+
+ );
+ }
+}
diff --git a/components/state/background.ts b/components/state/background.ts
new file mode 100644
index 0000000..d2dbb24
--- /dev/null
+++ b/components/state/background.ts
@@ -0,0 +1,10 @@
+import { atom, selector } from "recoil";
+
+const bgFocusState = atom({
+ key: "isBackgroundFocus",
+ default: false
+});
+
+export {
+ bgFocusState,
+}
\ No newline at end of file
diff --git a/components/state/settings.ts b/components/state/settings.ts
new file mode 100644
index 0000000..a750802
--- /dev/null
+++ b/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,
+}
\ No newline at end of file
diff --git a/contexts/settingsContext.ts b/contexts/settingsContext.ts
deleted file mode 100644
index d2c1436..0000000
--- a/contexts/settingsContext.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { createContext } from 'react';
-
-export const SettingsContext = createContext({
- bgBlur: true
-});
-export const SettingsDispatchContext = createContext(null);
diff --git a/package.json b/package.json
index 1f78e9d..3fef6d2 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "sparkhome",
- "version": "0.1.0",
- "private": true,
+ "version": "4.1.0",
+ "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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 13643cc..dbc33cd 100644
--- a/pnpm-lock.yaml
+++ b/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'}