refactor: index, search and bg designed for V4
This commit is contained in:
Alikia2x
parent
df63ae4f4e
commit
fc9aa10402
@ -3,7 +3,7 @@
|
||||
"tabWidth": 4,
|
||||
"trailingComma": "none",
|
||||
"singleQuote": false,
|
||||
"printWidth": 80,
|
||||
"printWidth": 120,
|
||||
"endOfLine": "lf"
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<Image
|
||||
src={props.src}
|
||||
className={css + " " + varCSS}
|
||||
alt="background"
|
||||
onClick={props.onClick}
|
||||
fill={true}
|
||||
/>
|
||||
);
|
||||
const settings = useRecoilValue(settingsState);
|
||||
if (validateColor(props.src)) {
|
||||
return (
|
||||
<div
|
||||
className="w-full h-full fixed object-cover inset-0 duration-200 z-0"
|
||||
style={{ backgroundColor: props.src }}
|
||||
onClick={props.onClick}
|
||||
></div>
|
||||
);
|
||||
} else if (validUrl.isWebUri(props.src)) {
|
||||
return (
|
||||
<Image
|
||||
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;
|
||||
|
||||
@ -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 (
|
||||
<>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,48 @@
|
||||
export default function Search() {
|
||||
return (
|
||||
<>
|
||||
<input id="searchBox" type="text" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
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 (
|
||||
// 祖传样式，勿动
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
10
components/state/background.ts
Normal file
10
components/state/background.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { atom, selector } from "recoil";
|
||||
|
||||
const bgFocusState = atom({
|
||||
key: "isBackgroundFocus",
|
||||
default: false
|
||||
});
|
||||
|
||||
export {
|
||||
bgFocusState,
|
||||
}
|
||||
14
components/state/settings.ts
Normal file
14
components/state/settings.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { atom, selector } from "recoil";
|
||||
|
||||
const settingsState = atom({
|
||||
key: "settings",
|
||||
default: {
|
||||
version: 1,
|
||||
elementBackdrop: true,
|
||||
bgBlur: true
|
||||
}
|
||||
});
|
||||
|
||||
export {
|
||||
settingsState,
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
import { createContext } from 'react';
|
||||
|
||||
export const SettingsContext = createContext(<settings>{
|
||||
bgBlur: true
|
||||
});
|
||||
export const SettingsDispatchContext = createContext(null);
|
||||
@ -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",
|
||||
|
||||
@ -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'}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user