@skalfa/skalfa-app 1.0.2 → 1.0.5

package/components/base.components/modal/Toast.component.tsx

@@ -1,126 +0,0 @@
-"use client"
-
-import { ReactNode, useEffect, useState } from "react";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
-import { cn, pcn } from "@utils";
-import { IconButtonComponent } from "@components";
-
-
-
-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 border-t-4 !border-primary rounded-[6px]",
-          "w-[calc(100vw-2rem)] md:w-[50vw] max-w-[300px]",
-          !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>
-              <IconButtonComponent
-                icon={faTimes}
-                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/components/base.components/nav/Bottombar.component.tsx

@@ -1,116 +0,0 @@
-"use client"
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faClipboard, faCrosshairs, faHome, faSackDollar, faUserCircle } from "@fortawesome/free-solid-svg-icons";
-import { cn, pcn, useKeyboardOpen } from "@utils";
-
-
-
-export interface BottombarProps {
-  active     ?:  string;
-  className  ?:  string;
-}
-
-
-
-export function BottombarComponent({
-  className = "",
-  active,
-}: BottombarProps) {
-  const pathname = usePathname();
-  const isKeyboardOpen  =  useKeyboardOpen();
-
-  const styles = {
-    base: cn(
-      "fixed left-1/2 -translate-x-1/2 w-[96%] max-w-[400px] p-2 px-4 bg-white border rounded-[6px] z-40",
-      isKeyboardOpen ? "-bottom-60" : "bottom-3",
-      pcn(className, "base"),
-    ),
-    item: "flex justify-center items-center flex-col py-3 rounded-[6px]",
-  };
-
-  return (
-    <>
-      <div className={styles.base}>
-        <div className="grid grid-cols-5 gap-2 items-center">
-          <Link href={"/_example/bottombar"}>
-            <div
-              className={cn(
-                styles.item,
-                (pathname == "/_example/bottombar" || active == "home") &&
-                  "border-b bg-background text-primary",
-                pcn(className, "item"),
-                (pathname == "/_example/bottombar" || active == "home") &&
-                  pcn(className, "active"),
-              )}
-            >
-              <FontAwesomeIcon icon={faHome} />
-            </div>
-          </Link>
-
-          <Link href={"/"}>
-            <div
-              className={cn(
-                styles.item,
-                (pathname == "" || active == "home") &&
-                  "border-b bg-background text-primary",
-                pcn(className, "item"),
-                (pathname == "" || active == "home") &&
-                  pcn(className, "active"),
-              )}
-            >
-              <FontAwesomeIcon icon={faClipboard} />
-            </div>
-          </Link>
-
-          <Link href={"/"}>
-            <div
-              className={cn(
-                styles.item,
-                (pathname == "" || active == "home") &&
-                  "border-b bg-background text-primary",
-                pcn(className, "item"),
-                (pathname == "" || active == "home") &&
-                  pcn(className, "active"),
-              )}
-            >
-              <FontAwesomeIcon icon={faCrosshairs} />
-            </div>
-          </Link>
-
-          <Link href={"/"}>
-            <div
-              className={cn(
-                styles.item,
-                (pathname == "" || active == "home") &&
-                  "border-b bg-background text-primary",
-                pcn(className, "item"),
-                (pathname == "" || active == "home") &&
-                  pcn(className, "active"),
-              )}
-            >
-              <FontAwesomeIcon icon={faSackDollar} />
-            </div>
-          </Link>
-
-          <Link href={"/"}>
-            <div
-              className={cn(
-                styles.item,
-                (pathname == "" || active == "home") &&
-                  "border-b bg-background text-primary",
-                pcn(className, "item"),
-                (pathname == "" || active == "home") &&
-                  pcn(className, "active"),
-              )}
-            >
-              <FontAwesomeIcon icon={faUserCircle} />
-            </div>
-          </Link>
-        </div>
-      </div>
-    </>
-  );
-}

package/components/base.components/nav/Footer.component.tsx

@@ -1,144 +0,0 @@
-import Link from "next/link";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFacebook, faGithub, faInstagram, faLinkedin } from "@fortawesome/free-brands-svg-icons";
-
-
-
-export function FooterComponent() {
-  return (
-    <>
-      <div className="bg-white/50 backdrop-blur-md border-t-2 pt-[100px] pb-16">
-        <div className="container mx-auto px-4 lg:px-52 text-center">
-          <h1 className="text-4xl font-extrabold italic whitespace-nowrap">
-            Next Light v.3
-          </h1>
-          <p className="text-lg font-semibold text-light-foreground">
-            The Magic Starter Template
-          </p>
-        </div>
-
-        <div className="flex flex-col justify-center items-center mt-16 gap-4 px-4">
-          <a
-            href="https://maps.app.goo.gl/TY2QDjFPm3RfwjUq6"
-            className="font-medium cursor-pointer hover:border-b border-foreground"
-          >
-            Soekarno Hatta No 27 C, Ponorogo, Jawa Timur, Indonesia
-          </a>
-          <a
-            href="https://wa.me/6281456140392"
-            className="font-medium cursor-pointer hover:border-b border-foreground"
-          >
-            +62 888888888888
-          </a>
-          <a
-            href="mailto:sejedigital@gmail.com"
-            className="font-medium cursor-pointer hover:border-b border-foreground"
-          >
-            example@gmail.com
-          </a>
-          <p className="font-medium text-center">
-            24 / 7 Online Suport | Senin - Sabtu ( 09.00 s/d 17.00 )
-          </p>
-
-          <div className="flex mt-10 gap-4 justify-center">
-            <a href="">
-              <FontAwesomeIcon
-                icon={faFacebook}
-                className="text-2xl hover:scale-110"
-              />
-            </a>
-            <a href="">
-              <FontAwesomeIcon
-                icon={faLinkedin}
-                className="text-2xl hover:scale-110"
-              />
-            </a>
-            <a href="https://github.com/SE-JE">
-              <FontAwesomeIcon
-                icon={faGithub}
-                className="text-2xl hover:scale-110"
-              />
-            </a>
-            <a href="https://www.instagram.com/seje.digital/">
-              <FontAwesomeIcon
-                icon={faInstagram}
-                className="text-2xl hover:scale-110"
-              />
-            </a>
-          </div>
-        </div>
-
-        <div className="container mx-auto px-6 bg-white border-y mt-20">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-16 md:gap-4 py-12 px-12">
-            <nav aria-label="Footer navigation">
-              <h6 className="text-lg font-semibold text-foreground mb-4">
-                Link Menu
-              </h6>
-
-              <div className="flex flex-col gap-2">
-                <Link href="" className="text-light-foreground hover:underline">
-                  Klik Link Menu 1
-                </Link>
-                <Link href="" className="text-light-foreground hover:underline">
-                  Klik Link Menu 1
-                </Link>
-                <Link href="" className="text-light-foreground hover:underline">
-                  Klik Link Menu 1
-                </Link>
-                <Link href="" className="text-light-foreground hover:underline">
-                  Klik Link Menu 1
-                </Link>
-              </div>
-            </nav>
-            <nav aria-label="Footer navigation">
-              <h6 className="text-lg font-semibold text-foreground mb-4">
-                Link Menu
-              </h6>
-
-              <div className="flex flex-col gap-2">
-                <Link href="" className="text-light-foreground hover:underline">
-                  Klik Link Menu 1
-                </Link>
-                <Link href="" className="text-light-foreground hover:underline">
-                  Klik Link Menu 1
-                </Link>
-                <Link href="" className="text-light-foreground hover:underline">
-                  Klik Link Menu 1
-                </Link>
-                <Link href="" className="text-light-foreground hover:underline">
-                  Klik Link Menu 1
-                </Link>
-              </div>
-            </nav>
-            <nav aria-label="Footer navigation">
-              <h6 className="text-lg font-semibold text-foreground mb-4">
-                Link Menu
-              </h6>
-
-              <div className="flex flex-col gap-2">
-                <Link href="" className="text-light-foreground hover:underline">
-                  Klik Link Menu 1
-                </Link>
-                <Link href="" className="text-light-foreground hover:underline">
-                  Klik Link Menu 1
-                </Link>
-                <Link href="" className="text-light-foreground hover:underline">
-                  Klik Link Menu 1
-                </Link>
-                <Link href="" className="text-light-foreground hover:underline">
-                  Klik Link Menu 1
-                </Link>
-              </div>
-            </nav>
-          </div>
-        </div>
-        <p className="text-lg text-center font-semibold mt-16">
-          Copyright &copy;
-          <a href="https://sejedigital.com/" className="ml-1" target="_blank">
-            sejedigital.com 2020 - 2025
-          </a>
-        </p>
-      </div>
-    </>
-  );
-}

package/components/base.components/nav/Headbar.component.tsx

@@ -1,104 +0,0 @@
-"use client"
-
-import { ReactNode, useState } from "react";
-import { useRouter } from "next/navigation";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBell, faHistory, faPowerOff, faUser, faUserCog } from "@fortawesome/free-solid-svg-icons";
-import { OutsideClickComponent } from "@components";
-import { cn, auth } from "@utils";
-
-
-
-export interface HeadbarProps {
-  children   ?:  ReactNode;
-  className  ?:  string;
-};
-
-
-
-
-export function HeadbarComponent({
-  children,
-  className = "",
-}: HeadbarProps) {
-  const router                 =  useRouter();
-  const [profile, setProfile]  =  useState(false);
-
-  const styles = {
-    base: cn(
-      "p-1 flex items-center justify-between bg-white rounded-[6px] relative z-30 select-none border px-4 py-2",
-      className,
-    ),
-  };
-
-  return (
-    <div className={styles.base}>
-      <div className="w-full ">{children}</div>
-
-      <div className="flex gap-2 w-max items-center">
-        <div className="p-2 text-light-foreground hover:text-foreground cursor-pointer">
-          <FontAwesomeIcon icon={faHistory} />
-        </div>
-        <div className="p-2 text-light-foreground hover:text-foreground cursor-pointer">
-          <FontAwesomeIcon icon={faBell} />
-        </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={() => setProfile(!profile)}
-        >
-          <div className="h-10 bg-background rounded-full aspect-square overflow-hidden flex justify-center items-center">
-            <FontAwesomeIcon icon={faUser} />
-          </div>
-
-          <div className="hidden lg:block w-max max-w-[110px]">
-            <h6 className="text-sm font-semibold line-clamp-1">Jhon Duck</h6>
-            <h6 className="-mt-0.5 text-xs font-medium line-clamp-1">Admin</h6>
-          </div>
-        </div>
-      </div>
-
-      <OutsideClickComponent onOutsideClick={() => setProfile(false)}>
-        <div
-          className={`absolute right-0 top-[70px] rounded-[6px] border overflow-hidden bg-white z-30 ${
-            profile ? "scale-y-100" : "scale-y-0"
-          }`}
-        >
-          <div className="flex items-center gap-4 p-4 rounded-b-[4px] border-b">
-            <div className="h-14 bg-background border rounded-full aspect-square overflow-hidden flex justify-center items-center">
-              <FontAwesomeIcon
-                icon={faUser}
-                className="text-2xl text-light-foreground"
-              />
-            </div>
-            <div className="pr-5 w-[160px]">
-              <h6 className="text-lg font-bold line-clamp-1">Jhon Duck</h6>
-              <h6 className="text-xs -mt-1 font-semibold line-clamp-1">
-                Admin
-              </h6>
-            </div>
-          </div>
-
-          <div className="py-4">
-            <div className="px-6 py-2 flex gap-4 hover:bg-background/40 hover:border-y items-center cursor-pointer">
-              <FontAwesomeIcon icon={faUserCog} />
-              <label className="cursor-pointer font-semibold">
-                Edit Profile
-              </label>
-            </div>
-            <div
-              className="px-6 py-2 flex gap-4 hover:bg-background/40 hover:border-y items-center cursor-pointer text-danger"
-              onClick={() => {
-                auth.deleteAccessToken();
-                router.push("/");
-              }}
-            >
-              <FontAwesomeIcon icon={faPowerOff} />
-              <label className="cursor-pointer font-semibold">Keluar</label>
-            </div>
-          </div>
-        </div>
-      </OutsideClickComponent>
-    </div>
-  );
-}

package/components/base.components/nav/Navbar.component.tsx

@@ -1,100 +0,0 @@
-import Link from "next/link";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBell, faHistory, faStore, faUser } from "@fortawesome/free-solid-svg-icons";
-import { ButtonComponent } from "@components";
-
-
-
-export function NavbarComponent() {
-  return (
-    <>
-      <div className="relative py-2.5 bg-background rounded-[6px] z-40 hidden lg:block">
-        <div className="container flex items-center justify-between px-4 mx-auto">
-          <h2 className="text-base">
-            Ini untuk
-            <a href="" className="font-medium text-primary">
-              <FontAwesomeIcon icon={faStore} className="ml-2 mr-1" /> Special
-              Link
-            </a>
-          </h2>
-
-          <div className="flex gap-12">
-            <Link href={""}>
-              <div className="px-4 text-sm text-gray-500">Tentang</div>
-            </Link>
-            <Link href={""}>
-              <div className="px-4 text-sm text-gray-500">Artikel</div>
-            </Link>
-            <Link href={""}>
-              <div className="px-4 text-sm text-gray-500">Bantuan</div>
-            </Link>
-          </div>
-        </div>
-      </div>
-      <div className="bg-white border-y sticky top-0 z-40">
-        <div className="container flex items-center justify-between px-4 py-2.5 gap-8 mx-auto relative">
-          <Link href="/">
-            <div className="w-max">
-              <h1 className="text-lg font-extrabold italic whitespace-nowrap">
-                Next Light v.3
-              </h1>
-              <p className="text-xs -mt-1 font-semibold text-light-foreground">
-                The Magic Starter Template
-              </p>
-            </div>
-          </Link>
-
-          <div className="flex gap-12 items-center">
-            <div className="flex gap-12">
-              <Link href={""}>
-                <div className="px-4 text-base text-gray-500">Tentang</div>
-              </Link>
-              <Link href={""}>
-                <div className="px-4 text-base text-gray-500">Artikel</div>
-              </Link>
-              <Link href={""}>
-                <div className="px-4 text-base text-gray-500">Bantuan</div>
-              </Link>
-            </div>
-
-            <div className="w-full flex items-center gap-8">
-              {!false ? (
-                <div className="flex w-full gap-4 justify-end">
-                  <ButtonComponent
-                    label={"Masuk"}
-                    size={"sm"}
-                    onClick={() => {}}
-                  />
-                  <ButtonComponent
-                    label={"Daftar"}
-                    size={"sm"}
-                    variant="light"
-                    onClick={() => {}}
-                  />
-                </div>
-              ) : (
-                <div className="flex gap-2 w-max items-center">
-                  <div className="p-2 text-light-foreground hover:text-foreground cursor-pointer">
-                    <FontAwesomeIcon icon={faHistory} />
-                  </div>
-                  <div className="p-2 text-light-foreground hover:text-foreground cursor-pointer">
-                    <FontAwesomeIcon icon={faBell} />
-                  </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={() => {}}
-                  >
-                    <div className="h-10 bg-background rounded-full aspect-square overflow-hidden flex justify-center items-center">
-                      <FontAwesomeIcon icon={faUser} />
-                    </div>
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}