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 ( - background - ); + const settings = useRecoilValue(settingsState); + if (validateColor(props.src)) { + return ( +
+ ); + } else if (validUrl.isWebUri(props.src)) { + return ( + background + ); + } } 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'}