Fix linting issues
This commit is contained in:
parent
a0745160ae
commit
2c66460976
@ -26,7 +26,6 @@ export default function Home() {
|
||||
|
||||
const [cycle, setCycle] = React.useState({ index: 0, show: true });
|
||||
const [showButton, setShowButton] = React.useState(false);
|
||||
const [hideButton, setHideButton] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-orbitron)] select-none">
|
||||
@ -45,7 +44,6 @@ export default function Home() {
|
||||
<div className={`${showButton ? "tofvesson-emph " : ""}inline`}><BlinkText interval={1000}>_</BlinkText></div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={ () => setHideButton(true) }
|
||||
border={false}
|
||||
invertColors={true}
|
||||
className={`${ showButton ? "opacity-100" : "opacity-0 hover:cursor-default"} transition-opacity ease-in-out duration-500 delay-150`}>
|
||||
|
@ -1,17 +1,17 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { ReactNode, useEffect, useState } from "react"
|
||||
|
||||
export type BlinkTextProps = { children: any, interval: number, props?: React.HTMLAttributes<HTMLDivElement> };
|
||||
export type BlinkTextProps = { children?: ReactNode, interval: number, props?: React.HTMLAttributes<HTMLDivElement> };
|
||||
export default function BlinkText({ children, interval, props }: BlinkTextProps) {
|
||||
const elementProps = props ? props : {};
|
||||
const [show, setShow] = React.useState(false);
|
||||
React.useEffect(() => {
|
||||
const [show, setShow] = useState(false);
|
||||
useEffect(() => {
|
||||
const intervalRef = setInterval(() => {
|
||||
setShow(!show);
|
||||
}, interval);
|
||||
|
||||
return () => clearInterval(intervalRef);
|
||||
}, [show]);
|
||||
}, [show, interval]);
|
||||
|
||||
return <div {...elementProps} style={{ visibility: show ? "visible" : "hidden", display: "inline" }}>{children}</div>
|
||||
}
|
@ -1,6 +1,6 @@
|
||||
import { ReactNode } from "react"
|
||||
|
||||
export type ButtonProps = { children?: any, border?: boolean, invertColors?: boolean, href?: string, onClick?: React.MouseEventHandler<HTMLAnchorElement>, className?: string }
|
||||
export type ButtonProps = { children?: ReactNode, border?: boolean, invertColors?: boolean, href?: string, onClick?: React.MouseEventHandler<HTMLAnchorElement>, className?: string }
|
||||
|
||||
export default function Button({ children, border, invertColors, href, onClick, className }: ButtonProps) {
|
||||
return <a
|
||||
|
@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
|
||||
export type DelayProps = { children: any, delay?: number, useOpacity?: boolean, onComplete?: () => void, shouldWait?: boolean };
|
||||
export type DelayProps = { children?: React.ReactNode, delay?: number, useOpacity?: boolean, onComplete?: () => void, shouldWait?: boolean };
|
||||
export default function Delay({ children, delay, useOpacity, onComplete, shouldWait }: DelayProps) {
|
||||
const [show, setShow] = React.useState(false);
|
||||
React.useEffect(() => {
|
||||
@ -20,7 +20,7 @@ export default function Delay({ children, delay, useOpacity, onComplete, shouldW
|
||||
}, delay);
|
||||
|
||||
return () => clearInterval(intervalRef);
|
||||
}, [shouldWait, delay]);
|
||||
}, [shouldWait, delay, onComplete]);
|
||||
|
||||
if (useOpacity) {
|
||||
return <div className={`${ show ? "opacity-100" : "opacity-0"} transition-opacity ease-in-out duration-300`}>{children}</div>
|
||||
|
@ -25,7 +25,7 @@ export default function TypeText({ children, interval, onComplete, reverse }: Ty
|
||||
}, interval);
|
||||
|
||||
return () => clearInterval(intervalRef);
|
||||
}, [length, children, reverse, interval]);
|
||||
}, [length, children, reverse, interval, onComplete]);
|
||||
|
||||
return <>{children.substring(0, length)}</>
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user