actions.tsx (5559B)
1 import Link from "next/link"; 2 import * as React from "react"; 3 import { BiRightArrowAlt } from "react-icons/bi"; 4 import { useTheme } from "../layout"; 5 import { PageBlocksHeroActions } from "../../tina/__generated__/types"; 6 import { tinaField } from "tinacms/dist/react"; 7 8 export const Actions = ({ 9 parentColor = "default", 10 className = "", 11 actions, 12 }: { 13 parentColor: string; 14 className: string; 15 actions: PageBlocksHeroActions[]; 16 }) => { 17 const theme = useTheme(); 18 const buttonColorClasses = { 19 blue: "text-white bg-blue-500 hover:bg-blue-600 bg-gradient-to-r from-blue-400 to-blue-600 hover:from-blue-400 hover:to-blue-500", 20 teal: "text-white bg-teal-500 hover:bg-teal-600 bg-gradient-to-r from-teal-400 to-teal-600 hover:from-teal-400 hover:to-teal-500", 21 green: 22 "text-white bg-green-500 hover:bg-green-600 bg-gradient-to-r from-green-400 to-green-600 hover:from-green-400 hover:to-green-500", 23 red: "text-white bg-red-500 hover:bg-red-600 bg-gradient-to-r from-red-500 to-red-600 hover:from-red-400 hover:to-red-500", 24 pink: "text-white bg-pink-500 hover:bg-pink-600 bg-gradient-to-r from-pink-400 to-pink-600 hover:from-pink-400 hover:to-pink-500", 25 purple: 26 "text-white bg-purple-500 hover:bg-purple-600 bg-gradient-to-r from-purple-400 to-purple-600 hover:from-purple-400 hover:to-purple-500", 27 orange: 28 "text-white bg-orange-500 hover:bg-orange-600 bg-gradient-to-r from-orange-400 to-orange-600 hover:from-orange-400 hover:to-orange-500", 29 yellow: 30 "text-gray-800 bg-yellow-500 hover:bg-yellow-600 bg-gradient-to-r from-yellow-400 to-yellow-600 hover:from-yellow-400 hover:to-yellow-500", 31 }; 32 33 const invertedButtonColorClasses = { 34 blue: "text-blue-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100", 35 teal: "text-teal-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100", 36 green: 37 "text-green-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100", 38 red: "text-red-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100", 39 pink: "text-pink-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100", 40 purple: 41 "text-purple-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100", 42 orange: 43 "text-orange-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100", 44 yellow: 45 "text-yellow-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100", 46 }; 47 48 const linkButtonColorClasses = { 49 blue: "text-blue-600 dark:text-blue-400 hover:text-blue-400 dark:hover:text-blue-200", 50 teal: "ttext-teal-600 dark:text-teal-400 hover:text-teal-400 dark:hover:text-teal-200", 51 green: 52 "text-green-600 dark:text-green-400 hover:text-green-400 dark:hover:text-green-200", 53 red: "text-red-600 dark:text-red-400 hover:text-red-400 dark:hover:text-red-200", 54 pink: "text-pink-600 dark:text-pink-400 hover:text-pink-400 dark:hover:text-pink-200", 55 purple: 56 "text-purple-600 dark:text-purple-400 hover:text-purple-400 dark:hover:text-purple-200", 57 orange: 58 "text-orange-600 dark:text-orange-400 hover:text-orange-400 dark:hover:text-orange-200", 59 yellow: 60 "text-yellow-600 dark:text-yellow-400 hover:text-yellow-400 dark:hover:text-yellow-200", 61 }; 62 63 return ( 64 <div className={`flex flex-wrap items-center gap-y-4 gap-x-6 ${className}`}> 65 {actions && 66 actions.map(function (action, index) { 67 let element = null; 68 if (action.type === "button") { 69 element = ( 70 <Link key={index} href={action.link ? action.link : "/"}> 71 <button 72 data-tina-field={tinaField(action)} 73 className={`z-10 relative flex items-center px-7 py-3 font-semibold text-lg transition duration-150 ease-out rounded-lg transform focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2 whitespace-nowrap ${ 74 parentColor === "primary" 75 ? invertedButtonColorClasses[theme.color] 76 : buttonColorClasses[theme.color] 77 }`} 78 > 79 {action.label} 80 {action.icon && ( 81 <BiRightArrowAlt 82 className={`ml-1 -mr-1 w-6 h-6 opacity-80`} 83 /> 84 )} 85 </button> 86 </Link> 87 ); 88 } 89 if (action.type === "link" || action.type === "linkExternal") { 90 element = ( 91 <Link 92 key={index} 93 href={action.link ? action.link : "/"} 94 data-tina-field={tinaField(action)} 95 className={`group inline-flex items-center font-semibold text-lg transition duration-150 ease-out ${ 96 parentColor === "primary" 97 ? `text-white hover:text-gray-50` 98 : linkButtonColorClasses[theme.color] 99 }`} 100 style={{ 101 textShadow: `0 3px 7px rgba(var(--color-rgb-blue-400),0.2)`, 102 }} 103 > 104 {action.label} 105 {action.icon && ( 106 <BiRightArrowAlt className={`ml-0 mr-0 w-6 h-6 opacity-80`} /> 107 )} 108 </Link> 109 ); 110 } 111 return element; 112 })} 113 </div> 114 ); 115 };