@revealui/core 0.0.1-pre.0

package/dist/ui/navigation/Footer.tsx

@@ -0,0 +1,128 @@
+/* eslint-disable prettier/prettier */
+import React from "react";
+import { Path, SVG } from "../images";
+import Container from "../shells/Container";
+import FlexContainer from "../shells/Flex";
+import Heading from "../text/Heading";
+
+// Define the type for the icon component
+type IconComponent = React.FC<React.SVGProps<SVGSVGElement>>;
+
+// Define the type for each item in the footer navigation
+interface SocialMediaItem {
+  name: string;
+  href: string;
+  icon: IconComponent;
+}
+
+const footerNavigation = [
+  {
+    name: "Facebook",
+    href: "https://www.facebook.com/groups/StreetbeefsScrapyard/",
+    icon: (
+      props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
+    ) => (
+      <SVG fill="currentColor" viewBox="0 0 24 24" {...props}>
+        <Path
+          fillRule="evenodd"
+          d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
+          clipRule="evenodd"
+        />
+      </SVG>
+    ),
+  },
+  {
+    name: "Instagram",
+    href: "https://www.facebook.com/groups/StreetbeefsScrapyard/",
+    icon: (
+      props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
+    ) => (
+      <SVG fill="currentColor" viewBox="0 0 24 24" {...props}>
+        <Path
+          fillRule="evenodd"
+          d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
+          clipRule="evenodd"
+        />
+      </SVG>
+    ),
+  },
+  {
+    name: "TikTok",
+    href: "https://www.tiktok.com/@streetbeefs__scrapyard",
+    icon: (
+      props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
+    ) => (
+      <SVG
+        fill="currentColor"
+        width="512px"
+        height="512px"
+        viewBox="0 0 512 512"
+        id="icons"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <Path d="M412.19,118.66a109.27,109.27,0,0,1-9.45-5.5,132.87,132.87,0,0,1-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14,23.9,350,16,350.13,16H267.69V334.78c0,4.28,0,8.51-.18,12.69,0,.52-.05,1-.08,1.56,0,.23,0,.47-.05.71,0,.06,0,.12,0,.18a70,70,0,0,1-35.22,55.56,68.8,68.8,0,0,1-34.11,9c-38.41,0-69.54-31.32-69.54-70s31.13-70,69.54-70a68.9,68.9,0,0,1,21.41,3.39l.1-83.94a153.14,153.14,0,0,0-118,34.52,161.79,161.79,0,0,0-35.3,43.53c-3.48,6-16.61,30.11-18.2,69.24-1,22.21,5.67,45.22,8.85,54.73v.2c2,5.6,9.75,24.71,22.38,40.82A167.53,167.53,0,0,0,115,470.66v-.2l.2.2C155.11,497.78,199.36,496,199.36,496c7.66-.31,33.32,0,62.46-13.81,32.32-15.31,50.72-38.12,50.72-38.12a158.46,158.46,0,0,0,27.64-45.93c7.46-19.61,9.95-43.13,9.95-52.53V176.49c1,.6,14.32,9.41,14.32,9.41s19.19,12.3,49.13,20.31c21.48,5.7,50.42,6.9,50.42,6.9V131.27C453.86,132.37,433.27,129.17,412.19,118.66Z" />
+      </SVG>
+    ),
+  },
+  {
+    name: "YouTube",
+    href: "https://www.youtube.com/@streetbeefsScrapyard",
+    icon: (
+      props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
+    ) => (
+      <SVG fill="currentColor" viewBox="0 0 24 24" {...props}>
+        <Path
+          fillRule="evenodd"
+          d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z"
+          clipRule="evenodd"
+        />
+      </SVG>
+    ),
+  },
+];
+
+const SocialMediaLink: React.FC<{ item: SocialMediaItem }> = ({ item }) => (
+  <a
+    key={item.name}
+    href={item.href}
+    className=" from-scrapOrange to-scrapYellow stroke-scrapBlack/40 text-scrapYellow hover:from-scrapYellow hover:to-scrapOrange hover:stroke-scrapBlack/10 hover:text-scrapYellow/90 bg-transparent transition duration-300 ease-in-out hover:brightness-200"
+  >
+    <span className="sr-only">{item.name}</span>
+    <item.icon className="size-6" aria-hidden="true" />
+  </a>
+);
+
+const FooterNavigation = () => (
+  <FlexContainer
+    className="mb-4 mt-2 flex w-full flex-row flex-nowrap justify-evenly lg:mb-8 lg:w-1/3 lg:flex-wrap"
+    index={0}
+  >
+    {footerNavigation.map((item) => (
+      <SocialMediaLink key={item.name} item={item} />
+    ))}
+  </FlexContainer>
+);
+
+const Footer = () => {
+  return (
+    <Container
+      index={0}
+      as="footer"
+      className="max-w-9xl bg-scrapBlack flex flex-col justify-between from-inherit to-current p-1 lg:flex-row"
+    >
+      <FooterNavigation />
+      <FlexContainer className="mb-1 mt-6 max-w-md justify-self-end md:max-w-lg lg:mb-3 lg:mt-2 lg:max-w-xl">
+        <Heading
+          className="text-md from-scrapBlack to-scrapOrange text-scrapYellow text-center md:text-lg lg:text-end lg:text-xl"
+          as={"h1"}
+          id={""}
+        >
+          STREETBEEFS SCRAPYARD
+        </Heading>
+      </FlexContainer>
+    </Container>
+  );
+};
+
+export default Footer;

package/dist/ui/navigation/Link.tsx

@@ -0,0 +1,225 @@
+import React, { useEffect, useState } from "react";
+import { cn } from "../layouts/classNames";
+import { updateCurrentPath } from "../../core/targets/url/updateCurrentPath";
+
+export type LinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+};
+
+const Link = React.memo(({ href, className, children, onClick, ...rest }: LinkProps) => {
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    // Check if the current pathname matches the link's href
+    setIsActive(window.location.pathname === href);
+  }, [href]);
+
+  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+    if (onClick) onClick(event); // Allow custom onClick logic
+    updateCurrentPath(href);
+  };
+
+  const linkClassName = cn(
+    "w-full lg:w-auto rounded-md px-3 py-2 text-sm font-medium",
+    isActive
+      ? "bg-scrapBlack text-scrapOrange"
+      : "text-scrapWhite hover:bg-scrapBlack/10 hover:text-scrapYellow",
+    className ?? ""
+  );
+
+  return (
+    <a
+      href={href}
+      className={linkClassName}
+      onClick={handleClick}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+});
+
+Link.displayName = "Link";
+
+export default Link;
+
+// import React from "react";
+// import { cn } from "../layouts/classNames";
+// import { updateCurrentPath } from "../../core/targets/url/updateCurrentPath";
+
+
+// export type LinkProps = {
+//   href: string;
+//   className?: string;
+//   children: React.ReactNode;
+//   onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+// };
+
+// const Link = React.memo(({ href, className, children, onClick, ...rest }: LinkProps) => {
+//   const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+//     event.preventDefault();
+//     if (onClick) onClick(event);  // Allow custom onClick logic
+//     updateCurrentPath(href);
+//   };
+
+//   // Determine if the link is active
+//   const isActive = window.location.pathname === href;
+
+//   const linkClassName = cn(
+//     "w-full lg:w-auto rounded-md px-3 py-2 text-sm font-medium",
+//     isActive
+//       ? "bg-scrapBlack text-scrapOrange"
+//       : "text-scrapWhite hover:bg-scrapBlack/10 hover:text-scrapYellow",
+//     className ?? ""
+//   );
+
+//   return (
+//     <a
+//       href={href}
+//       className={linkClassName}
+//       onClick={handleClick}
+//       {...rest}
+//     >
+//       {children}
+//     </a>
+//   );
+// });
+
+// Link.displayName = "Link";
+
+// export default Link;
+
+
+// import React from "react";
+// import { cn } from "../layouts/classNames";
+// import { updateCurrentPath } from "../../core/targets/url/updateCurrentPath";
+
+// export type LinkProps = {
+//   href: string;
+//   className?: string;
+//   children: React.ReactNode;
+//   onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void; // Keep it as anchor
+// };
+
+// const Link = React.memo(({ href, className, children, onClick, ...rest }: LinkProps) => {
+//   const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+//     event.preventDefault();
+//     if (onClick) onClick(event); // Allow custom onClick logic
+//     updateCurrentPath(href);
+//   };
+
+//   const isActive = window.location.pathname === href;
+
+//   const linkClassName = cn(
+//     "w-full lg:w-auto rounded-md px-3 py-2 text-sm font-medium",
+//     isActive
+//       ? "bg-scrapBlack text-scrapOrange"
+//       : "text-scrapWhite hover:bg-scrapBlack/10 hover:text-scrapYellow",
+//     className ?? ""
+//   );
+
+//   return (
+//     <a
+//       href={href}
+//       className={linkClassName}
+//       onClick={handleClick}
+//       {...rest}
+//     >
+//       {children}
+//     </a>
+//   );
+// });
+
+// Link.displayName = "Link";
+
+// export default Link;
+
+
+// /* eslint-disable @typescript-eslint/no-explicit-any */
+// import React from "react";
+// import { cn } from "../layouts/classNames";
+// // import { usePageContext } from "../hooks/usePageContext";
+// import updateCurrentPath from "../../core/targets/url/updateCurrentPath";
+
+// export type LinkProps = {
+//   href: string;
+//   className?: string;
+//   children: any;
+//   onClick?: any;
+// };
+// const Link = React.memo(({ href, className, children, ...rest }: LinkProps) => {
+//   // const pageContext = usePageContext();
+
+//   const onClick = (event: any) => {
+//     event.preventDefault();
+//     updateCurrentPath(href)?.toString();
+//     window.history.pushState({}, "", href);
+//   };
+
+//   const isActive =
+//     href === "/"
+//       ? updateCurrentPath(href) === href
+//       : updateCurrentPath(href)?.startsWith(href);
+
+//   const linkClassName = cn(
+//     "w-full lg:w-auto rounded-md px-3 py-2 text-sm font-medium",
+//     isActive
+//       ? "bg-scrapBlack text-scrapOrange"
+//       : "text-scrapWhite hover:bg-scrapBlack/10 hover:text-scrapYellow",
+//     className ?? "",
+//   );
+
+//   return (
+//     <a onClick={onClick} href={href} className={linkClassName} {...rest}>
+//       {children}
+//     </a>
+//   );
+// });
+
+// Link.displayName = "Link";
+
+// export default Link;
+
+// import React from "react";
+// import { usePageContext } from "reveal/hooks/usePageContext";
+
+// export function Link({ href, children }: { href: string; children: string }) {
+//   const { urlPathname = "/", updateCurrentPath } = usePageContext();
+//   const isActive =
+//     href === "/" ? urlPathname === href : urlPathname?.startsWith(href);
+
+//   const handleClick = (
+//     event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+//   ) => {
+//     event.preventDefault();
+//     updateCurrentPath?.(href); // Safely call updateCurrentPath if available
+//   };
+
+//   return (
+//     <a
+//       href={href}
+//       onClick={handleClick}
+//       className={isActive ? "is-active" : undefined}
+//     >
+//       {children}
+//     </a>
+//   );
+// }
+
+// import React from "react";
+// import { usePageContext } from "reveal/usePageContext";
+
+// export function Link({ href, children }: { href: string; children: string }) {
+//   const pageContext = usePageContext();
+//   const { urlPathname } = pageContext;
+//   const isActive = href === "/" ? urlPathname === href : urlPathname.startsWith(href);
+//   return (
+//     <a href={href} className={isActive ? "is-active" : undefined}>
+//       {children}
+//     </a>
+//   );
+// }

package/dist/ui/navigation/MobileMenu.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Disclosure, FlexContainer } from "../shells";
+import Transition from "./Transition.js";
+
+const MobileMenu = ({
+  open,
+  children,
+}: {
+  open: boolean;
+  children: React.ReactNode;
+}) => {
+  return (
+    <Disclosure.Panel
+      as="div"
+      className={`bg-scrapBlack h-screen ${open ? "block" : "hidden"}`}
+    >
+      <Transition show={true}>
+        <FlexContainer className="flex h-auto flex-col justify-self-end">
+          {children}
+        </FlexContainer>
+      </Transition>
+    </Disclosure.Panel>
+  );
+};
+
+export default MobileMenu;

package/dist/ui/navigation/NavigationLinks.tsx

@@ -0,0 +1,244 @@
+import { usePageContext } from "../hooks/usePageContext";
+import { updateCurrentPath } from "../../core/targets/url/updateCurrentPath";
+import { cn } from "../layouts/classNames";
+import Link from "./Link";
+
+interface NavigationLinksProps {
+  className?: string;
+  toggle?: (event: React.MouseEvent<HTMLElement>) => void;
+  current: string
+}
+
+const NavigationLinks = ({
+  className,
+  toggle,
+}: NavigationLinksProps) => {
+  const pageContext = usePageContext();
+
+  const navigation = [
+    { name: "Home", href: "/" },
+    { name: "About", href: "/about" },
+    { name: "Events", href: "/events" },
+    { name: "Fighters", href: "/fighters" },
+    { name: "Media", href: "/media" },
+  ];
+
+  const handleLinkClick = (path: string | URL, event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+    updateCurrentPath(path);
+    window.history.pushState({}, "", path);
+    if (toggle) toggle(event);
+  };
+
+  return (
+    <>
+      {navigation.map((item) => (
+        <Link
+          key={item.name}
+          href={item.href}
+          onClick={(event: React.MouseEvent<HTMLAnchorElement>) => handleLinkClick(item.href, event)}
+          className={cn(
+            `mx-auto rounded-md px-5 py-12 text-sm font-medium lg:px-5 lg:py-3`,
+            pageContext.urlPathname === item.href
+              ? "bg-scrapBlack/10 text-scrapOrange"
+              : "text-scrapWhite hover:bg-scrapBlack/10 hover:text-scrapYellow",
+            className,
+          )}
+        >
+          {item.name}
+        </Link>
+      ))}
+    </>
+  );
+};
+
+export default NavigationLinks;
+
+
+
+// import { usePageContext } from "../hooks/usePageContext";
+// import {updateCurrentPath} from "../../core/targets/url/updateCurrentPath";
+// import { cn } from "../layouts/classNames";
+// import Link from "./Link";
+
+// interface NavigationLinksProps {
+//   current?: string;
+//   className?: string;
+//   toggle?: (event: React.MouseEvent<HTMLButtonElement, HTMLAnchorElement>) => void;
+// }
+
+// const NavigationLinks = ({
+//   current,
+//   className,
+//   toggle,
+// }: NavigationLinksProps) => {
+//   const pageContext = usePageContext();
+
+//   const navigation = [
+//     { name: "Home", href: "/" },
+//     { name: "About", href: "/about" },
+//     { name: "Events", href: "/events" },
+//     { name: "Fighters", href: "/fighters" },
+//     { name: "Media", href: "/media" },
+//   ];
+
+//   const handleLinkClick = (path: string | URL, event: React.MouseEvent<HTMLButtonElement, HTMLAnchorElement>) => {
+//     event.preventDefault();
+//     updateCurrentPath(path);
+//     window.history.pushState({}, "", path);
+//     if (toggle) toggle(event);
+//   };
+
+//   return (
+//     <>
+//       {navigation.map((item) => (
+//         <Link
+//           key={item.name}
+//           href={item.href}
+//           onClick={(event: React.MouseEvent<HTMLAnchorElement>) => handleLinkClick(item.href, event)}
+//           className={cn(
+//             `mx-auto rounded-md px-5 py-12 text-sm font-medium lg:px-5 lg:py-3`,
+//             current === item.href
+//               ? "bg-scrapBlack/10 text-scrapOrange"
+//               : "text-scrapWhite hover:bg-scrapBlack/10 hover:text-scrapYellow",
+//             className,
+//           )}
+//         >
+//           {item.name}
+//         </Link>
+//       ))}
+//     </>
+//   );
+// };
+
+// export default NavigationLinks;
+
+// /* eslint-disable @typescript-eslint/no-explicit-any */
+// import React from "react"
+// import updateCurrentPath from "../core/updateCurrentPath"
+// import { usePageContext } from "../hooks/usePageContext"
+// import { cn } from "../layouts/classNames"
+// import Link from "./Link.js"
+
+// interface NavigationLinksProps {
+//   current: boolean | string
+//   className?: string
+//   toggle?: (event: any) => void
+// }
+
+// const NavigationLinks = ({
+//   current,
+//   className,
+//   toggle,
+// }: NavigationLinksProps) => {
+//   const pageContext = usePageContext()
+
+//   const navigation = [
+//     { name: "Home", href: "/", current: false },
+//     { name: "About", href: "/about", current: false },
+//     { name: "Events", href: "/events", current: false },
+//     { name: "Fighters", href: "/fighters", current: false },
+//     { name: "Media", href: "/media", current: false },
+//     // { name: "Game", href: "/game" },
+//     // { name: "Support", href: "/support" },
+//   ]
+
+//   const handleLinkClick = (path: string, event: any) => {
+//     event.preventDefault() // Prevent default anchor behavior
+//     if (!pageContext.updateCurrentPath) {
+//       // Fallback in case currentPath is undefined
+//       return <div>Loading...</div>
+//     }
+//     if (path === pageContext?.updateCurrentPath(path)) return current
+//     if (typeof path === "string") {
+//       updateCurrentPath(path) // Update the path in your context
+//       window.history.pushState({}, "", path) // Change the URL
+//       if (toggle) toggle(event) // Close the mobile menu if the toggle function is provided
+//     }
+//   }
+
+//   return (
+//     <>
+//       {navigation.map((item) => (
+//         <Link
+//           key={item.name}
+//           href={item.href}
+//           onClick={(event: any) => handleLinkClick(item.href, event)}
+//           className={cn(
+//             `mx-auto rounded-md px-5 py-12 text-sm font-medium lg:px-5 lg:py-3 ${
+//               current === item.href
+//                 ? "bg-scrapBlack/10 text-scrapOrange hover:bg-scrapBlack/10 hover:text-scrapOrange hover:brightness-125"
+//                 : "text-scrapWhite hover:bg-scrapBlack/10 hover:text-scrapYellow hover:brightness-125"
+//             } ${className} `
+//           )}
+//         >
+//           {item.name}
+//         </Link>
+//       ))}
+//     </>
+//   )
+// }
+
+// export default NavigationLinks
+
+// import React from "react";
+// import { layoutUtils, updateCurrentPath } from "../functions";
+// import { usePageContext } from "../hooks";
+// import Link from "./Link";
+
+// const NavigationLinks: React.FC<{
+//   current: boolean | string;
+//   className?: string;
+//   toggle?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+// }> = ({ current, className }) => {
+//   const { currentPath } = usePageContext();
+
+//   const navigation = [
+//     { name: "Home", href: "/", current: false },
+//     { name: "About", href: "/about", current: false },
+//     { name: "Events", href: "/events", current: false },
+//     { name: "Fighters", href: "/fighters", current: false },
+//     { name: "Music", href: "/music", current: false },
+//     // { name: "Game", href: "/game" },
+//     // { name: "Support", href: "/support" },
+//   ];
+
+//   const handleLinkClick = (
+//     path: string,
+//     event: React.MouseEvent<HTMLAnchorElement>,
+//     toggle?: (event: React.MouseEvent<HTMLAnchorElement>) => void,
+//   ) => {
+//     event.preventDefault(); // Prevent default anchor behavior
+//     if (path === currentPath) return current;
+//     if (typeof path === "string") {
+//       updateCurrentPath(path); // Update the path in your context
+//       window.history.pushState({}, "", path); // Change the URL
+//       if (toggle) toggle(event); // Close the mobile menu
+//     }
+//   };
+
+//   return (
+//     <>
+//       {navigation.map((item) => (
+//         <Link
+//           key={item.name}
+//           href={item.href}
+//           onClick={(event: React.MouseEvent<HTMLAnchorElement>) =>
+//             handleLinkClick(item.href, event)
+//           }
+//           className={cn(
+//             `mx-auto rounded-md lg:px-5 lg:py-3 px-5 py-12 text-sm font-medium ${
+//               current === item.href
+//                 ? "bg-scrapBlack/10 text-scrapOrange hover:bg-scrapBlack/10 hover:text-scrapOrange hover:brightness-125"
+//                 : "text-scrapWhite hover:bg-scrapBlack/10 hover:text-scrapYellow hover:brightness-125"
+//             } ${className} `,
+//           )}
+//         >
+//           {item.name}
+//         </Link>
+//       ))}
+//     </>
+//   );
+// };
+
+// export default NavigationLinks;

package/dist/ui/navigation/NotFound.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const NotFound: React.FC = () => {
+  return (
+    <>
+      <h1>404</h1>
+      <h2>Page not found</h2>
+    </>
+  );
+};
+
+export default NotFound;