|
1 | | -const Footer = () => { |
| 1 | +/** |
| 2 | + * Internal Dependencies. |
| 3 | + */ |
| 4 | +import {sanitize} from '../../../utils/miscellaneous'; |
| 5 | +import { getIconComponentByName } from '../../../utils/icons-map'; |
| 6 | + |
| 7 | +/** |
| 8 | + * External Dependencies. |
| 9 | + */ |
| 10 | +import {isEmpty, isArray} from 'lodash'; |
| 11 | +import Link from 'next/link'; |
| 12 | + |
| 13 | +const Footer = ({footer}) => { |
| 14 | + |
| 15 | + const { copyrightText, footerMenuItems, sidebarOne, sidebarTwo, socialLinks } = footer || {}; |
| 16 | + |
2 | 17 | return ( |
3 | | - <footer > |
4 | | - <a |
5 | | - href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" |
6 | | - target="_blank" |
7 | | - rel="noopener noreferrer" |
8 | | - > |
9 | | - Powered by{' '} |
10 | | - </a> |
| 18 | + <footer className="bg-blue-500 p-6"> |
| 19 | + <div className="container mx-auto"> |
| 20 | + <div className="flex flex-wrap -mx-1 overflow-hidden text-white"> |
| 21 | + {/*Widget One*/} |
| 22 | + <div className="my-1 px-1 w-full overflow-hidden sm:w-full lg:w-1/2 xl:w-1/3"> |
| 23 | + <div dangerouslySetInnerHTML={{ __html: sanitize( sidebarOne ) }}/> |
| 24 | + </div> |
| 25 | + {/*Widget Two*/} |
| 26 | + <div className="my-1 px-1 w-full overflow-hidden sm:w-full lg:w-1/2 xl:w-1/3"> |
| 27 | + <div dangerouslySetInnerHTML={{ __html: sanitize( sidebarTwo ) }}/> |
| 28 | + </div> |
| 29 | + |
| 30 | + {/* Footer Menus*/} |
| 31 | + <div className="my-1 px-1 w-full overflow-hidden sm:w-full lg:w-1/2 xl:w-1/3"> |
| 32 | + { !isEmpty( footerMenuItems ) && isArray( footerMenuItems ) ? ( |
| 33 | + <ul> |
| 34 | + { footerMenuItems.map( menuItem => ( |
| 35 | + <li key={menuItem?.ID}> |
| 36 | + <Link href={menuItem?.url ?? '/'}> |
| 37 | + <a>{menuItem?.title}</a> |
| 38 | + </Link> |
| 39 | + </li> |
| 40 | + )) } |
| 41 | + </ul> |
| 42 | + ) : null } |
| 43 | + </div> |
| 44 | + </div> |
| 45 | + <div className="mb-8 mt-8 w-full flex flex-wrap"> |
| 46 | + {/*Copyright Text*/} |
| 47 | + <div className="w-full md:w-1/2 lg:w-1/4 text-white"> |
| 48 | + { copyrightText ? copyrightText : '© Codeytek Academy 2021' } |
| 49 | + </div> |
| 50 | + <div className="w-full lg:w-3/4 flex justify-end"> |
| 51 | + { !isEmpty( socialLinks ) && isArray( socialLinks ) ? ( |
| 52 | + <ul className="flex item-center"> |
| 53 | + { socialLinks.map( socialLink => ( |
| 54 | + <li key={socialLink?.iconName} className="ml-4"> |
| 55 | + <a href={ socialLink?.iconUrl || '/' } target="_blank" title={socialLink?.iconName}> |
| 56 | + { getIconComponentByName( socialLink?.iconName ) } |
| 57 | + <span className="sr-only">{socialLink?.iconName}</span> |
| 58 | + </a> |
| 59 | + </li> |
| 60 | + ) ) } |
| 61 | + </ul> |
| 62 | + ) : null } |
| 63 | + </div> |
| 64 | + </div> |
| 65 | + </div> |
11 | 66 | </footer> |
12 | 67 | ) |
13 | 68 | } |
|
0 commit comments