imnya.ng/src/components/Contact.tsx

59 lines
No EOL
1.7 KiB
TypeScript

import { Github, Instagram, MailIcon, Rss } from "lucide-react";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import Image from "next/image";
const contact = [
{
"name": "Email",
"url": "mailto:me@imnya.ng",
"icon": <MailIcon className="w-5 h-5" />,
},
{
"name": "Blog",
"url": "https://blog.imnya.ng",
"icon": <Rss className="w-5 h-5" />
},
{
"name": "GitHub",
"url": "https://github.com/imnyang",
"icon": <Github className="w-5 h-5" />
},
{
"name": "Instagram",
"url": "https://instagram.com/imnya.ng",
"icon": <Instagram className="w-5 h-5" />
},
{
"name": "Discord",
"url": "https://imnya.ng/discord",
"icon": <Image src="/icon/discord.svg" alt="Discord" width={20} height={20} className="w-5 h-5 invert-0 dark:invert" />
},
]
export default function Contact() {
return (
<div className="flex flex-row space-x-4">
{contact.map((method) => (
<Tooltip key={method.name} >
<TooltipTrigger asChild>
<a
href={method.url}
className="flex items-center space-x-2 text-foreground/80 hover:text-foreground transition-colors"
target="_blank"
rel="noopener noreferrer"
>
{method.icon}
</a>
</TooltipTrigger>
<TooltipContent>
<p>{method.name}</p>
</TooltipContent>
</Tooltip>
))}
</div>
);
}