Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 1x 1x 1x 1x 4x 4x 4x 1x 1x 4x 4x 4x 1x | import React, { useState } from "react";
import { CardData } from "../../store/features/integrations/types";
import { Link, useNavigate } from "react-router-dom";
import { Delete } from "@mui/icons-material";
import ConnectorDeleteOverlay from "./connectors/ConnectorDeleteOverlay";
type ConnectorCardPropTypes = {
connector: CardData;
};
function ConnectorCard({ connector }: ConnectorCardPropTypes) {
const navigate = useNavigate();
const [isDeleting, setIsDeleting] = useState(false);
const handleNavigate = () => {
const url = `/data-sources/${connector.enum.toLowerCase()}/${connector.id}`;
navigate(url);
};
const handleDelete = (e) => {
e.preventDefault();
e.stopPropagation();
setIsDeleting(true);
};
const toggleDeletingOverlay = (e) => {
e?.preventDefault();
e?.stopPropagation();
setIsDeleting(!isDeleting);
};
return (
<div
onClick={handleNavigate}
className="bg-gray-100 py-4 px-2 rounded flex justify-between items-center hover:bg-gray-50 transition-all">
<div className="flex items-center gap-3">
<img
src={connector.imgUrl}
alt={`${connector.enum} Logo`}
width={25}
height={25}
/>
<div className="flex flex-col">
<h3 className="text-sm font-medium">{connector.title}</h3>
<p className="font-semibold text-xs text-gray-400">
{connector.enum}
</p>
</div>
</div>
<div className="flex gap-2">
<button
onClick={handleDelete}
className="flex gap-1 items-center text-sm bg-white hover:bg-violet-500 text-violet-500 hover:text-white rounded p-1 border border-violet-500 shrink-0 font-medium transition-all">
<Delete />
</button>
<Link
to={`/data-sources/${connector.enum.toLowerCase()}/${connector.id}`}
className="flex gap-1 items-center text-sm bg-white hover:bg-violet-500 text-violet-500 hover:text-white rounded p-1 border border-violet-500 shrink-0 font-medium transition-all">
View
</Link>
</div>
<ConnectorDeleteOverlay
isOpen={isDeleting}
toggleOverlay={toggleDeletingOverlay}
successCb={toggleDeletingOverlay}
connector={connector}
/>
</div>
);
}
export default ConnectorCard;
|