feature: time
This commit is contained in:
parent
304ea14003
commit
9a623164e4
@ -1,17 +1,17 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
import { useRecoilState } from "recoil";
|
import { useRecoilState } from "recoil";
|
||||||
import Background from "./background";
|
import Background from "./background";
|
||||||
import Search from "./search/search";
|
import Search from "./search/search";
|
||||||
import { bgFocusState } from "./state/background";
|
import { bgFocusState } from "./state/background";
|
||||||
|
import Time from "./time";
|
||||||
|
|
||||||
export default function Homepage() {
|
export default function Homepage() {
|
||||||
const [isFocus, setFocus] = useRecoilState(bgFocusState);
|
const [isFocus, setFocus] = useRecoilState(bgFocusState);
|
||||||
return (
|
return (
|
||||||
<div className="h-full fixed overflow-hidden w-full bg-black">
|
<div className="h-full fixed overflow-hidden w-full bg-black">
|
||||||
<Background
|
<Time showSecond={true} />
|
||||||
src="rgb(23,25,29)"
|
<Background src="rgb(23,25,29)" isFocus={isFocus} onClick={() => setFocus(false)} />
|
||||||
isFocus={isFocus}
|
|
||||||
onClick={() => setFocus(false)}
|
|
||||||
/>
|
|
||||||
<Search
|
<Search
|
||||||
onFocus={() => {
|
onFocus={() => {
|
||||||
setFocus(true);
|
setFocus(true);
|
||||||
|
41
components/time.tsx
Normal file
41
components/time.tsx
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React, {useState, useEffect} from "react";
|
||||||
|
|
||||||
|
export default function Time(props: {
|
||||||
|
showSecond: boolean;
|
||||||
|
}){
|
||||||
|
const [currentTime, setCurrentTime] = useState(new Date());
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
setCurrentTime(new Date());
|
||||||
|
}, 150);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearInterval(timer);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const formatTime = () => {
|
||||||
|
const hours = currentTime.getHours().toString().padStart(2, "0");
|
||||||
|
const minutes = currentTime.getMinutes().toString().padStart(2, "0");
|
||||||
|
const seconds = currentTime.getSeconds().toString().padStart(2, "0");
|
||||||
|
|
||||||
|
if (props.showSecond) {
|
||||||
|
return `${hours}:${minutes}:${seconds}`;
|
||||||
|
} else {
|
||||||
|
return `${hours}:${minutes}`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="absolute top-20 lg:top-[9.5rem] short:top-0 translate-x-[-50%] left-1/2 duration-200
|
||||||
|
text-white text-[40px] text-center text-shadow-lg z-10"
|
||||||
|
style={{textShadow: "0px 0px 5px rgba(30,30,30,0.5)"}}
|
||||||
|
>
|
||||||
|
{formatTime()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user