Linted the whole project with eslint
This commit was merged in pull request #3.
This commit is contained in:
@@ -4,109 +4,143 @@ 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 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:
|
||||
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",
|
||||
},
|
||||
};
|
||||
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;
|
||||
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"
|
||||
>
|
||||
</Link>
|
||||
<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"]
|
||||
}`}
|
||||
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` }
|
||||
/>
|
||||
</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`}
|
||||
></div>
|
||||
</Container>
|
||||
</footer>
|
||||
);
|
||||
</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"
|
||||
}
|
||||
]
|
||||
}]
|
||||
};
|
||||
@@ -3,90 +3,90 @@ import { Fragment, useState } from "react";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
|
||||
export const RawRenderer = ({ rawData, parentColor }) => {
|
||||
const buttonColorClasses = {
|
||||
blue: "text-blue-500",
|
||||
teal: "text-teal-500",
|
||||
green: "text-green-500",
|
||||
red: "text-red-500",
|
||||
pink: "text-pink-500",
|
||||
purple: "text-purple-500",
|
||||
orange: "text-orange-500",
|
||||
yellow: "text-yellow-600",
|
||||
};
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const buttonColorClasses = {
|
||||
blue: "text-blue-500",
|
||||
teal: "text-teal-500",
|
||||
green: "text-green-500",
|
||||
red: "text-red-500",
|
||||
pink: "text-pink-500",
|
||||
purple: "text-purple-500",
|
||||
orange: "text-orange-500",
|
||||
yellow: "text-yellow-600"
|
||||
};
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
function closeModal() {
|
||||
setIsOpen(false);
|
||||
}
|
||||
function closeModal() {
|
||||
setIsOpen(false);
|
||||
}
|
||||
|
||||
function openModal() {
|
||||
setIsOpen(true);
|
||||
}
|
||||
function openModal() {
|
||||
setIsOpen(true);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={openModal}
|
||||
className={`z-10 relative flex items-center px-5 py-2 mx-3 my-2 font-semibold shadow-sm text-sm transition duration-150 ease-out rounded transform focus:shadow-outline focus:outline-none whitespace-nowrap opacity-80 hover:opacity-100 shadow-md ${
|
||||
buttonColorClasses[buttonColorClasses.blue]
|
||||
}`}
|
||||
>
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={ openModal }
|
||||
className={ `z-10 relative flex items-center px-5 py-2 mx-3 my-2 font-semibold shadow-sm text-sm transition duration-150 ease-out rounded transform focus:shadow-outline focus:outline-none whitespace-nowrap opacity-80 hover:opacity-100 shadow-md ${
|
||||
buttonColorClasses[buttonColorClasses.blue]
|
||||
}` }
|
||||
>
|
||||
View Raw Data
|
||||
<span
|
||||
className={`absolute w-full h-full left-0 top-0 rounded -z-1 ${
|
||||
parentColor === "primary"
|
||||
? `bg-white opacity-80`
|
||||
: `bg-current opacity-15`
|
||||
}`}
|
||||
></span>
|
||||
</button>
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog
|
||||
as="div"
|
||||
className="fixed inset-0 z-10 overflow-y-auto"
|
||||
onClose={closeModal}
|
||||
>
|
||||
<div className="min-h-screen max-h-screen px-4 py-12 text-center flex flex-col items-center justify-center">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-out duration-300"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="">
|
||||
<Dialog.Overlay className="fixed inset-0 bg-gradient-to-br from-gray-800 to-gray-1000 opacity-80" />
|
||||
</div>
|
||||
</Transition.Child>
|
||||
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<div className="flex-1 w-full prose dark:prose-dark max-w-3xl p-6 overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-gray-1000 shadow-xl rounded-xl inline-flex flex-col max-h-full">
|
||||
<pre className="flex-1 overflow-y-auto">
|
||||
<code>{JSON.stringify(rawData, null, 2)}</code>
|
||||
</pre>
|
||||
<button
|
||||
type="button"
|
||||
className="flex-0 font-semibold text-lg transition duration-150 ease-out opacity-80 hover:opacity-100"
|
||||
onClick={closeModal}
|
||||
<span
|
||||
className={ `absolute w-full h-full left-0 top-0 rounded -z-1 ${
|
||||
parentColor === "primary"
|
||||
? "bg-white opacity-80"
|
||||
: "bg-current opacity-15"
|
||||
}` }
|
||||
/>
|
||||
</button>
|
||||
<Transition appear show={ isOpen } as={ Fragment }>
|
||||
<Dialog
|
||||
as="div"
|
||||
className="fixed inset-0 z-10 overflow-y-auto"
|
||||
onClose={ closeModal }
|
||||
>
|
||||
<div className="min-h-screen max-h-screen px-4 py-12 text-center flex flex-col items-center justify-center">
|
||||
<Transition.Child
|
||||
as={ Fragment }
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-out duration-300"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="">
|
||||
<Dialog.Overlay className="fixed inset-0 bg-gradient-to-br from-gray-800 to-gray-1000 opacity-80" />
|
||||
</div>
|
||||
</Transition.Child>
|
||||
|
||||
<Transition.Child
|
||||
as={ Fragment }
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<div className="flex-1 w-full prose dark:prose-dark max-w-3xl p-6 overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-gray-1000 shadow-xl rounded-xl inline-flex flex-col max-h-full">
|
||||
<pre className="flex-1 overflow-y-auto">
|
||||
<code>{ JSON.stringify(rawData, null, 2) }</code>
|
||||
</pre>
|
||||
<button
|
||||
type="button"
|
||||
className="flex-0 font-semibold text-lg transition duration-150 ease-out opacity-80 hover:opacity-100"
|
||||
onClick={ closeModal }
|
||||
>
|
||||
Great, thanks!
|
||||
</button>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</>
|
||||
);
|
||||
</button>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user