alikia2x/sparkast
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

debug: hydration error

Browse Source
This commit is contained in:
Alikia2x 2024-04-05 00:09:55 +08:00
parent 5ca8d32778
commit 7d412ad439
3 changed files with 92 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
components/background.tsx
View File

@ -1,41 +1,48 @@
import Image from "next/image";
import { useRecoilValue } from "recoil";
import { settingsState } from "./state/settings";
import validUrl from "valid-url";
import validateColor from "validate-color";
"use client";
function Background(props: {
isFocus: boolean;
src: string;
onClick: () => void;
}) {
const settings = useRecoilValue(settingsState);
if (validateColor(props.src)) {
import { useEffect, useState } from "react";
import { useRecoilState } from "recoil";
import { bgFocusState } from "./state/background";
import dynamic from "next/dynamic";
const Background = dynamic(() => import("./backgroundContainer"), { ssr: false });
export default function () {
const [isFocus, setFocus] = useRecoilState(bgFocusState);
const [colorScheme, setColorScheme] = useState("light");
useEffect(() => {
const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: dark)");
setColorScheme(colorSchemeQueryList.matches ? "dark" : "light");
const handleChange = () => {
setColorScheme(colorSchemeQueryList.matches ? "dark" : "light");
};
colorSchemeQueryList.addEventListener("change", handleChange);
return () => {
colorSchemeQueryList.removeEventListener("change", handleChange);
};
}, []);
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);
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}
/>
<div suppressHydrationWarning>
{isClient && (
<div>
{colorScheme === "dark" && (
<Background src="rgb(23,25,29)" isFocus={isFocus} onClick={() => setFocus(false)} />
)}
{colorScheme === "light" && (
<Background src="white" isFocus={isFocus} onClick={() => setFocus(false)} />
)}
</div>
)}
</div>
);
}
}
export default Background;

39
components/backgroundContainer.tsx Normal file
View File

@ -0,0 +1,39 @@
import Image from "next/image";
import { useRecoilValue } from "recoil";
import { settingsState } from "./state/settings";
import validUrl from "valid-url";
import validateColor from "validate-color";
export default function(props: {
isFocus: boolean;
src: string;
onClick: () => void;
}) {
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}
/>
);
}
}

32
components/index.tsx
View File

@ -1,41 +1,25 @@
"use client";
import { useState, useEffect } from "react";
import { useRecoilState } from "recoil";
import { useEffect } from "react";
import { useRecoilState, useSetRecoilState } from "recoil";
import { settingsState } from "./state/settings";
import Background from "./background";
import Search from "./search/search";
import { bgFocusState } from "./state/background";
import Time from "./time";
import loadSettings from "@/lib/loadSettings";
import EngineSelector from "./search/engineSelector";
import SuggestionBox from "./search/onesearch/suggestionBox";
import Suggestion from "./search/onesearch/suggestion";
import Onesearch from "./search/onesearch/onesearch";
import Background from "./background";
export default function Homepage() {
const [settings, setSettings] = useRecoilState(settingsState);
const [isFocus, setFocus] = useRecoilState(bgFocusState);
const [colorScheme, setColorScheme] = useState("");
const setFocus = useSetRecoilState(bgFocusState);
useEffect(() => {
loadSettings(setSettings);
}, [setSettings]);
useEffect(() => {
const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: dark)");
setColorScheme(colorSchemeQueryList.matches ? "dark" : "light");
const handleChange = () => {
setColorScheme(colorSchemeQueryList.matches ? "dark" : "light");
};
colorSchemeQueryList.addEventListener("change", handleChange);
return () => {
colorSchemeQueryList.removeEventListener("change", handleChange);
};
}, []);
return (
<div className="h-full fixed overflow-hidden w-full bg-black">
@ -43,12 +27,10 @@ export default function Homepage() {
<EngineSelector className="absolute top-20 lg:top-44 short:top-0 translate-x-[-50%] translate-y-[-0.2rem]
left-1/2 w-11/12 sm:w-[700px] text:black text-right
dark:text-white text-3xl text-shadow-lg z-10"/>
{colorScheme === "dark" && (
<Background src="rgb(23,25,29)" isFocus={isFocus} onClick={() => setFocus(false)} />
)}
{colorScheme === "light" && <Background src="white" isFocus={isFocus} onClick={() => setFocus(false)} />}
<Background />
<Search onFocus={() => setFocus(true)} />
<Onesearch />
<p className="z-20 relative text-white text-2xl">FUCK YOU SSR</p>
</div>
);
}