Kirubel-Kibru-Yaltopia
d261148b35
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
69 lines
4.1 KiB
XML
69 lines
4.1 KiB
XML
import Link from "next/link";
|
|
import { site } from "@/content/site";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type IconProps = { className?: string };
|
|
|
|
function TikTokIcon({ className }: IconProps) {
|
|
return (
|
|
<svg viewBox="0 0 24 24" className={className} fill="currentColor" aria-hidden>
|
|
<path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.27 6.27 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.33-6.34V8.69a8.18 8.18 0 0 0 4.77 1.52V6.76a4.85 4.85 0 0 1-1-.07z" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function LinkedInIcon({ className }: IconProps) {
|
|
return (
|
|
<svg viewBox="0 0 24 24" className={className} fill="currentColor" aria-hidden>
|
|
<path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.35-1.85 3.58 0 4.24 2.36 4.24 5.43v6.31zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22 0H2C.9 0 0 .9 0 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function FacebookIcon({ className }: IconProps) {
|
|
return (
|
|
<svg viewBox="0 0 24 24" className={className} fill="currentColor" aria-hidden>
|
|
<path d="M24 12.07C24 5.41 18.63 0 12 0S0 5.41 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.41H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.95.93-1.95 1.89v2.27h3.32l-.53 3.49h-2.79V24C19.61 23.1 24 18.1 24 12.07z" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function InstagramIcon({ className }: IconProps) {
|
|
return (
|
|
<svg viewBox="0 0 24 24" className={className} fill="currentColor" aria-hidden>
|
|
<path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.43.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.43.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9a3.37 3.37 0 0 1-.9-1.38c-.16-.43-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.43-.16 1.06-.36 2.23-.41 1.27-.06 1.65-.07 4.85-.07zM12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.15.63c-.78.3-1.44.7-2.1 1.36A5.47 5.47 0 0 0 .63 4.15C.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.9.3.75.7 1.41 1.36 2.07.66.66 1.32 1.06 2.07 1.36.75.3 1.63.5 2.9.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.9-.56a5.47 5.47 0 0 0 2.07-1.36 5.47 5.47 0 0 0 1.36-2.07c.3-.75.5-1.63.56-2.9.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.9a5.47 5.47 0 0 0-1.36-2.07A5.47 5.47 0 0 0 19.85.63c-.75-.3-1.63-.5-2.9-.56C15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.41-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
const SOCIAL = [
|
|
{ id: "tiktok", label: "TikTok", href: site.social.tiktok, Icon: TikTokIcon },
|
|
{ id: "linkedin", label: "LinkedIn", href: site.social.linkedin, Icon: LinkedInIcon },
|
|
{ id: "facebook", label: "Facebook", href: site.social.facebook, Icon: FacebookIcon },
|
|
{ id: "instagram", label: "Instagram", href: site.social.instagram, Icon: InstagramIcon },
|
|
] as const;
|
|
|
|
type Props = {
|
|
className?: string;
|
|
};
|
|
|
|
export function FooterSocialLinks({ className }: Props) {
|
|
return (
|
|
<div className={cn("flex flex-wrap items-center gap-3", className)}>
|
|
<span className="sr-only">Follow GRV Summit</span>
|
|
{SOCIAL.map(({ id, label, href, Icon }) => (
|
|
<Link
|
|
key={id}
|
|
href={href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label={label}
|
|
className="inline-flex size-10 items-center justify-center rounded-full border border-[#1a5c38]/18 bg-[#f7faf8] text-[#1a5c38] shadow-sm transition-colors hover:border-[#1a5c38]/35 hover:bg-[#e8f2ec] hover:text-[#0d3d26]"
|
|
>
|
|
<Icon className="size-[18px]" />
|
|
</Link>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|