@theguild/components
Version:
236 lines (235 loc) • 8 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { cn } from "../../cn";
import { siteOrigin } from "../../constants";
import { HiveCombinationMark } from "../../logos";
import { FOUR_MAIN_PRODUCTS, SIX_HIGHLIGHTED_PRODUCTS } from "../../products";
import { Anchor } from "../anchor";
import { ContactTextLink } from "../contact-us";
import {
CSAStarLevelOneIcon,
DiscordIcon,
GitHubIcon,
LinkedInIcon,
TwitterIcon,
YouTubeIcon
} from "../icons/index";
function HiveFooter({
className,
logo = /* @__PURE__ */ jsx(HiveCombinationMark, { className: "h-8 w-auto" }),
href = `${siteOrigin}/`,
description = "Open-source GraphQL management platform",
items
}) {
items = { ...HiveFooter.DEFAULT_ITEMS, ...items };
return /* @__PURE__ */ jsxs("footer", { className: cn("relative flex justify-center px-4 py-6 xl:px-[120px]", className), children: [
/* @__PURE__ */ jsxs("div", { className: "mx-4 grid w-full max-w-[75rem] grid-cols-1 gap-x-6 text-green-800 max-lg:gap-y-16 sm:grid-cols-4 lg:gap-x-8 xl:gap-x-10 dark:text-neutral-400", children: [
/* @__PURE__ */ jsxs("div", { className: "max-lg:col-span-full", children: [
/* @__PURE__ */ jsx(
Anchor,
{
href,
className: "hive-focus -m-1.5 flex rounded p-1.5 text-green-1000 dark:text-white",
children: logo
}
),
/* @__PURE__ */ jsx("p", { className: "mt-6 lg:mt-8", children: description })
] }),
/* @__PURE__ */ jsxs("div", { className: "col-span-full grid grid-flow-row grid-cols-2 justify-stretch gap-6 text-sm sm:col-span-4 sm:grid-cols-3 lg:col-span-3 lg:pb-12 lg:text-base", children: [
/* @__PURE__ */ jsx(List, { heading: "Products", links: productLinks }),
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[inherit]", children: [
/* @__PURE__ */ jsx(List, { heading: "Developer", links: items.developer }),
/* @__PURE__ */ jsx(List, { heading: "Resources", links: items.resources })
] }),
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[inherit]", children: [
/* @__PURE__ */ jsx(List, { heading: "Company", links: items.company }),
items.links?.map((link, i) => /* @__PURE__ */ jsx(
Anchor,
{
className: "hive-focus -m-2 rounded p-2 font-medium hover:text-blue-700 hover:underline dark:hover:text-blue-100",
...link
},
i
)),
/* @__PURE__ */ jsx(ContactTextLink, {})
] }),
/* @__PURE__ */ jsx(CSAStarLink, { className: "sm:col-start-[-1] lg:col-start-[-2]" })
] }),
/* @__PURE__ */ jsxs("div", { className: "col-span-full flex flex-wrap justify-between gap-x-[inherit] gap-y-8 lg:w-full lg:pb-2 lg:pt-8", children: [
/* @__PURE__ */ jsx("div", { className: "flex gap-6 lg:order-1", children: SOCIAL_ICONS.map(({ icon: Icon, ...iconProps }) => /* @__PURE__ */ jsx(
Anchor,
{
className: "hive-focus -m-1 rounded-md p-1 hover:text-blue-700 dark:hover:text-blue-100",
...iconProps,
children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-auto" })
},
iconProps.title
)) }),
/* @__PURE__ */ jsxs("p", { className: "text-sm", children: [
"\xA9 ",
(/* @__PURE__ */ new Date()).getFullYear(),
" The Guild"
] })
] })
] }),
/* @__PURE__ */ jsx(DecorationArch, { className: "pointer-events-none absolute bottom-0 left-0 hidden mix-blend-multiply lg:block dark:opacity-5 dark:mix-blend-normal" })
] });
}
function List({
heading,
links,
className
}) {
if (!links?.length) return null;
return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-y-3 text-nowrap lg:gap-y-4", className), children: [
/* @__PURE__ */ jsx("h3", { className: "font-medium dark:text-white", children: heading }),
/* @__PURE__ */ jsx("ul", { className: "contents", children: links.map((link, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
Anchor,
{
...link,
className: "hive-focus -m-2 block rounded p-2 hover:text-blue-700 hover:underline dark:hover:text-blue-100"
}
) }, i)) })
] });
}
const DEFAULT_ITEMS = {
developer: [
{
children: "Documentation",
title: "Read the docs",
href: "/docs"
},
{
children: "Hive Status",
title: "Check Hive status",
href: "https://status.graphql-hive.com/"
},
{
children: "Hive Updates",
title: "Read most recent developments from Hive",
href: "https://the-guild.dev/graphql/hive/product-updates"
},
{
children: "Blog",
title: "Read our blog",
href: "https://the-guild.dev/blog"
}
],
company: [
{
children: "About",
title: "Learn more about us",
href: "https://the-guild.dev/about-us"
},
{
children: "Brand Assets",
title: "Brand Assets",
href: "https://the-guild.dev/logos"
},
{
children: "Newsletter",
title: "Newsletter",
href: "https://the-guild.dev/newsletter"
}
],
resources: [],
links: [
{
children: "OSS Friends",
href: "https://the-guild.dev/graphql/hive/oss-friends"
},
{
children: "Pricing",
href: "https://the-guild.dev/graphql/hive#pricing"
}
]
};
HiveFooter.DEFAULT_ITEMS = DEFAULT_ITEMS;
const SOCIAL_ICONS = [
{
icon: GitHubIcon,
title: "Check our GitHub account",
href: "https://github.com/the-guild-org"
},
{
icon: TwitterIcon,
title: "Visit our Twitter",
href: "https://twitter.com/TheGuildDev"
},
{
icon: LinkedInIcon,
title: "Visit our LinkedIn",
href: "https://linkedin.com/company/the-guild-software"
},
{
icon: DiscordIcon,
title: "Reach us on Discord",
href: "https://discord.com/invite/xud7bH9"
},
{
icon: YouTubeIcon,
title: "Watch Our Videos",
href: "https://youtube.com/watch?v=d_GBgH-L5c4&list=PLhCf3AUOg4PgQoY_A6xWDQ70yaNtPYtZd"
}
];
const productLinks = [...FOUR_MAIN_PRODUCTS, ...SIX_HIGHLIGHTED_PRODUCTS].map(
({ name, href, title }) => ({
children: name,
href,
title
})
);
function DecorationArch(props) {
return /* @__PURE__ */ jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: 360,
height: 360,
viewBox: "0 0 360 360",
fill: "none",
...props,
children: [
/* @__PURE__ */ jsx(
"path",
{
d: "M360 159.793a39.152 39.152 0 00-11.468-27.672l-56.99-56.99-6.673-6.673-56.99-56.99A39.153 39.153 0 00200.207 0H0v75.131h226.157c32.428 0 58.712 26.284 58.712 58.712V360H360V159.793z",
fill: "url(#paint0_linear_711_2541)"
}
),
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
"linearGradient",
{
id: "paint0_linear_711_2541",
x1: 180,
y1: -786805e-11,
x2: 180,
y2: 360,
gradientUnits: "userSpaceOnUse",
children: [
/* @__PURE__ */ jsx("stop", { stopColor: "#C1D3D7" }),
/* @__PURE__ */ jsx("stop", { offset: 1, stopColor: "#86B6C1" })
]
}
) })
]
}
);
}
function CSAStarLink({ className }) {
return /* @__PURE__ */ jsx(
"a",
{
href: "https://cloudsecurityalliance.org/star/registry/software-products-guild-ltd-the-guild/services/graphql-hive",
target: "_blank",
rel: "noreferrer noopener",
className: cn(
"hive-focus w-fit rounded-full focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-[rgb(var(--nextra-bg))]",
className
),
children: /* @__PURE__ */ jsx(CSAStarLevelOneIcon, { className: "size-20 lg:size-[120px] dark:opacity-95" })
}
);
}
export {
HiveFooter
};