Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: adds footer component #59

Merged
merged 34 commits into from
May 5, 2022
Merged

feat: adds footer component #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
49d88d3
feat: adds footer component
mouracamila Apr 19, 2022
2400b28
feat: adds the default footer
mouracamila Apr 20, 2022
4a639b2
fix: delete unesed code
mouracamila Apr 20, 2022
fa3e0d9
feat: adds footerbrand
mouracamila May 2, 2022
7eea404
feat: adds footer with social media icons
mouracamila Apr 26, 2022
325d601
fix: deleted unused imports
mouracamila Apr 26, 2022
c3c8cfb
fix: improve the responsive
mouracamila Apr 27, 2022
5e02888
feat: adds the section footer sitemap links
mouracamila Apr 27, 2022
8cc85ef
style: title standardization
mouracamila Apr 27, 2022
d7ade29
style: chenge the name component from
mouracamila May 2, 2022
51b1fe5
feat: adds the component footer iconContent
mouracamila May 2, 2022
0fc9456
style: change the icon footer at the page
mouracamila May 2, 2022
b2fbc77
style: adds the display name
mouracamila Apr 27, 2022
d7e1b19
feat: adds the footer stories
mouracamila Apr 27, 2022
976b6ae
fix: typo
mouracamila Apr 27, 2022
7ae1049
refactor: improvement the footer Icon
mouracamila May 2, 2022
2296890
refatore: change the copyright name
mouracamila May 2, 2022
d9e1c84
refactore: deleted the component footerCol
mouracamila May 3, 2022
44d2a89
refactore: refreshing page without footer
mouracamila May 3, 2022
98ebd04
refactore: refreshing the story page
mouracamila May 3, 2022
3202361
refactore: improvement at the FooterLink
mouracamila May 3, 2022
7609730
refactore: add className in the FooterBrand
mouracamila May 3, 2022
d72a491
feat: add footer svg
mouracamila May 3, 2022
29074e3
fix: delete unused component
mouracamila May 3, 2022
c1c1a3f
feat: add the components in stories to
mouracamila May 3, 2022
ba5c829
fix: redundancy
mouracamila May 3, 2022
5da0a4c
refactor: improve the handling of the
mouracamila May 3, 2022
57dd964
fix: typo
mouracamila May 3, 2022
d3fbab4
refactor: add label acessibility
mouracamila May 3, 2022
9db2e33
refactor: improve the href
mouracamila May 3, 2022
c6a0bde
fix: typo
mouracamila May 4, 2022
af0ba69
style: cleaning up lines and spaces
mouracamila May 5, 2022
262f178
fix: delete not used aria-label
mouracamila May 5, 2022
17c639c
fix: fix the footer copyright
mouracamila May 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export const decorators = [
<MemoryRouter initialEntries={['/']}>
<Style />
<div className="flex h-screen items-center justify-center">
<div>
<div className="flex w-full items-center justify-center">
<Story />
</div>
</div>
Expand Down
52 changes: 52 additions & 0 deletions public/images/footer-dark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
50 changes: 50 additions & 0 deletions public/images/footer-light.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
198 changes: 198 additions & 0 deletions src/docs/pages/FooterPage.tsx
View file
Open in desktop
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 &amp; 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="#">
Twitter
</Footer.Link>
<Footer.Link className="mb-4 text-gray-300" href="#">
Facebook
</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 &amp; 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;
13 changes: 13 additions & 0 deletions src/docs/routes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
HiTable,
HiUser,
HiOutlineChevronDoubleRight,
HiMinus,
} from 'react-icons/hi';
import { AiOutlineLoading3Quarters } from 'react-icons/ai';

Expand All @@ -36,6 +37,7 @@ import CarouselPage from './pages/CarouselPage';
import DashboardPage from './pages/DashboardPage';
import DropdownPage from './pages/DropdownPage';
import FormsPage from './pages/FormsPage';
import FooterPage from './pages/FooterPage';
import ListGroupPage from './pages/ListGroupPage';
import ModalPage from './pages/ModalPage';
import NavbarPage from './pages/NavbarPage';
Expand Down Expand Up @@ -191,6 +193,17 @@ export const routes: RouteProps[] = [
images: { light: 'forms-light.svg', dark: 'forms-dark.svg' },
},
},
{
title: 'Footer',
icon: HiMinus,
href: '/footer',
component: <FooterPage />,
group: false,
card: {
className: 'w-40',
images: { light: 'footer-light.svg', dark: 'footer-dark.svg' },
},
},
{
title: 'List group',
icon: HiClipboardList,
Expand Down
Loading