Actions : a custom Component to use as Action inside Tanstack Table using <Sheet /> from Shadcn

Actions.tsx

import { MoreHorizontal } from 'lucide-react'
import { useState } from 'react'
import Link from 'next/link'
import type { MyResourceType } from '@shared/interfaces/my-resource'
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/modules/design-system/primitives/DropdownMenu'
import { Button } from '@/modules/design-system/primitives/Button'
import { deleteResource } from '@/modules/lists/queries/resource'
import { SidePanel } from '@/modules/design-system/components/SidePanel/SidePanel'

const Actions = ({ id, title, refetch }: MyResourceType & { refetch: () => void }) => {
    const [isDropdownOpen, setIsDropdownOpen] = useState(false)
    const [isSheetOpen, setIsSheetOpen] = useState(false)

    const onOpen = () => {
        setIsDropdownOpen(false)
        setIsSheetOpen(true)
    }

    return (
        <>
            <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
                <DropdownMenuTrigger asChild>
                    <Button variant={'ghost'} className={'h-8 w-8 p-0'}>
                        <span className={'sr-only'}>Open menu</span>
                        <MoreHorizontal className={'h-4 w-4'} />
                    </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align={'end'}>
                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
                    <DropdownMenuItem className={'cursor-pointer'}>
                        <Link href={`/resource/${id}/edit`}>
                            Modify this resource
                        </Link>
                    </DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem className={'cursor-pointer'} onClick={onOpen}>
                        Delete this resource
                    </DropdownMenuItem>
                </DropdownMenuContent>
            </DropdownMenu>
            <SidePanel
                title={'Suppression'}
                isOpen={isSheetOpen}
                setIsOpen={setIsSheetOpen}
            >
                <div className={'flex flex-col gap-y-2'}>
                    <span>You will delete the following resource:</span>
                    <span className={'underline font-semibold'}>{title}</span>
                    <span>Are you sure ?</span>
                    <div className={'flex items-center gap-x-4 mt-4'}>
                        <Button
                            type={'submit'}
                            variant={'destructive'}
                            onClick={() => {
                                deleteResource(id).then(() => {
                                    setIsSheetOpen(false)
                                    refetch()
                                })
                            }}
                        >
                            Delete
                        </Button>
                        <Button
                            variant={'light'}
                            onClick={() => setIsSheetOpen(false)}
                        >
                            Cancel
                        </Button>
                    </div>
                </div>
            </SidePanel>
        </>
    )
}

export default Actions