107 lines
5.5 KiB
TypeScript
107 lines
5.5 KiB
TypeScript
import Link from "next/link";
|
|
import * as React from "react";
|
|
import { BiRightArrowAlt } from "react-icons/bi";
|
|
import { PageBlocksHeroActions } from "../../tina/__generated__/types";
|
|
import { tinaField } from "tinacms/dist/react";
|
|
|
|
export const Actions = ({
|
|
parentColor = "default",
|
|
className = "",
|
|
actions
|
|
}: {
|
|
parentColor: string;
|
|
className: string;
|
|
actions: PageBlocksHeroActions[];
|
|
}) => {
|
|
const buttonColorClasses = {
|
|
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",
|
|
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",
|
|
green:
|
|
"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",
|
|
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",
|
|
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",
|
|
purple:
|
|
"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",
|
|
orange:
|
|
"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",
|
|
yellow:
|
|
"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"
|
|
};
|
|
|
|
const invertedButtonColorClasses = {
|
|
blue: "text-blue-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
|
|
teal: "text-teal-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
|
|
green:
|
|
"text-green-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
|
|
red: "text-red-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
|
|
pink: "text-pink-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
|
|
purple:
|
|
"text-purple-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
|
|
orange:
|
|
"text-orange-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
|
|
yellow:
|
|
"text-yellow-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100"
|
|
};
|
|
|
|
const linkButtonColorClasses = {
|
|
blue: "text-blue-600 dark:text-blue-400 hover:text-blue-400 dark:hover:text-blue-200",
|
|
teal: "ttext-teal-600 dark:text-teal-400 hover:text-teal-400 dark:hover:text-teal-200",
|
|
green:
|
|
"text-green-600 dark:text-green-400 hover:text-green-400 dark:hover:text-green-200",
|
|
red: "text-red-600 dark:text-red-400 hover:text-red-400 dark:hover:text-red-200",
|
|
pink: "text-pink-600 dark:text-pink-400 hover:text-pink-400 dark:hover:text-pink-200",
|
|
purple:
|
|
"text-purple-600 dark:text-purple-400 hover:text-purple-400 dark:hover:text-purple-200",
|
|
orange:
|
|
"text-orange-600 dark:text-orange-400 hover:text-orange-400 dark:hover:text-orange-200",
|
|
yellow:
|
|
"text-yellow-600 dark:text-yellow-400 hover:text-yellow-400 dark:hover:text-yellow-200"
|
|
};
|
|
|
|
return (
|
|
<div className={ `flex flex-wrap items-center gap-y-4 gap-x-6 ${ className }` }>
|
|
{ actions &&
|
|
actions.map((action, index) => {
|
|
let element = null;
|
|
if (action.type === "button") {
|
|
element = (
|
|
<Link key={ index } href={ action.link ? action.link : "/" }>
|
|
<button
|
|
data-tina-field={ tinaField(action) }
|
|
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 ${
|
|
invertedButtonColorClasses.blue }` }
|
|
>
|
|
{ action.label }
|
|
{ action.icon && (
|
|
<BiRightArrowAlt
|
|
className={ "ml-1 -mr-1 w-6 h-6 opacity-80" }
|
|
/>
|
|
) }
|
|
</button>
|
|
</Link>
|
|
);
|
|
}
|
|
if (action.type === "link" || action.type === "linkExternal") {
|
|
element = (
|
|
<Link
|
|
key={ index }
|
|
href={ action.link ? action.link : "/" }
|
|
data-tina-field={ tinaField(action) }
|
|
className={ "group inline-flex items-center font-semibold text-lg transition duration-150 ease-out text-white hover:text-gray-50" }
|
|
style={ {
|
|
textShadow: "0 3px 7px rgba(var(--color-rgb-blue-400),0.2)"
|
|
} }
|
|
>
|
|
{ action.label }
|
|
{ action.icon && (
|
|
<BiRightArrowAlt className={ "ml-0 mr-0 w-6 h-6 opacity-80" } />
|
|
) }
|
|
</Link>
|
|
);
|
|
}
|
|
return element;
|
|
}) }
|
|
</div>
|
|
);
|
|
};
|