imnya.ng/src/components/Contact.tsx

70 lines
2.1 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { Github, Instagram, MailIcon, Rss } from "lucide-react";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import Image from "next/image";
import Link from "next/link";
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": "𝕏",
"url": "https://x.com/imnya_ng",
"icon": <p className="text-[20px] font-bold">𝕏</p>
},
{
"name": "Discord",
"url": "https://discord.gg/uxxn2ZZHGn",
"icon": <Image src="/icon/discord.svg" alt="Discord" width={20} height={20} className="w-5 h-5 invert-0 dark:invert" />
},
{
"name": "maishift",
"url": "https://mai.sft.sh/imnyang",
"icon": <Image src="/icon/maimai.webp" alt="mai.sft.sh" 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>
<Link
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}
</Link>
</TooltipTrigger>
<TooltipContent>
<p>{method.name}</p>
</TooltipContent>
</Tooltip>
))}
</div>
);
}