146 lines
6.3 KiB
TypeScript
146 lines
6.3 KiB
TypeScript
import React from "react";
|
|
import Link from "next/link";
|
|
import { FaFacebookF, FaGithub, FaTwitter } from "react-icons/fa";
|
|
import { AiFillInstagram } from "react-icons/ai";
|
|
import { Container } from "../../util/container";
|
|
import { RawRenderer } from "./rawRenderer";
|
|
import { ObjectField } from "@tinacms/schema-tools/dist/types";
|
|
|
|
export const Footer = ({ data, rawData }) => {
|
|
const socialIconClasses = "h-7 w-auto";
|
|
const socialIconColorClasses = {
|
|
blue: "text-blue-500 dark:text-blue-400 hover:text-blue-300",
|
|
teal: "text-teal-500 dark:text-teal-400 hover:text-teal-300",
|
|
green: "text-green-500 dark:text-green-400 hover:text-green-300",
|
|
red: "text-red-500 dark:text-red-400 hover:text-red-300",
|
|
pink: "text-pink-500 dark:text-pink-400 hover:text-pink-300",
|
|
purple: "text-purple-500 dark:text-purple-400 hover:text-purple-300",
|
|
orange: "text-orange-500 dark:text-orange-400 hover:text-orange-300",
|
|
yellow: "text-yellow-500 dark:text-yellow-400 hover:text-yellow-300",
|
|
primary: "text-white opacity-80 hover:opacity-100"
|
|
};
|
|
|
|
const footerColor = {
|
|
default:
|
|
"text-gray-800 from-white to-gray-50 dark:from-gray-900 dark:to-gray-1000",
|
|
primary: {
|
|
blue: "text-white from-blue-500 to-blue-700",
|
|
teal: "text-white from-teal-500 to-teal-600",
|
|
green: "text-white from-green-500 to-green-600",
|
|
red: "text-white from-red-500 to-red-600",
|
|
pink: "text-white from-pink-500 to-pink-600",
|
|
purple: "text-white from-purple-500 to-purple-600",
|
|
orange: "text-white from-orange-500 to-orange-600",
|
|
yellow: "text-white from-yellow-500 to-yellow-600"
|
|
}
|
|
};
|
|
|
|
const footerColorCss = footerColor.default;
|
|
|
|
return (
|
|
<footer className={ `bg-gradient-to-br ${ footerColorCss }` }>
|
|
<Container className="relative" size="small">
|
|
<div className="flex justify-between items-center gap-6 flex-wrap">
|
|
<Link
|
|
href="/"
|
|
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"
|
|
/>
|
|
<div className="flex gap-4">
|
|
{ data.social && data.social.facebook && (
|
|
<a
|
|
className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150"
|
|
href={ data.social.facebook }
|
|
target="_blank"
|
|
>
|
|
<FaFacebookF
|
|
className={ `${ socialIconClasses } ${
|
|
socialIconColorClasses.primary
|
|
}` }
|
|
/>
|
|
</a>
|
|
) }
|
|
{ data.social && data.social.twitter && (
|
|
<a
|
|
className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150"
|
|
href={ data.social.twitter }
|
|
target="_blank"
|
|
>
|
|
<FaTwitter
|
|
className={ `${ socialIconClasses } ${
|
|
socialIconColorClasses.primary
|
|
}` }
|
|
/>
|
|
</a>
|
|
) }
|
|
{ data.social && data.social.instagram && (
|
|
<a
|
|
className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150"
|
|
href={ data.social.instagram }
|
|
target="_blank"
|
|
>
|
|
<AiFillInstagram
|
|
className={ `${ socialIconClasses } ${
|
|
socialIconColorClasses.primary
|
|
}` }
|
|
/>
|
|
</a>
|
|
) }
|
|
{ data.social && data.social.github && (
|
|
<a
|
|
className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150"
|
|
href={ data.social.github }
|
|
target="_blank"
|
|
>
|
|
<FaGithub
|
|
className={ `${ socialIconClasses } ${
|
|
socialIconColorClasses.primary
|
|
}` }
|
|
/>
|
|
</a>
|
|
) }
|
|
</div>
|
|
<RawRenderer parentColor={ data.color } rawData={ rawData } />
|
|
</div>
|
|
<div
|
|
className={ `absolute h-1 bg-gradient-to-r from-transparent ${
|
|
data.color === "primary" ? "via-white" : "via-black dark:via-white"
|
|
} to-transparent top-0 left-4 right-4 opacity-5` }
|
|
/>
|
|
</Container>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
export const footerSchema: ObjectField = {
|
|
type: "object",
|
|
label: "Footer",
|
|
name: "footer",
|
|
fields: [
|
|
{
|
|
type: "object",
|
|
label: "Social Links",
|
|
name: "social",
|
|
fields: [
|
|
{
|
|
type: "string",
|
|
label: "Facebook",
|
|
name: "facebook"
|
|
},
|
|
{
|
|
type: "string",
|
|
label: "Twitter",
|
|
name: "twitter"
|
|
},
|
|
{
|
|
type: "string",
|
|
label: "Instagram",
|
|
name: "instagram"
|
|
},
|
|
{
|
|
type: "string",
|
|
label: "Github",
|
|
name: "github"
|
|
}
|
|
]
|
|
}]
|
|
}; |