From 638fd95556c03ef88445012dec26913da3212358 Mon Sep 17 00:00:00 2001
From: zuramai <saugi.dev@gmail.com>
Date: Fri, 15 Dec 2023 08:26:39 +0700
Subject: [PATCH] feat(example): footer with logo

---
 .../src/stories/examples/Footer.stories.tsx   | 60 +++++++++++++++++--
 1 file changed, 56 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/stories/examples/Footer.stories.tsx b/packages/ui/src/stories/examples/Footer.stories.tsx
index 7fbef57..0939eb1 100644
--- 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>
     )
-}
+}
\ No newline at end of file