github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-04-08 03:00:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

remove unused state and simplify hover behavior in FilterChip component

Browse Source
This commit is contained in:
Abhimanyu Yadav
2025-06-12 07:55:11 +05:30
parent 04d30efc5d
commit 3cd214d0d4
1 changed files with 11 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
autogpt_platform/frontend/src/components/builder/block-menu/FilterChip.tsx
View File

@@ -1,7 +1,7 @@
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { X } from "lucide-react";
import React, { ButtonHTMLAttributes, useState } from "react";
import React, { ButtonHTMLAttributes } from "react";
interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
selected?: boolean;
@@ -16,7 +16,6 @@ export const FilterChip: React.FC<Props> = ({
className,
...rest
}) => {
const [isHovering, setIsHovering] = useState(false);
return (
<Button
className={cn(
@@ -26,8 +25,6 @@ export const FilterChip: React.FC<Props> = ({
className,
)}
{...rest}
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
>
<span
className={cn(
@@ -37,19 +34,21 @@ export const FilterChip: React.FC<Props> = ({
>
{name}
</span>
{selected &&
(isHovering && number !== undefined ? (
<span className="flex h-[1.375rem] items-center rounded-[1.25rem] bg-violet-700 p-[0.375rem] text-zinc-50 transition-all duration-300 ease-in-out animate-in fade-in zoom-in">
{number > 100 ? "100+" : number}
</span>
) : (
<span className="flex h-4 w-4 items-center justify-center rounded-full bg-zinc-50 transition-all duration-300 ease-in-out">
{selected && (
<>
<span className="flex h-4 w-4 items-center justify-center rounded-full bg-zinc-50 transition-all duration-300 ease-in-out group-hover:hidden">
<X
className="h-3 w-3 rounded-full text-violet-700"
strokeWidth={2}
/>
</span>
))}
{number !== undefined && (
<span className="hidden h-[1.375rem] items-center rounded-[1.25rem] bg-violet-700 p-[0.375rem] text-zinc-50 transition-all duration-300 ease-in-out animate-in fade-in zoom-in group-hover:flex">
{number > 100 ? "100+" : number}
</span>
)}
</>
)}
</Button>
);
};