Footer

Basic Usage

Add to layout.tsx

import {Footer} from '@/ui'
     
<Footer />

Output

Author

const authorName = YOUR NAME
     
<Footer
	author={authorName}
/>

Output

Author URL

const authorName = YOUR NAME
const authorUrl = LINK TO YOUR WEBSITE
     
<Footer
	author={authorName}
	authorUrl={authorUrl}
/>

Output

Related Links

const footerLinks = [
	{
		href: '/about',
		label: 'About',
	},
	{
		href: '/terms_and_conditions',
		label: 'Terms',
	},
	{
		href: '/privacy_policy',
		label: 'Privacy',
	},
	{
		href: '/contact',
		label: 'Contact',
	},
]
     
<Footer
	footerLinks={footerLinks}
/>

Output

Social Links

Supported links: Twitter, GitHub, LinkedIn, Facebook, Dev, Instagram, YouTube

const socialLinks = [
	{
		id: // 'twitter' || 'github' || 'linkedin' || 'facebook' || 'dev' || 'instagram' || 'youtube',
		value: URL LINK,
	}
]
     
<Footer
	socialLinks={socialLinks}
/>

Output

Custom JSX

<Footer
	author={authorName}
	authorUrl={authorUrl}
	socialLinks={social}
>
	<!-- Add custom JSX/HTML here -->
	<div className='text-center'>
		<h4>JSX or components may be added here</h4>
	</div>
	<!-- END: Add custom JSX/HTML here -->
</Footer>

Output

Back to Top Button

// Back to top button is added by default
				
<Footer
	topButton={false} // disabled
/>