@ -5,55 +5,15 @@
import * as React from 'react' ;
import NextLink from 'next/link' ;
import cn from 'classnames' ;
import ButtonLink from 'components/ButtonLink' ;
import { ExternalLink } from 'components/ExternalLink' ;
import { IconFacebookCircle } from 'components/Icon/IconFacebookCircle' ;
import { IconTwitter } from 'components/Icon/IconTwitter' ;
import { IconGitHub } from 'components/Icon/IconGitHub' ;
import { IconNavArrow } from 'components/Icon/IconNavArrow' ;
interface FooterProps {
hideSurvey? : boolean ;
hideBorder? : boolean ;
}
export function Footer ( { hideSurvey = false , hideBorder = false } : FooterProps ) {
export function Footer() {
const socialLinkClasses = 'hover:text-primary dark:text-primary-dark' ;
return (
< >
< div className = "self-stretch w-full" >
{ ! hideSurvey && (
< div className = "mx-auto w-full px-5 sm:px-12 md:px-12 pt-10 md:pt-12 lg:pt-10" >
< hr className = "max-w-7xl mx-auto border-border dark:border-border-dark" / >
< div className = "flex flex-col items-center m-4 p-4" >
< p className = "font-bold text-primary dark:text-primary-dark text-lg mb-4" >
How do you like these docs ?
< / p >
< div >
< ButtonLink
href = "https://www.surveymonkey.co.uk/r/PYRPF3X"
className = "mt-1"
type = "primary"
size = "md"
target = "_blank" >
Take our survey !
< IconNavArrow
displayDirection = "right"
className = "inline ml-1"
/ >
< / ButtonLink >
< / div >
< / div >
< / div >
) }
{ ! hideBorder && (
< hr className = "max-w-7xl mx-auto border-border dark:border-border-dark" / >
) }
< footer
className = { cn (
'text-secondary dark:text-secondary-dark py-12 px-5 sm:px-12 md:px-12 sm:py-12 md:py-16 lg:py-14' ,
hideBorder && 'bg-wash dark:bg-gray-95 lg:pt-0'
) } >
< footer className = { cn ( 'text-secondary dark:text-secondary-dark' ) } >
< div className = "grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-x-12 gap-y-8 max-w-7xl mx-auto" >
< div className = "col-span-2 md:col-span-1 justify-items-start mt-3.5 text-left" >
< ExternalLink
@ -336,21 +296,15 @@ export function Footer({hideSurvey = false, hideBorder = false}: FooterProps) {
< FooterLink href = "/learn/adding-interactivity" >
Adding Interactivity
< / FooterLink >
< FooterLink href = "/learn/managing-state" >
Managing State
< / FooterLink >
< FooterLink href = "/learn/escape-hatches" >
Escape Hatches
< / FooterLink >
< FooterLink href = "/learn/managing-state" > Managing State < / FooterLink >
< FooterLink href = "/learn/escape-hatches" > Escape Hatches < / FooterLink >
< / div >
< div className = "flex flex-col" >
< FooterLink href = "/reference/react" isHeader = { true } >
API Reference
< / FooterLink >
< FooterLink href = "/reference/react" > React APIs < / FooterLink >
< FooterLink href = "/reference/react-dom" >
React DOM APIs
< / FooterLink >
< FooterLink href = "/reference/react-dom" > React DOM APIs < / FooterLink >
< / div >
< div className = "md:col-start-2 xl:col-start-4 flex flex-col" >
< FooterLink href = "/community" isHeader = { true } >
@ -370,9 +324,7 @@ export function Footer({hideSurvey = false, hideBorder = false}: FooterProps) {
< div className = "flex flex-col" >
< FooterLink isHeader = { true } > More < / FooterLink >
< FooterLink href = "/blog" > Blog < / FooterLink >
< FooterLink href = "https://reactnative.dev/" >
React Native
< / FooterLink >
< FooterLink href = "https://reactnative.dev/" > React Native < / FooterLink >
< FooterLink href = "https://opensource.facebook.com/legal/privacy" >
Privacy
< / FooterLink >
@ -402,8 +354,6 @@ export function Footer({hideSurvey = false, hideBorder = false}: FooterProps) {
< / div >
< / div >
< / footer >
< / div >
< / >
) ;
}