-
-
Notifications
You must be signed in to change notification settings - Fork 421
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: adds footer component * feat: adds the default footer * fix: delete unesed code * feat: adds footerbrand * feat: adds footer with social media icons * fix: deleted unused imports * fix: improve the responsive * feat: adds the section footer sitemap links * style: title standardization * style: chenge the name component from LinkBox to LinkGroup * feat: adds the component footer iconContent * style: change the icon footer at the page * style: adds the display name * feat: adds the footer stories * fix: typo * refactor: improvement the footer Icon * refatore: change the copyright name * refactore: deleted the component footerCol * refactore: refreshing page without footer col component * refactore: refreshing the story page without component footerCol * refactore: improvement at the FooterLink component * refactore: add className in the FooterBrand * feat: add footer svg * fix: delete unused component * feat: add the components in stories to the full page * fix: redundancy * refactor: improve the handling of the href and add the accessibility label * fix: typo * refactor: add label acessibility * refactor: improve the href * fix: typo * style: cleaning up lines and spaces * fix: delete not used aria-label * fix: fix the footer copyright
- Loading branch information
1 parent
39c2d91
commit 7799f15
Showing
13 changed files
with
664 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,198 @@ | ||
import { FC } from 'react'; | ||
import { CodeExample, DemoPage } from './DemoPage'; | ||
import { Footer } from '../../lib/components/Footer'; | ||
import { BsDribbble, BsFacebook, BsGithub, BsInstagram, BsTwitter } from 'react-icons/bs'; | ||
|
||
const FooterPage: FC = () => { | ||
const examples: CodeExample[] = [ | ||
{ | ||
title: 'Default Footer', | ||
code: ( | ||
<Footer> | ||
<Footer.Copyright href="#" by="Flowbite™" year={2022} /> | ||
<Footer.LinkGroup className="mt-3 flex-wrap items-center text-sm sm:mt-0"> | ||
<Footer.Link href="#">About</Footer.Link> | ||
<Footer.Link href="#">Privacy Policy</Footer.Link> | ||
<Footer.Link href="#">Licensing</Footer.Link> | ||
<Footer.Link href="#">Contact</Footer.Link> | ||
</Footer.LinkGroup> | ||
</Footer> | ||
), | ||
}, | ||
{ | ||
title: 'Footer with logo', | ||
code: ( | ||
<Footer className="flex flex-col"> | ||
<div className="w-full justify-between sm:flex sm:items-center sm:justify-between"> | ||
<Footer.Brand | ||
href="https://flowbite.com" | ||
src="https://flowbite.com/docs/images/logo.svg" | ||
alt="Flowbite Logo" | ||
name="Flowbite" | ||
/> | ||
|
||
<Footer.LinkGroup className="mt-3 flex-wrap items-center text-sm sm:mt-0"> | ||
<Footer.Link href="#">About</Footer.Link> | ||
<Footer.Link href="#">Privacy Policy</Footer.Link> | ||
<Footer.Link href="#">Licensing</Footer.Link> | ||
<Footer.Link href="#">Contact</Footer.Link> | ||
</Footer.LinkGroup> | ||
</div> | ||
<hr className="my-6 w-full border-gray-200 p-1 dark:border-gray-700 sm:mx-auto lg:my-8" /> | ||
<Footer.Copyright href="#" by="Flowbite™" year={2022} /> | ||
</Footer> | ||
), | ||
}, | ||
{ | ||
title: 'Footer with social media icons', | ||
code: ( | ||
<Footer className="flex flex-col"> | ||
<div className="grid w-full justify-between sm:flex sm:justify-between md:flex md:grid-cols-1"> | ||
<div> | ||
<Footer.Brand | ||
href="https://flowbite.com" | ||
src="https://flowbite.com/docs/images/logo.svg" | ||
alt="Flowbite Logo" | ||
name="Flowbite" | ||
className="m-6" | ||
/> | ||
</div> | ||
<div className="grid grid-cols-2 gap-8 sm:mt-4 sm:grid-cols-3 sm:gap-6"> | ||
<div> | ||
<h2 className="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">About</h2> | ||
<Footer.LinkGroup className="flex-col"> | ||
<Footer.Link className="mb-4" href="#"> | ||
Flowbite | ||
</Footer.Link> | ||
<Footer.Link className="mb-4" href="#"> | ||
Tailwind CSS | ||
</Footer.Link> | ||
</Footer.LinkGroup> | ||
</div> | ||
<div> | ||
<h2 className="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">Follow us</h2> | ||
<Footer.LinkGroup className="flex-col"> | ||
<Footer.Link className="mb-4" href="#"> | ||
Gihub | ||
</Footer.Link> | ||
<Footer.Link className="mb-4" href="#"> | ||
Discord | ||
</Footer.Link> | ||
</Footer.LinkGroup> | ||
</div> | ||
<div> | ||
<h2 className="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">Legal</h2> | ||
<Footer.LinkGroup className="flex-col"> | ||
<Footer.Link className="mb-4" href="#"> | ||
Privacy Policy | ||
</Footer.Link> | ||
<Footer.Link className="mb-4" href="#"> | ||
Terms & Conditions | ||
</Footer.Link> | ||
</Footer.LinkGroup> | ||
</div> | ||
</div> | ||
</div> | ||
<hr className="my-6 w-full border-gray-200 p-1 dark:border-gray-700 sm:mx-auto lg:my-8" /> | ||
<div className="w-full sm:flex sm:items-center sm:justify-between"> | ||
<Footer.Copyright href="#" by="Flowbite™" year={2022} /> | ||
<div className="mt-4 flex space-x-6 sm:mt-0 sm:justify-center"> | ||
<Footer.Icon href="#" className="text-gray-400 hover:text-gray-900" icon={BsFacebook} /> | ||
<Footer.Icon href="#" className="text-gray-400 hover:text-gray-900" icon={BsInstagram} /> | ||
<Footer.Icon href="#" className="text-gray-400 hover:text-gray-900" icon={BsTwitter} /> | ||
<Footer.Icon href="#" className="text-gray-400 hover:text-gray-900" icon={BsGithub} /> | ||
<Footer.Icon href="#" className="text-gray-400 hover:text-gray-900" icon={BsDribbble} /> | ||
</div> | ||
</div> | ||
</Footer> | ||
), | ||
}, | ||
{ | ||
title: 'Footer sitemap links', | ||
code: ( | ||
<Footer className="flex flex-col bg-gray-800"> | ||
<div className="grid grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4"> | ||
<div> | ||
<h2 className="mb-6 text-sm font-semibold uppercase text-gray-400">Company</h2> | ||
<Footer.LinkGroup className="flex-col"> | ||
<Footer.Link className="mb-4 text-gray-300" href="#"> | ||
About | ||
</Footer.Link> | ||
<Footer.Link className="mb-4 text-gray-300" href="#"> | ||
Careers | ||
</Footer.Link> | ||
<Footer.Link className="mb-4 text-gray-300" href="#"> | ||
Brand Center | ||
</Footer.Link> | ||
<Footer.Link className="mb-4 text-gray-300" href="#"> | ||
Blog | ||
</Footer.Link> | ||
</Footer.LinkGroup> | ||
</div> | ||
<div> | ||
<h2 className="mb-6 text-sm font-semibold uppercase text-gray-400">Download</h2> | ||
<Footer.LinkGroup className="flex-col"> | ||
<Footer.Link className="mb-4 text-gray-300" href="#"> | ||
Discord Server | ||
</Footer.Link> | ||
<Footer.Link className="mb-4 text-gray-300" href="#"> | ||
</Footer.Link> | ||
<Footer.Link className="mb-4 text-gray-300" href="#"> | ||
</Footer.Link> | ||
<Footer.Link className="mb-4 text-gray-300" href="#"> | ||
Contact Us | ||
</Footer.Link> | ||
</Footer.LinkGroup> | ||
</div> | ||
<div> | ||
<h2 className="mb-6 text-sm font-semibold uppercase text-gray-400">Legal</h2> | ||
<Footer.LinkGroup className="flex-col"> | ||
<Footer.Link className="mb-4 text-gray-300" href="#"> | ||
Privacy Policy | ||
</Footer.Link> | ||
<Footer.Link className="mb-4 text-gray-300" href="#"> | ||
Licensing | ||
</Footer.Link> | ||
<Footer.Link className="mb-4 text-gray-300" href="#"> | ||
Terms & Conditions | ||
</Footer.Link> | ||
</Footer.LinkGroup> | ||
</div> | ||
<div> | ||
<h2 className="mb-6 text-sm font-semibold uppercase text-gray-400">Download</h2> | ||
<Footer.LinkGroup className="flex-col"> | ||
<Footer.Link className="mb-4 text-gray-300" href="#"> | ||
iOS | ||
</Footer.Link> | ||
<Footer.Link className="mb-4 text-gray-300" href="#"> | ||
Android | ||
</Footer.Link> | ||
<Footer.Link className="mb-4 text-gray-300" href="#"> | ||
Windows | ||
</Footer.Link> | ||
<Footer.Link className="mb-4 text-gray-300" href="#"> | ||
MacOS | ||
</Footer.Link> | ||
</Footer.LinkGroup> | ||
</div> | ||
</div> | ||
<hr className="my-6 w-full border-gray-200 p-1 dark:border-gray-700 sm:mx-auto lg:my-8" /> | ||
<div className="w-full sm:flex sm:items-center sm:justify-between"> | ||
<Footer.Copyright className="text-gray-300" href="#" by="Flowbite™" year={2022} /> | ||
<div className="mt-4 flex space-x-6 sm:mt-0 sm:justify-center"> | ||
<Footer.Icon href="#" className="text-gray-400 hover:text-white" icon={BsFacebook} /> | ||
<Footer.Icon href="#" className="text-gray-400 hover:text-white" icon={BsInstagram} /> | ||
<Footer.Icon href="#" className="text-gray-400 hover:text-white" icon={BsTwitter} /> | ||
<Footer.Icon href="#" className="text-gray-400 hover:text-white" icon={BsGithub} /> | ||
<Footer.Icon href="#" className="text-gray-400 hover:text-white" icon={BsDribbble} /> | ||
</div> | ||
</div> | ||
</Footer> | ||
), | ||
}, | ||
]; | ||
return <DemoPage examples={examples} />; | ||
}; | ||
export default FooterPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.