File size: 1,528 Bytes
9470652 | 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 | import React from "react";
import postgresImage from "../../assets/images/postgres.png";
import sqliteImage from "../../assets/images/sqlite.png";
import sqlServerImage from "../../assets/images/sql_server.png";
import snowflakeImage from "../../assets/images/snowflake.png";
import mysqlImage from "../../assets/images/mysql.png";
import netflixImage from "../../assets/images/netflix.png";
import spotifyImage from "../../assets/images/spotify.png";
import titanicImage from "../../assets/images/titanic.png";
import { CircleStackIcon } from "@heroicons/react/24/outline";
interface ConnectionImageProps {
databaseDialect: string;
name: string;
}
const ConnectionImage: React.FC<ConnectionImageProps> = ({
databaseDialect,
name,
}) => {
const imageMap: { [key: string]: string } = {
postgresql: postgresImage,
sqlite: sqliteImage,
mssql: sqlServerImage,
snowflake: snowflakeImage,
mysql: mysqlImage,
// You can add more mappings here as needed
};
let imageSrc = imageMap[databaseDialect];
if (name.toLowerCase().includes("netflix")) {
imageSrc = netflixImage;
} else if (name.toLowerCase().includes("spotify")) {
imageSrc = spotifyImage;
} else if (name.toLowerCase().includes("titanic")) {
imageSrc = titanicImage;
}
if (!imageSrc) {
return <CircleStackIcon className="text-gray-400 h-full" />;
}
return (
<img
className="h-full object-contain"
src={imageSrc}
alt={databaseDialect}
/>
);
};
export default ConnectionImage;
|