nwex.de/src/components/SocialBadge/index.tsx

import React from "react";

export interface SocialBadgeProps {
    title: string
    link: string,
    imagePath: string
}

export const SocialBadge: React.FC<SocialBadgeProps> = ({title, link, imagePath}) => {
    link = link ?? "/404";
    title = title ?? "Unbekannt";

    console.log(imagePath);

    return (
        <a className="block bg-white rounded-full shadow-lg p-2 flex w-max items-center cursor-pointer transition-transform transform hover:scale-105 focus:outline-none focus:ring h-16"
           href={link}>
            {imagePath?(<img className={`flex rounded-full h-12 w-12 object-cover`} src={imagePath}/>):null}
            <div className="mx-4 font-semibold text-xl">{title}</div>
        </a>
    )
}