mirror of
https://github.com/blakeblackshear/frigate.git
synced 2025-12-08 06:15:43 +03:00
893fe79d22
Some checks are pending
CI / AMD64 Build (push) Waiting to run
CI / ARM Build (push) Waiting to run
CI / Jetson Jetpack 6 (push) Waiting to run
CI / AMD64 Extra Build (push) Blocked by required conditions
CI / ARM Extra Build (push) Blocked by required conditions
CI / Synaptics Build (push) Blocked by required conditions
CI / Assemble and push default build (push) Blocked by required conditions
* add blurred icon button component * apply component to explore, face, and classification views * apply to exports and fix bug where play button was unclickable
29 lines
929 B
TypeScript
29 lines
929 B
TypeScript
import React, { forwardRef } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type BlurredIconButtonProps = React.HTMLAttributes<HTMLDivElement>;
|
|
|
|
const BlurredIconButton = forwardRef<HTMLDivElement, BlurredIconButtonProps>(
|
|
({ className = "", children, ...rest }, ref) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
"group relative inline-flex items-center justify-center",
|
|
className,
|
|
)}
|
|
{...rest}
|
|
>
|
|
<div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
|
|
<div className="relative z-10 cursor-pointer text-white/85 hover:text-white">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
|
|
BlurredIconButton.displayName = "BlurredIconButton";
|
|
|
|
export default BlurredIconButton;
|