mautourco-components 0.1.1

package/src/components/molecules/UserCard/UserCard.tsx

@@ -0,0 +1,173 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Avatar } from "../../atoms/Avatar/Avatar";
+
+type User = {
+  name: string;
+  agency: string;
+  isAdmin: boolean;
+};
+
+type Agency = {
+  id: number;
+  name: string;
+  localisation: string;
+};
+
+export interface UserCardProps {
+  user: User;
+  agencies: Agency[];
+  onSelectAgency?: (agency: Agency) => void;
+  selectedAgency?: Agency; // ✅ keep type as Agency
+  className?: string;
+}
+
+export const UserCard: React.FC<UserCardProps> = ({
+  user,
+  agencies,
+  onSelectAgency,
+  selectedAgency,
+  className = "",
+}) => {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const rootRef = useRef<HTMLDivElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!user.isAdmin || !open) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open, user.isAdmin]);
+
+  // Auto-focus search input when dropdown opens
+  useEffect(() => {
+    if (user.isAdmin && open) setTimeout(() => searchRef.current?.focus(), 0);
+  }, [open, user.isAdmin]);
+
+  // Filter agencies based on query
+  const filteredAgencies = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return agencies;
+    return agencies.filter(
+      (a) =>
+        a.name.toLowerCase().includes(q) ||
+        a.localisation.toLowerCase().includes(q)
+    );
+  }, [agencies, query]);
+
+  const handleSelect = (a: Agency) => {
+    onSelectAgency?.(a);
+    setOpen(false);
+    setQuery("");
+  };
+
+  return (
+    <div ref={rootRef} className={`relative inline-flex items-center gap-3 ${className} ${user.isAdmin ? "cursor-pointer rounded-[11px] border border-[#D9D9D9] bg-white px-[13px] py-2" : ""}`}>
+      {/* Greeting */}
+      <div className="flex items-center gap-3">
+        <Avatar name={user.name} size="md" shape="circle" />
+        <div className="flex flex-col leading-tight">
+          <div className="text-[13px] text-muted-foreground">
+            Welcome back,{" "}
+            <span className="font-medium text-foreground">{user.name}</span>{" "}
+            <span aria-hidden>👋</span>
+          </div>
+          <div className="text-[13px] font-semibold text-foreground">
+            {selectedAgency ? selectedAgency.name : user.agency}
+          </div>
+        </div>
+      </div>
+
+      {/* Admin-only: Dropdown selector */}
+      {user.isAdmin && (
+        <>
+          <button
+            type="button"
+            aria-expanded={open}
+            aria-haspopup="listbox"
+            onClick={() => setOpen((v) => !v)}
+            className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-teal-600 text-white shadow-[0_2px_6px_rgba(0,0,0,0.15)] outline-none focus-visible:ring-2 focus-visible:ring-teal-300"
+            title="Open agency selector"
+          >
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+              className={`transition-transform ${open ? "rotate-180" : ""}`}
+            >
+              <path
+                d="M6 9l6 6 6-6"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </button>
+
+          {open && (
+            <div className="absolute right-0 top-12 z-50 w-[340px] rounded-2xl border border-black/5 bg-white p-3 shadow-[0_12px_30px_rgba(0,0,0,0.15)]">
+              {/* Search */}
+              <div className="relative mb-3">
+                <input
+                  ref={searchRef}
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder="Search"
+                  className="w-full rounded-xl border border-black/10 bg-white px-10 py-2 text-sm outline-none focus:border-black/20 shadow-[inset_0_1px_2px_rgba(0,0,0,0.06)]"
+                />
+                <div className="absolute -translate-y-1/2 pointer-events-none left-3 top-1/2">
+                  <svg width="18" height="18" viewBox="0 0 24 24">
+                    <path
+                      d="M21 21l-4.3-4.3M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15z"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.6"
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                </div>
+              </div>
+
+              {/* Agency List */}
+              <ul role="listbox" className="pr-1 overflow-auto max-h-64">
+                {filteredAgencies.map((a) => {
+                  const isActive = selectedAgency?.id === a.id;
+                  return (
+                    <li key={a.id}>
+                      <button
+                        type="button"
+                        onClick={() => handleSelect(a)}
+                        className={`flex w-full items-center justify-between gap-3 rounded-lg px-2 py-2 text-left hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-300 ${
+                          isActive ? "bg-black/[0.04]" : ""
+                        }`}
+                        aria-selected={isActive}
+                        role="option"
+                      >
+                        <span className="text-[14px]">{a.name}</span>
+                        <span className="text-[13px] font-semibold">
+                          {a.localisation}
+                        </span>
+                      </button>
+                    </li>
+                  );
+                })}
+                {filteredAgencies.length === 0 && (
+                  <li className="px-2 py-6 text-sm text-center text-muted-foreground">
+                    No results
+                  </li>
+                )}
+              </ul>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +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> },
+];

package/src/components/organisms/TopNavigation/DesktopNav.tsx

@@ -0,0 +1,122 @@
+import Button from "../../atoms/Button/Button";
+import { UserCard } from "../../molecules/UserCard/UserCard";
+
+type Link = {
+  label: string;
+  route: string;
+  isButton?: boolean;
+  disabled?: boolean;
+};
+
+type User = {
+  name: string;
+  agency: string;
+  isAdmin: boolean;
+};
+
+type Agency = {
+  id: number;
+  name: string;
+  localisation: string;
+};
+
+export interface DesktopNavProps {
+  links: Link[];
+  onLinkClick?: (link: Link) => void;
+  onLogin?: () => void;
+  onLogout?: () => void;
+  user?: User;
+  active?: string;
+  logoUrl: string | React.FC<React.SVGProps<SVGSVGElement>>;
+  homeUrl?: string;
+  selectedAgency?: Agency;
+  onAgencyChange?: (agency: Agency) => void;
+  agencies?: Agency[];
+  className?: string;
+}
+
+export const DesktopNav: React.FC<DesktopNavProps> = ({
+  links,
+  onLinkClick,
+  onLogin,
+  onLogout,
+  user,
+  active,
+  logoUrl,
+  homeUrl,
+  selectedAgency,
+  onAgencyChange,
+  agencies,
+  className = "",
+}) => {
+  const Logo = typeof logoUrl === "function" ? logoUrl : null;
+
+  const handleLogoClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    onLinkClick?.({ label: "Home", route: homeUrl ?? "/" });
+  };
+
+  return (
+    <header className="header">
+      <div className="header-logo">
+        <a href={homeUrl ?? "/"} onClick={handleLogoClick} className="header-logo__link">
+          {Logo ? (
+            <Logo className="header-logo__image" />
+          ) : (
+            <img
+              src={logoUrl as string}
+              alt="Mautourco"
+              className="header-logo__image"
+              draggable={false}
+            />
+          )}
+        </a>
+      </div>
+      <nav className="header-nav">
+        {/* Menu desktop */}
+        <ul className="header-nav__items">
+          {links?.map((it) => {
+            const isActive = it.label === active;
+
+            return (
+              <li
+                key={it.label}
+                className={`header__item ${isActive ? "header__item--active" : ""}`}
+              >
+                <a
+                  href={it.route}
+                  className="header__item__link"
+                >
+                  {it.isButton ? (
+                    <Button size="sm" variant="outline-secondary">
+                      {it.label}
+                    </Button>
+                  ) : (
+                    <>{it.label}</>
+                  )}
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+
+        <div className={`header-nav__user-section ${user ? "header-nav__user-connected-section" : ""}`}>
+          {user ? (
+          <div className="header-nav__user-container">
+            <UserCard
+              user={user}
+              agencies={agencies || []}
+              selectedAgency={selectedAgency}
+              onSelectAgency={onAgencyChange}
+            />
+          </div>
+          ) : (
+            <Button size="sm" variant="secondary" onClick={onLogin}>
+              Login
+            </Button>
+          )}
+        </div>
+      </nav>
+    </header>
+  );
+};