fix: resolve invalid button nesting in component hierarchy

This commit is contained in:
pompurin404 2025-02-03 09:02:09 +08:00
parent 4b7ab042f3
commit 31190e169f

View File

@ -24,6 +24,7 @@ const ConnectionItem: React.FC<Props> = (props) => {
return ( return (
<div className={`px-2 pb-2 ${index === 0 ? 'pt-2' : ''}`}> <div className={`px-2 pb-2 ${index === 0 ? 'pt-2' : ''}`}>
<div className="relative">
<Card <Card
isPressable isPressable
className="w-full" className="w-full"
@ -32,8 +33,8 @@ const ConnectionItem: React.FC<Props> = (props) => {
setIsDetailModalOpen(true) setIsDetailModalOpen(true)
}} }}
> >
<div className="w-full flex justify-between"> <div className="w-full">
<div className="w-[calc(100%-48px)]"> <div className="w-full pr-12">
<CardHeader className="pb-0 gap-1"> <CardHeader className="pb-0 gap-1">
<Chip <Chip
color={`${info.isActive ? 'primary' : 'danger'}`} color={`${info.isActive ? 'primary' : 'danger'}`}
@ -80,11 +81,13 @@ const ConnectionItem: React.FC<Props> = (props) => {
) : null} ) : null}
</CardFooter> </CardFooter>
</div> </div>
</div>
</Card>
<Button <Button
color={`${info.isActive ? 'warning' : 'danger'}`} color={`${info.isActive ? 'warning' : 'danger'}`}
variant="light" variant="light"
isIconOnly isIconOnly
className="mr-2 my-auto" className="absolute right-2 top-1/2 -translate-y-1/2"
onPress={() => { onPress={() => {
close(info.id) close(info.id)
}} }}
@ -92,7 +95,6 @@ const ConnectionItem: React.FC<Props> = (props) => {
{info.isActive ? <CgClose className="text-lg" /> : <CgTrash className="text-lg" />} {info.isActive ? <CgClose className="text-lg" /> : <CgTrash className="text-lg" />}
</Button> </Button>
</div> </div>
</Card>
</div> </div>
) )
} }