diff --git a/src/components/FooterFull.tsx b/src/components/FooterFull.tsx index c84cafb3..807af0ef 100644 --- a/src/components/FooterFull.tsx +++ b/src/components/FooterFull.tsx @@ -1,6 +1,7 @@ import styled from 'styled-components' import { mqs } from '@src/breakpoints' +import { type FooterFragment } from '@src/generated/graphqlDirectus' import { BasicFooter, MinAltFooter } from './BasicFooter' import { FooterNav } from './FooterNav' @@ -21,11 +22,13 @@ export enum HeaderVariant { } export function FullFooter({ + footerData, className, variant = FooterVariant.withNav, }: { className?: string variant?: FooterVariant + footerData: Nullable }) { if (variant === FooterVariant.none) { return null @@ -55,7 +58,7 @@ export function FullFooter({ role="contentinfo" className="relative z-20 flex flex-col gap-y-xxxlarge pt-xxxxlarge" > - {showNav && } + {showNav && } diff --git a/src/components/FooterNav.tsx b/src/components/FooterNav.tsx index 96c7a826..ab6c86f2 100644 --- a/src/components/FooterNav.tsx +++ b/src/components/FooterNav.tsx @@ -1,115 +1,16 @@ -import { type ComponentProps, type ReactNode } from 'react' - import Link from 'next/link' import styled from 'styled-components' -import { type ReadonlyDeep } from 'type-fest' import { mqs } from '@src/breakpoints' -import { DISCORD_LINK } from '@src/consts' +import { + type FooterFragment, + type FooterLinkFragment, +} from '@src/generated/graphqlDirectus' import { FullPageWidth } from './layout/LayoutHelpers' import { NewsletterSignupForm } from './NewsletterSignupForm' -type NavItemT = { - heading: ReactNode - links: ComponentProps[] -} - -const navItems = [ - { - heading: 'Product', - links: [ - { - children: 'Login', - href: 'https://app.plural.sh/login', - target: '_blank', - }, - { - children: 'GitHub', - href: 'https://github.com/pluralsh/plural', - target: '_blank', - }, - { - children: 'Pricing', - href: '/pricing', - }, - { - children: 'Support', - href: '/contact', - }, - ], - }, - { - heading: 'Company', - links: [ - { - children: 'About', - href: '/about', - }, - { - children: 'Careers', - href: '/careers', - }, - { - children: 'In the news', - href: 'https://www.plural.sh/blog', - target: '_blank', - }, - ], - }, - { - heading: 'Resources', - links: [ - { - children: 'Docs', - href: 'https://docs.plural.sh', - target: '_blank', - }, - { - children: 'Blog', - href: 'https://www.plural.sh/blog', - target: '_blank', - }, - { - children: 'Releases', - href: 'https://github.com/pluralsh/plural/releases', - target: '_blank', - }, - // { - // children: 'Security & Trust Portal', - // href: 'https://github.com/pluralsh/plural/releases', - // target: '_blank', - // }, - ] as const, - }, - { - heading: 'Contact', - links: [ - { - children: 'Discord', - href: DISCORD_LINK, - target: '_blank', - }, - { - children: 'Twitter', - href: 'https://www.twitter.com/plural_sh', - target: '_blank', - }, - { - children: 'LinkedIn', - href: 'https://www.linkedin.com/company/pluralsh', - target: '_blank', - }, - { - children: 'Email', - href: '/contact', - target: '_blank', - }, - ], - }, -] as const satisfies ReadonlyDeep - const NavSections = styled.ul(({ theme }) => ({ ...theme.partials.reset.list, display: 'grid', @@ -149,6 +50,7 @@ const NavItems = styled.ul(({ theme }) => ({ flexDirection: 'column', gap: theme.spacing.xsmall, })) + const NavItem = styled.li(({ theme }) => ({ ...theme.partials.reset.li, margin: 0, @@ -166,29 +68,83 @@ export const FooterNavLink = styled(Link)(({ theme }) => ({ }, })) -export const FooterNav = styled(({ ...props }: ComponentProps<'div'>) => ( -
- - - {navItems.map((navItem) => ( - - {navItem.heading} - - {navItem.links.map((link) => ( - - - - ))} - +export function FooterNav({ + footerData, +}: { + footerData: Nullable +}) { + if (!footerData) return null + + return ( + + + + + + + + + + + + + ) +} + +const sanitizeFooterLinks = ( + links: Nullable< + Nullable<{ footer_links_id?: Nullable }>[] + > +) => + links + ?.filter((link): link is { footer_links_id: FooterLinkFragment } => !!link) + .map((link) => ({ + name: link.footer_links_id?.name ?? '', + url: link.footer_links_id?.url ?? '', + })) ?? [] + +function FooterColumn({ + title, + links, +}: { + title: Nullable + links: { name: string; url: string }[] +}) { + if (!title) return null + + return ( + + {title} + + {links?.map((link) => ( + + + {link?.name} + + ))} - - - - - -
-))(({ theme }) => { + + + ) +} + +const FooterNavWrapSC = styled.div(({ theme }) => { const outlineOffset = -4 return { diff --git a/src/components/PrimaryPage.tsx b/src/components/PrimaryPage.tsx index 28457b55..b9aa463d 100644 --- a/src/components/PrimaryPage.tsx +++ b/src/components/PrimaryPage.tsx @@ -51,7 +51,10 @@ export default function PrimaryPage({ /> {children} - + diff --git a/src/generated/graphqlDirectus.ts b/src/generated/graphqlDirectus.ts index e21cee6e..54e5f4a0 100644 --- a/src/generated/graphqlDirectus.ts +++ b/src/generated/graphqlDirectus.ts @@ -66,6 +66,16 @@ export type Mutation = { create_customer_quote_items: Array; create_events_item?: Maybe; create_events_items: Array; + create_footer_footer_links_1_item?: Maybe; + create_footer_footer_links_1_items: Array; + create_footer_footer_links_2_item?: Maybe; + create_footer_footer_links_2_items: Array; + create_footer_footer_links_3_item?: Maybe; + create_footer_footer_links_3_items: Array; + create_footer_footer_links_item?: Maybe; + create_footer_footer_links_items: Array; + create_footer_links_item?: Maybe; + create_footer_links_items: Array; create_hero_item?: Maybe; create_hero_items: Array; create_job_listings_item?: Maybe; @@ -170,6 +180,16 @@ export type Mutation = { delete_customer_quote_items?: Maybe; delete_events_item?: Maybe; delete_events_items?: Maybe; + delete_footer_footer_links_1_item?: Maybe; + delete_footer_footer_links_1_items?: Maybe; + delete_footer_footer_links_2_item?: Maybe; + delete_footer_footer_links_2_items?: Maybe; + delete_footer_footer_links_3_item?: Maybe; + delete_footer_footer_links_3_items?: Maybe; + delete_footer_footer_links_item?: Maybe; + delete_footer_footer_links_items?: Maybe; + delete_footer_links_item?: Maybe; + delete_footer_links_items?: Maybe; delete_hero_item?: Maybe; delete_hero_items?: Maybe; delete_job_listings_item?: Maybe; @@ -294,6 +314,22 @@ export type Mutation = { update_events_batch: Array; update_events_item?: Maybe; update_events_items: Array; + update_footer?: Maybe