mautourco-components 0.2.4 → 0.2.7

package/src/components/organisms/Footer/Footer.tsx

@@ -1,290 +1,290 @@
-import React, { useState } from "react";
-import { Text } from "../../atoms/Typography/Typography";
-import { Link } from "../../atoms/Link/Link";
-import Icon from "../../atoms/Icon/Icon";
-
-type FooterLink = {
-  label: string;
-  href?: string;
-  onClick?: () => void;
-};
-
-type FooterColumn = {
-  id: string;
-  title: string;
-  links: FooterLink[];
-};
-
-type SocialLink = {
-  id: string;
-  icon: React.ReactNode;
-  label: string;
-  href: string;
-};
-
-type ContactBlock = {
-  title: string;
-  addressLines: string[];
-  phone?: string;
-  fax?: string;
-  email?: string;
-};
-
-export interface FooterProps {
-  logo?: React.ReactNode; // SVG or img already styled
-  columns?: FooterColumn[];
-  contact?: ContactBlock;
-  socials?: SocialLink[];
-  className?: string;
-  homeUrl?: string;
-  onLinkClick?: (link: { label: string; route: string }) => void;
-}
-
-export const Footer: React.FC<FooterProps> = ({
-  logo,
-  columns = defaultColumns,
-  contact = defaultContact,
-  socials = defaultSocials,
-  className = "",
-  homeUrl,
-  onLinkClick,
-}) => {
-  const [openSection, setOpenSection] = useState<string | null>(columns[0]?.id);
-
-  const toggleSection = (id: string) => {
-    setOpenSection((prev) => (prev === id ? null : id));
-  };
-
-  const year = new Date().getFullYear();
-
-  return (
-    <footer className="footer">
-      <div className="footer__wrapper">
-        <div className="footer__desktop">
-          <div className="footer__top-row">
-            <div className="footer__content-left">
-              {columns.map((col) => (
-                <div key={col.id} className="footer__column">
-                  <Text
-                    as="h4"
-                    className="footer__column-title"
-                  >
-                    {col.title}
-                  </Text>
-                  <div className="footer__column-links">
-                    {col.links.map((link) => (
-                      <Link
-                        key={link.label}
-                        href={link.href}
-                        onClick={link.onClick}
-                        theme="dark"
-                        className="text-xs no-underline hover:opacity-80"
-                      >
-                        {link.label}
-                      </Link>
-                    ))}
-                  </div>
-                </div>
-              ))}
-
-              <div className="footer__contact">
-                <Text
-                  as="h4"
-                  className="footer__column-title"
-                >
-                  {contact.title}
-                </Text>
-                <div className="footer__contact-info">
-                  {contact.addressLines.map((line) => (
-                    <p key={line}>{line}</p>
-                  ))}
-                  {contact.phone && <p>Tel: {contact.phone}</p>}
-                  {contact.fax && <p>Fax: {contact.fax}</p>}
-                  {contact.email && (
-                    <Link
-                      href={`mailto:${contact.email}`}
-                      theme="dark"
-                      className="text-xs no-underline"
-                    >
-                      {contact.email}
-                    </Link>
-                  )}
-                </div>
-              </div>
-
-         <div className="footer__socials">
-                <Text
-                  as="h4"
-                  className="footer__column-title"
-                >
-                  Socials
-                </Text>
-                <div className="footer__socials-icons">
-                  {socials.map((s) => (
-                    <a
-                      key={s.id}
-                      href={s.href}
-                      aria-label={s.label}
-                      className="footer__social-link"
-                    >
-                      {s.icon}
-                    </a>
-                  ))}
-                </div>
-              </div>
-            </div>
-
-            {logo && (
-              <div className="footer__logo-section">
-                <div className="footer__logo-container">
-                  <a
-                    href={homeUrl ?? "/"}
-                    onClick={(e) => {
-                      e.preventDefault();
-                      onLinkClick?.({ label: "Home", route: homeUrl ?? "/" });
-                    }}
-                  >
-                    {logo}
-                  </a>
-                  <Text
-                    as="p"
-                    className="footer__copyright"
-                  >
-                    © {year} Mautourco, All Rights Reserved
-                  </Text>
-                </div>
-              </div>
-            )}
-          </div>
-
-          {!logo && (
-            <Text as="p" className="footer__copyright-standalone">
-              © {year} Mautourco, All Rights Reserved
-            </Text>
-          )}
-        </div>
-
-        <div className="footer__mobile">
-          {columns.map((col) => (
-            <div key={col.id} className="footer__mobile-section">
-              <button
-                type="button"
-                onClick={() => toggleSection(col.id)}
-                className="footer__mobile-section-button"
-              >
-                <span>{col.title}</span>
-                <span
-                  className={`footer__mobile-section-icon ${
-                    openSection === col.id ? "footer__mobile-section-icon--rotated" : ""
-                  }`}
-                >
-                  <Icon name="chevron-down" size="sm" color="white" />
-                </span>
-              </button>
-              {openSection === col.id && (
-                <div className="footer__mobile-section-content">
-                  {col.links.map((link) => (
-                    <Link
-                      key={link.label}
-                      href={link.href}
-                      onClick={link.onClick}
-                      theme="dark"
-                      className="text-xs no-underline"
-                    >
-                      {link.label}
-                    </Link>
-                  ))}
-                </div>
-              )}
-            </div>
-          ))}
-
-          <div className="footer__mobile-contact">
-            <Text
-              as="h4"
-              className="footer__mobile-contact-title"
-            >
-              {contact.title}
-            </Text>
-            <div className="footer__mobile-contact-info">
-              {contact.addressLines.map((line) => (
-                <p key={line}>{line}</p>
-              ))}
-              {contact.phone && <p>Tel: {contact.phone}</p>}
-              {contact.fax && <p>Fax: {contact.fax}</p>}
-              {contact.email && (
-                <Link
-                  href={`mailto:${contact.email}`}
-                  theme="dark"
-                  className="text-xs no-underline"
-                >
-                  {contact.email}
-                </Link>
-              )}
-            </div>
-          </div>
-
-          <div className="footer__mobile-footer">
-            <a
-              href={homeUrl ?? "/"}
-              onClick={(e) => {
-                e.preventDefault();
-                onLinkClick?.({ label: "Home", route: homeUrl ?? "/" });
-              }}
-            >
-              {logo}
-            </a>
-            <Text as="p" className="footer__mobile-copyright">
-              © {year} Mautourco, All Rights Reserved
-            </Text>
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-};
-
-const defaultColumns: FooterColumn[] = [
-  {
-    id: "menu-1",
-    title: "Menu Title",
-    links: [
-      { label: "Menu Item", href: "#" },
-      { label: "Menu Item", href: "#" },
-      { label: "Menu Item", href: "#" },
-      { label: "Menu Item", href: "#" },
-      { label: "Menu Item", href: "#" },
-      { label: "Menu Item", href: "#" },
-    ],
-  },
-  {
-    id: "menu-2",
-    title: "Menu Title",
-    links: [
-      { label: "Menu Item", href: "#" },
-      { label: "Menu Item", href: "#" },
-      { label: "Menu Item", href: "#" },
-      { label: "Menu Item", href: "#" },
-      { label: "Menu Item", href: "#" },
-      { label: "Menu Item", href: "#" },
-    ],
-  },
-];
-
-const defaultContact: ContactBlock = {
-  title: "Contact Us",
-  addressLines: [
-    "84, Gustave Colin Street,",
-    "Forest Side 74414, Mauritius",
-  ],
-  phone: "+ (230) 604 3000",
-  fax: "+ (230) 674 3720",
-  email: "info@mautourco.com",
-};
-
-const defaultSocials: SocialLink[] = [
-  { id: "fb", label: "Facebook", href: "#", icon: <span></span> },
-  { id: "ig", label: "Instagram", href: "#", icon: <span></span> },
-  { id: "in", label: "LinkedIn", href: "#", icon: <span></span> },
-  { id: "yt", label: "YouTube", href: "#", icon: <span></span> },
-];
+import React, { useState } from "react";
+import { Text } from "../../atoms/Typography/Typography";
+import { Link } from "../../atoms/Link/Link";
+import Icon from "../../atoms/Icon/Icon";
+
+type FooterLink = {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+};
+
+type FooterColumn = {
+  id: string;
+  title: string;
+  links: FooterLink[];
+};
+
+type SocialLink = {
+  id: string;
+  icon: React.ReactNode;
+  label: string;
+  href: string;
+};
+
+type ContactBlock = {
+  title: string;
+  addressLines: string[];
+  phone?: string;
+  fax?: string;
+  email?: string;
+};
+
+export interface FooterProps {
+  logo?: React.ReactNode; // SVG or img already styled
+  columns?: FooterColumn[];
+  contact?: ContactBlock;
+  socials?: SocialLink[];
+  className?: string;
+  homeUrl?: string;
+  onLinkClick?: (link: { label: string; route: string }) => void;
+}
+
+export const Footer: React.FC<FooterProps> = ({
+  logo,
+  columns = defaultColumns,
+  contact = defaultContact,
+  socials = defaultSocials,
+  className = "",
+  homeUrl,
+  onLinkClick,
+}) => {
+  const [openSection, setOpenSection] = useState<string | null>(columns[0]?.id);
+
+  const toggleSection = (id: string) => {
+    setOpenSection((prev) => (prev === id ? null : id));
+  };
+
+  const year = new Date().getFullYear();
+
+  return (
+    <footer className="footer">
+      <div className="footer__wrapper">
+        <div className="footer__desktop">
+          <div className="footer__top-row">
+            <div className="footer__content-left">
+              {columns.map((col) => (
+                <div key={col.id} className="footer__column">
+                  <Text
+                    as="h4"
+                    className="footer__column-title"
+                  >
+                    {col.title}
+                  </Text>
+                  <div className="footer__column-links">
+                    {col.links.map((link) => (
+                      <Link
+                        key={link.label}
+                        href={link.href}
+                        onClick={link.onClick}
+                        theme="dark"
+                        className="text-xs no-underline hover:opacity-80"
+                      >
+                        {link.label}
+                      </Link>
+                    ))}
+                  </div>
+                </div>
+              ))}
+
+              <div className="footer__contact">
+                <Text
+                  as="h4"
+                  className="footer__column-title"
+                >
+                  {contact.title}
+                </Text>
+                <div className="footer__contact-info">
+                  {contact.addressLines.map((line) => (
+                    <p key={line}>{line}</p>
+                  ))}
+                  {contact.phone && <p>Tel: {contact.phone}</p>}
+                  {contact.fax && <p>Fax: {contact.fax}</p>}
+                  {contact.email && (
+                    <Link
+                      href={`mailto:${contact.email}`}
+                      theme="dark"
+                      className="text-xs no-underline"
+                    >
+                      {contact.email}
+                    </Link>
+                  )}
+                </div>
+              </div>
+
+         <div className="footer__socials">
+                <Text
+                  as="h4"
+                  className="footer__column-title"
+                >
+                  Socials
+                </Text>
+                <div className="footer__socials-icons">
+                  {socials.map((s) => (
+                    <a
+                      key={s.id}
+                      href={s.href}
+                      aria-label={s.label}
+                      className="footer__social-link"
+                    >
+                      {s.icon}
+                    </a>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {logo && (
+              <div className="footer__logo-section">
+                <div className="footer__logo-container">
+                  <a
+                    href={homeUrl ?? "/"}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      onLinkClick?.({ label: "Home", route: homeUrl ?? "/" });
+                    }}
+                  >
+                    {logo}
+                  </a>
+                  <Text
+                    as="p"
+                    className="footer__copyright"
+                  >
+                    © {year} Mautourco, All Rights Reserved
+                  </Text>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {!logo && (
+            <Text as="p" className="footer__copyright-standalone">
+              © {year} Mautourco, All Rights Reserved
+            </Text>
+          )}
+        </div>
+
+        <div className="footer__mobile">
+          {columns.map((col) => (
+            <div key={col.id} className="footer__mobile-section">
+              <button
+                type="button"
+                onClick={() => toggleSection(col.id)}
+                className="footer__mobile-section-button"
+              >
+                <span>{col.title}</span>
+                <span
+                  className={`footer__mobile-section-icon ${
+                    openSection === col.id ? "footer__mobile-section-icon--rotated" : ""
+                  }`}
+                >
+                  <Icon name="chevron-down" size="sm" color="white" />
+                </span>
+              </button>
+              {openSection === col.id && (
+                <div className="footer__mobile-section-content">
+                  {col.links.map((link) => (
+                    <Link
+                      key={link.label}
+                      href={link.href}
+                      onClick={link.onClick}
+                      theme="dark"
+                      className="text-xs no-underline"
+                    >
+                      {link.label}
+                    </Link>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+
+          <div className="footer__mobile-contact">
+            <Text
+              as="h4"
+              className="footer__mobile-contact-title"
+            >
+              {contact.title}
+            </Text>
+            <div className="footer__mobile-contact-info">
+              {contact.addressLines.map((line) => (
+                <p key={line}>{line}</p>
+              ))}
+              {contact.phone && <p>Tel: {contact.phone}</p>}
+              {contact.fax && <p>Fax: {contact.fax}</p>}
+              {contact.email && (
+                <Link
+                  href={`mailto:${contact.email}`}
+                  theme="dark"
+                  className="text-xs no-underline"
+                >
+                  {contact.email}
+                </Link>
+              )}
+            </div>
+          </div>
+
+          <div className="footer__mobile-footer">
+            <a
+              href={homeUrl ?? "/"}
+              onClick={(e) => {
+                e.preventDefault();
+                onLinkClick?.({ label: "Home", route: homeUrl ?? "/" });
+              }}
+            >
+              {logo}
+            </a>
+            <Text as="p" className="footer__mobile-copyright">
+              © {year} Mautourco, All Rights Reserved
+            </Text>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+const defaultColumns: FooterColumn[] = [
+  {
+    id: "menu-1",
+    title: "Menu Title",
+    links: [
+      { label: "Menu Item", href: "#" },
+      { label: "Menu Item", href: "#" },
+      { label: "Menu Item", href: "#" },
+      { label: "Menu Item", href: "#" },
+      { label: "Menu Item", href: "#" },
+      { label: "Menu Item", href: "#" },
+    ],
+  },
+  {
+    id: "menu-2",
+    title: "Menu Title",
+    links: [
+      { label: "Menu Item", href: "#" },
+      { label: "Menu Item", href: "#" },
+      { label: "Menu Item", href: "#" },
+      { label: "Menu Item", href: "#" },
+      { label: "Menu Item", href: "#" },
+      { label: "Menu Item", href: "#" },
+    ],
+  },
+];
+
+const defaultContact: ContactBlock = {
+  title: "Contact Us",
+  addressLines: [
+    "84, Gustave Colin Street,",
+    "Forest Side 74414, Mauritius",
+  ],
+  phone: "+ (230) 604 3000",
+  fax: "+ (230) 674 3720",
+  email: "info@mautourco.com",
+};
+
+const defaultSocials: SocialLink[] = [
+  { id: "fb", label: "Facebook", href: "#", icon: <span></span> },
+  { id: "ig", label: "Instagram", href: "#", icon: <span></span> },
+  { id: "in", label: "LinkedIn", href: "#", icon: <span></span> },
+  { id: "yt", label: "YouTube", href: "#", icon: <span></span> },
+];