openpanel/packages/devtools-ui/src/components/active-item-background.tsx
Stefan Pejcic 09f9f9502d packages
2024-11-07 19:03:37 +01:00

28 lines
716 B
TypeScript

import React from "react";
import clsx from "clsx";
export const ActiveItemBackground = ({ active }: { active?: boolean }) => {
return (
<div
className={clsx(
"re-absolute",
"re-left-0",
"re-top-0",
"re-h-full",
"re-w-full",
active ? "re-scale-100" : "re-scale-0",
"re-transition-all",
"re-duration-300",
"re-ease-[cubic-bezier(.25,.75,.5,1.25)]",
)}
style={{
background:
"url(https://refine.ams3.cdn.digitaloceanspaces.com/devtools/active-background-icon.png)",
backgroundSize: "36px 36px",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
}}
/>
);
};