@skalfa/skalfa-component 1.0.7 → 1.0.9

package/src/modal/Toast.component.tsx

@@ -0,0 +1,124 @@
+"use client"
+
+import { ReactNode, useEffect, useState } from "react";
+import { cn, pcn } from "@utils";
+import { ButtonComponent } from "../button/Button.component";
+
+
+
+type CT = "base" | "backdrop" | "header" | "footer";
+
+export interface ToastProps {
+  show: boolean;
+  onClose: () => void;
+  title?: string | ReactNode;
+  children?: any;
+  footer?: string | ReactNode;
+
+  /** Use custom class with: "backdrop::", "header::", "footer::". */
+  className?: string;
+};
+
+
+
+export function ToastComponent({
+  show,
+  onClose,
+  title,
+  children,
+  footer,
+  className = "",
+}: ToastProps) {
+  const [countdown, setCountdown] = useState(5);
+  const [timerId, setTimerId] = useState<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (show) {
+      setCountdown(5); // Reset countdown saat toast muncul
+      const id = setInterval(() => {
+        setCountdown((prev) => {
+          if (prev <= 1) {
+            clearInterval(id);
+            onClose();
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+      setTimerId(id);
+    }
+    return () => {
+      if (timerId) {
+        clearInterval(timerId);
+      }
+    };
+  }, [show]);
+
+  const handleMouseEnter = () => {
+    if (timerId) {
+      clearInterval(timerId);
+      setTimerId(null);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    const id = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          clearInterval(id);
+          onClose();
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+    setTimerId(id);
+  };
+
+  return (
+    <>
+      <div
+        className={cn(
+          "toast",
+          !show && "translate-y-full opacity-0 scale-y-0",
+          pcn<CT>(className, "base"),
+        )}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        {title && (
+          <div
+            className={cn(
+              "pt-2 px-3 flex justify-between items-center text-foreground",
+              pcn<CT>(className, "header"),
+            )}
+          >
+            <h6 className="font-semibold">{title}</h6>
+
+            <div className="flex gap-2 items-center">
+              <span className="text-xs text-foreground/50">{countdown}</span>
+              <ButtonComponent
+                icon="solid/times"
+                variant="simple"
+                paint="danger"
+                onClick={() => {
+                  clearInterval(timerId || "");
+                  onClose();
+                }}
+                size="sm"
+              />
+            </div>
+          </div>
+        )}
+
+        {show && children}
+
+        {footer && (
+          <div className={cn("modal-footer", pcn<CT>(className, "footer"))}>
+            {show && footer}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

package/src/nav/Bottombar.component.tsx

@@ -0,0 +1,71 @@
+"use client"
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn, pcn, useKeyboardOpen } from "@utils";
+
+export interface BottombarItemProps {
+  icon       :  IconName;
+  path       :  string;
+  activeKey ?:  string;
+}
+
+export interface BottombarProps {
+  active     ?:  string;
+  items      ?:  BottombarItemProps[];
+  className  ?:  string;
+}
+
+const defaultItems: BottombarItemProps[] = [
+  { icon: "solid/home", path: "/_example/bottombar", activeKey: "home" },
+  { icon: "solid/clipboard", path: "/", activeKey: "clipboard" },
+  { icon: "solid/crosshairs", path: "/", activeKey: "crosshairs" },
+  { icon: "solid/sack-dollar", path: "/", activeKey: "sack-dollar" },
+  { icon: "solid/user-circle", path: "/", activeKey: "profile" },
+];
+
+export function BottombarComponent({
+  className = "",
+  active,
+  items = defaultItems,
+}: BottombarProps) {
+  const pathname = usePathname();
+  const isKeyboardOpen  =  useKeyboardOpen();
+
+  const styles = {
+    base: cn(
+      "bottombar-base",
+      isKeyboardOpen ? "-bottom-60" : "bottom-3",
+      pcn(className, "base"),
+    ),
+    item: "bottombar-item",
+  };
+
+  return (
+    <>
+      <div className={styles.base}>
+        <div className="grid grid-cols-5 gap-2 items-center" style={{ gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` }}>
+          {items.map((item, key) => {
+            const isActive = pathname === item.path || active === item.activeKey;
+            return (
+              <Link href={item.path} key={key}>
+                <div
+                  className={cn(
+                    styles.item,
+                    isActive && "bottombar-item-active",
+                    pcn(className, "item"),
+                    isActive && pcn(className, "active"),
+                  )}
+                >
+                  <Icon icon={item.icon} />
+                </div>
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+    </>
+  );
+}

package/src/nav/Footer.component.tsx

@@ -0,0 +1,176 @@
+"use client"
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+
+
+import Link from "next/link";
+
+export interface FooterLinkProps {
+  label: string;
+  path: string;
+}
+
+export interface FooterColumnProps {
+  title: string;
+  items: FooterLinkProps[];
+}
+
+export interface FooterSocialProps {
+  icon: IconName;
+  path: string;
+}
+
+export interface FooterProps {
+  brandTitle    ?:  string;
+  brandSubtitle ?:  string;
+  address       ?:  { label: string; path: string };
+  phone         ?:  { label: string; path: string };
+  email         ?:  { label: string; path: string };
+  supportHours  ?:  string;
+  socials       ?:  FooterSocialProps[];
+  columns       ?:  FooterColumnProps[];
+  copyrightLink ?:  { label: string; path: string };
+}
+
+const defaultSocials: FooterSocialProps[] = [
+  { icon: "brands/facebook" as any, path: "" },
+  { icon: "brands/linkedin" as any, path: "" },
+  { icon: "brands/github" as any, path: "https://github.com/SE-JE" },
+  { icon: "brands/instagram" as any, path: "https://www.instagram.com/seje.digital/" },
+];
+
+const defaultColumns: FooterColumnProps[] = [
+  {
+    title: "Link Menu",
+    items: [
+      { label: "Klik Link Menu 1", path: "" },
+      { label: "Klik Link Menu 1", path: "" },
+      { label: "Klik Link Menu 1", path: "" },
+      { label: "Klik Link Menu 1", path: "" },
+    ],
+  },
+  {
+    title: "Link Menu",
+    items: [
+      { label: "Klik Link Menu 1", path: "" },
+      { label: "Klik Link Menu 1", path: "" },
+      { label: "Klik Link Menu 1", path: "" },
+      { label: "Klik Link Menu 1", path: "" },
+    ],
+  },
+  {
+    title: "Link Menu",
+    items: [
+      { label: "Klik Link Menu 1", path: "" },
+      { label: "Klik Link Menu 1", path: "" },
+      { label: "Klik Link Menu 1", path: "" },
+      { label: "Klik Link Menu 1", path: "" },
+    ],
+  },
+];
+
+export function FooterComponent({
+  brandTitle = "Next Light v.3",
+  brandSubtitle = "The Magic Starter Template",
+  address = { label: "Soekarno Hatta No 27 C, Ponorogo, Jawa Timur, Indonesia", path: "https://maps.app.goo.gl/TY2QDjFPm3RfwjUq6" },
+  phone = { label: "+62 888888888888", path: "https://wa.me/6281456140392" },
+  email = { label: "example@gmail.com", path: "mailto:sejedigital@gmail.com" },
+  supportHours = "24 / 7 Online Suport | Senin - Sabtu ( 09.00 s/d 17.00 )",
+  socials = defaultSocials,
+  columns = defaultColumns,
+  copyrightLink = { label: "sejedigital.com 2020 - 2025", path: "https://sejedigital.com/" },
+}: FooterProps) {
+  return (
+    <>
+      <div className="footer-base">
+        <div className="footer-brand-container">
+          <h1 className="footer-brand-title">
+            {brandTitle}
+          </h1>
+          {brandSubtitle && (
+            <p className="footer-brand-subtitle">
+              {brandSubtitle}
+            </p>
+          )}
+        </div>
+
+        <div className="footer-contact-container">
+          {address && (
+            <a
+              href={address.path}
+              className="footer-contact-link"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {address.label}
+            </a>
+          )}
+          {phone && (
+            <a
+              href={phone.path}
+              className="footer-contact-link"
+            >
+              {phone.label}
+            </a>
+          )}
+          {email && (
+            <a
+              href={email.path}
+              className="footer-contact-link"
+            >
+              {email.label}
+            </a>
+          )}
+          {supportHours && (
+            <p className="footer-support-hours">
+              {supportHours}
+            </p>
+          )}
+
+          {socials && socials.length > 0 && (
+            <div className="footer-socials-container">
+              {socials.map((social, key) => (
+                <a href={social.path} key={key} target="_blank" rel="noopener noreferrer">
+                  <Icon
+                    icon={social.icon}
+                    className="footer-social-icon"
+                  />
+                </a>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {columns && columns.length > 0 && (
+          <div className="footer-links-container">
+            <div className="footer-links-grid">
+              {columns.map((column, colKey) => (
+                <nav aria-label={`Footer navigation ${column.title}`} key={colKey}>
+                  <h6 className="footer-menu-title">
+                    {column.title}
+                  </h6>
+
+                  <div className="footer-menu-list">
+                    {column.items.map((item, itemKey) => (
+                      <Link href={item.path} className="footer-menu-link" key={itemKey}>
+                        {item.label}
+                      </Link>
+                    ))}
+                  </div>
+                </nav>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {copyrightLink && (
+          <p className="footer-copyright">
+            Copyright &copy;
+            <a href={copyrightLink.path} className="ml-1" target="_blank" rel="noopener noreferrer">
+              {copyrightLink.label}
+            </a>
+          </p>
+        )}
+      </div>
+    </>
+  );
+}

package/src/nav/Headbar.component.tsx

@@ -0,0 +1,33 @@
+"use client"
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+
+
+import { useRouter } from "next/navigation";
+import { ReactNode } from "react";
+
+
+
+export interface HeadbarProps {
+  title         ?:  string;
+  backHref      ?:  string | boolean;
+  rightContent  ?:  ReactNode;
+};
+
+
+export function HeadbarComponent({ title, backHref, rightContent }: HeadbarProps) {
+  const router  =  useRouter();
+
+  return (
+    <div className="flex justify-between w-full items-center mt-2 mb-4">
+      <div className="flex items-center">
+        {backHref && (
+          <div className="w-8 aspect-square flex justify-center items-center cursor-pointer" onClick={() => typeof backHref != "boolean" ? router.push(backHref) : router.back()}>
+            <Icon icon="solid/chevron-left" className="text-secondary text-xl" />
+          </div>
+        )}
+        <p className="text-lg font-bold px-2">{title}</p>
+      </div> 
+      {rightContent && <div>{rightContent}</div>}
+    </div>
+  );
+}

package/src/nav/Navbar.component.tsx

@@ -0,0 +1,137 @@
+"use client"
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+
+
+import Link from "next/link";
+import { ButtonComponent } from "../button/Button.component";
+import { cn } from "@utils";
+
+export interface NavbarItemProps {
+  label: string;
+  path: string;
+}
+
+export interface NavbarProps {
+  logoTitle    ?:  string;
+  logoSubtitle ?:  string;
+  logoPath     ?:  string;
+  specialLink  ?:  { label: string; path: string; icon?: IconName };
+  items        ?:  NavbarItemProps[];
+  isLoggedIn   ?:  boolean;
+  onLogin      ?:  () => void;
+  onRegister   ?:  () => void;
+  onProfile    ?:  () => void;
+  className    ?:  string;
+}
+
+const defaultItems: NavbarItemProps[] = [
+  { label: "Tentang", path: "" },
+  { label: "Artikel", path: "" },
+  { label: "Bantuan", path: "" },
+];
+
+const defaultSpecialLink = {
+  label: "Special Link",
+  path: "",
+  icon: "solid/store",
+} as const;
+
+export function NavbarComponent({
+  logoTitle = "Next Light v.3",
+  logoSubtitle = "The Magic Starter Template",
+  logoPath = "/",
+  specialLink = defaultSpecialLink,
+  items = defaultItems,
+  isLoggedIn = false,
+  onLogin,
+  onRegister,
+  onProfile,
+  className = "",
+}: NavbarProps) {
+  return (
+    <>
+      <div className={cn("navbar-topbar", className)}>
+        <div className="navbar-container">
+          <h2 className="text-base">
+            Ini untuk
+            <Link href={specialLink.path} className="navbar-special-link">
+              {specialLink.icon && <Icon icon={specialLink.icon} className="mr-1" />}
+              {specialLink.label}
+            </Link>
+          </h2>
+
+          <div className="navbar-menu">
+            {items.map((item, key) => (
+              <Link href={item.path} key={key}>
+                <div className="navbar-menu-item-sm">{item.label}</div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="navbar-main">
+        <div className="navbar-main-container">
+          <Link href={logoPath}>
+            <div className="w-max">
+              <h1 className="navbar-logo-title">
+                {logoTitle}
+              </h1>
+              {logoSubtitle && (
+                <p className="navbar-logo-subtitle">
+                  {logoSubtitle}
+                </p>
+              )}
+            </div>
+          </Link>
+
+          <div className="flex gap-12 items-center">
+            <div className="navbar-menu">
+              {items.map((item, key) => (
+                <Link href={item.path} key={key}>
+                  <div className="navbar-menu-item-base">{item.label}</div>
+                </Link>
+              ))}
+            </div>
+
+            <div className="w-full flex items-center gap-8">
+              {!isLoggedIn ? (
+                <div className="navbar-auth-buttons">
+                  <ButtonComponent
+                    label={"Masuk"}
+                    size={"sm"}
+                    onClick={onLogin}
+                  />
+                  <ButtonComponent
+                    label={"Daftar"}
+                    size={"sm"}
+                    variant="light"
+                    onClick={onRegister}
+                  />
+                </div>
+              ) : (
+                <div className="flex gap-2 w-max items-center">
+                  <div className="p-2 text-light-foreground hover:text-foreground cursor-pointer">
+                    <Icon icon="solid/history" />
+                  </div>
+                  <div className="p-2 text-light-foreground hover:text-foreground cursor-pointer">
+                    <Icon icon="solid/bell" />
+                  </div>
+                  <div className="h-5 w-[1px] bg-foreground mx-2.5"></div>
+                  <div
+                    className="flex items-center gap-2.5 px-4 cursor-pointer -ml-2 text-light-foreground hover:text-foreground"
+                    onClick={onProfile}
+                  >
+                    <div className="h-10 bg-background rounded-full aspect-square overflow-hidden flex justify-center items-center">
+                      <Icon icon="solid/user" />
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}