feat(example): footer with logo

bootwindui · Dec 15, 2023 · 638fd95 · 638fd95
1 parent 62f5a7a
commit 638fd95
Showing 1 changed file with 56 additions and 4 deletions.
diff --git a/packages/ui/src/stories/examples/Footer.stories.tsx b/packages/ui/src/stories/examples/Footer.stories.tsx
@@ -2,6 +2,7 @@ import { Meta } from "@storybook/react";
 import { Card } from '@bootwind/card'
 import { Table, TableBody, TableCell, TableRow } from '@bootwind/table'
 import { HiEnvelope } from 'react-icons/hi2'
+import { BiLogoDribbble, BiLogoFacebook, BiLogoFacebookCircle, BiLogoFigma, BiLogoWhatsapp, BiLogoYoutube } from 'react-icons/bi'
 import { Input } from '@bootwind/forms'
 import { Button } from '@bootwind/button'
 
@@ -54,10 +55,61 @@ export const FooterWithNewsletter = () => {
         </footer>
     )
 }
-export const FooterWithMenu = () => {
-    return (
-        <footer>
+const SocialMediaIcons = () => (
+    <div className="social-media">
+        <ul className="flex gap-3">
+            {
+            [<BiLogoFacebookCircle/>, <BiLogoYoutube/>, <BiLogoDribbble/>, <BiLogoFigma/>, <BiLogoWhatsapp/>].map(logo => {
+                return (
+                <li>
+                    <a href="#" className="p-3 bg-indigo-100 block rounded-full">
+                        {logo}
+                    </a>
+                </li>
+                )
+                })
+            }
+        </ul>
+    </div>
+)
 
+export const FooterWithLogo = () => {
+    return (
+        <footer className="py-8 border-t color-default">
+            <div className="container mx-auto">
+                <section className="footer-top grid lg:grid-cols-2 ">
+                    <div className="footer-left pr-48">
+                        <h4 className="font-bold text-lg mb-5">Logo</h4>
+                        <p className="mb-8">
+                        We ara a lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat... Read More
+                        </p>
+                        <SocialMediaIcons/>
+                    </div>
+                    <div className="footer-menus grid lg:grid-cols-3">
+                        {
+                            Object.keys(menus).map(menu => (
+                                <div className="footer-menu">
+                                    <div className="footer-menu-title font-bold mb-5">
+                                        <h4>{menu}</h4>
+                                    </div>
+                                    <div className="footer-menu-items ">
+                                            {menus[menu as keyof typeof menus].map(item => {
+                                                return (
+                                                    <div className="footer-menu-item mb-5">
+                                                        <a href="#" className="color-default">{item}</a>
+                                                    </div>
+                                                )
+                                            })}
+                                    </div>
+                                </div>
+                            ))
+                        }
+                    </div>
+                </section>
+                <section className="footer-copyright text-center py-5">
+                    &copy; 2000-2023, All Rights Reserved
+                </section>
+            </div>
         </footer>
     )
-}
+}