footer.tsx (5280B)
1 import React from "react"; 2 import Link from "next/link"; 3 import { FaFacebookF, FaGithub, FaTwitter } from "react-icons/fa"; 4 import { AiFillInstagram } from "react-icons/ai"; 5 import { Container } from "../../util/container"; 6 import { RawRenderer } from "./rawRenderer"; 7 import { useTheme } from ".."; 8 import { Icon } from "../../util/icon"; 9 10 export const Footer = ({ data, icon, rawData }) => { 11 const theme = useTheme(); 12 const socialIconClasses = "h-7 w-auto"; 13 const socialIconColorClasses = { 14 blue: "text-blue-500 dark:text-blue-400 hover:text-blue-300", 15 teal: "text-teal-500 dark:text-teal-400 hover:text-teal-300", 16 green: "text-green-500 dark:text-green-400 hover:text-green-300", 17 red: "text-red-500 dark:text-red-400 hover:text-red-300", 18 pink: "text-pink-500 dark:text-pink-400 hover:text-pink-300", 19 purple: "text-purple-500 dark:text-purple-400 hover:text-purple-300", 20 orange: "text-orange-500 dark:text-orange-400 hover:text-orange-300", 21 yellow: "text-yellow-500 dark:text-yellow-400 hover:text-yellow-300", 22 primary: "text-white opacity-80 hover:opacity-100", 23 }; 24 25 const footerColor = { 26 default: 27 "text-gray-800 from-white to-gray-50 dark:from-gray-900 dark:to-gray-1000", 28 primary: { 29 blue: "text-white from-blue-500 to-blue-700", 30 teal: "text-white from-teal-500 to-teal-600", 31 green: "text-white from-green-500 to-green-600", 32 red: "text-white from-red-500 to-red-600", 33 pink: "text-white from-pink-500 to-pink-600", 34 purple: "text-white from-purple-500 to-purple-600", 35 orange: "text-white from-orange-500 to-orange-600", 36 yellow: "text-white from-yellow-500 to-yellow-600", 37 }, 38 }; 39 40 const footerColorCss = 41 data.color === "primary" 42 ? footerColor.primary[theme.color] 43 : footerColor.default; 44 45 return ( 46 <footer className={`bg-gradient-to-br ${footerColorCss}`}> 47 <Container className="relative" size="small"> 48 <div className="flex justify-between items-center gap-6 flex-wrap"> 49 <Link 50 href="/" 51 className="group mx-2 flex items-center font-bold tracking-tight text-gray-400 dark:text-gray-300 opacity-50 hover:opacity-100 transition duration-150 ease-out whitespace-nowrap" 52 > 53 <Icon 54 parentColor={data.color} 55 data={{ 56 name: icon.name, 57 color: data.color === "primary" ? "primary" : icon.color, 58 style: icon.style, 59 }} 60 className="inline-block h-10 w-auto group-hover:text-orange-500" 61 /> 62 </Link> 63 <div className="flex gap-4"> 64 {data.social && data.social.facebook && ( 65 <a 66 className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150" 67 href={data.social.facebook} 68 target="_blank" 69 > 70 <FaFacebookF 71 className={`${socialIconClasses} ${ 72 socialIconColorClasses[ 73 data.color === "primary" ? "primary" : theme.color 74 ] 75 }`} 76 /> 77 </a> 78 )} 79 {data.social && data.social.twitter && ( 80 <a 81 className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150" 82 href={data.social.twitter} 83 target="_blank" 84 > 85 <FaTwitter 86 className={`${socialIconClasses} ${ 87 socialIconColorClasses[ 88 data.color === "primary" ? "primary" : theme.color 89 ] 90 }`} 91 /> 92 </a> 93 )} 94 {data.social && data.social.instagram && ( 95 <a 96 className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150" 97 href={data.social.instagram} 98 target="_blank" 99 > 100 <AiFillInstagram 101 className={`${socialIconClasses} ${ 102 socialIconColorClasses[ 103 data.color === "primary" ? "primary" : theme.color 104 ] 105 }`} 106 /> 107 </a> 108 )} 109 {data.social && data.social.github && ( 110 <a 111 className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150" 112 href={data.social.github} 113 target="_blank" 114 > 115 <FaGithub 116 className={`${socialIconClasses} ${ 117 socialIconColorClasses[ 118 data.color === "primary" ? "primary" : theme.color 119 ] 120 }`} 121 /> 122 </a> 123 )} 124 </div> 125 <RawRenderer parentColor={data.color} rawData={rawData} /> 126 </div> 127 <div 128 className={`absolute h-1 bg-gradient-to-r from-transparent ${ 129 data.color === "primary" ? `via-white` : `via-black dark:via-white` 130 } to-transparent top-0 left-4 right-4 opacity-5`} 131 ></div> 132 </Container> 133 </footer> 134 ); 135 };