48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
"use client";
|
|
import "@/app/globals.css";
|
|
import { CSSProperties, useEffect, useState } from "react";
|
|
|
|
export default function Preview(props: PreviewPropsType) {
|
|
const {x, y, width, height} = props;
|
|
const [style, setStyle] = useState<CSSProperties>({
|
|
top: 0,
|
|
left: 0,
|
|
width: 0,
|
|
height: 0,
|
|
});
|
|
|
|
useEffect(() => {
|
|
setStyle({
|
|
top: y,
|
|
left: x,
|
|
width: width,
|
|
height: height,
|
|
display: width + height + x + y === 0 ? 'none' : 'block'
|
|
});
|
|
}, [props.height, props.width, props.x, props.y])
|
|
return (
|
|
<div
|
|
className="absolute border-2 z-50 border-emerald-500 bg-gradient-to-br from-emerald-100/30 to-cyan-100/30 backdrop-blur-[2px] rounded-lg shadow-lg shadow-emerald-200/50 animate-pulse"
|
|
style={style}
|
|
>
|
|
<span
|
|
className="absolute text-2xl bg-emerald-500 border-emerald-500 text-white top-0 p-0.5"
|
|
>
|
|
{width + height === 0 || `${width} * ${height}`}
|
|
</span>
|
|
<span
|
|
className="absolute text-2xl bg-emerald-500 border-emerald-500 text-white bottom-0 p-0.5"
|
|
>
|
|
{x + y === 0 || `${x}, ${y}`}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export type PreviewPropsType = {
|
|
x: number;
|
|
y: number;
|
|
width: number;
|
|
height: number;
|
|
};
|