umwd-components 0.1.716 → 0.1.718

package/src/components/ExplanatoryFoldOut.tsx

@@ -1,62 +0,0 @@
-// "use client"
-
-import React from "react";
-
-import Typography from "@mui/material/Typography";
-import Divider from "@mui/material/Divider";
-import Box from "@mui/material/Box";
-import Collapse from "@mui/material/Collapse";
-import Chip from "@mui/material/Chip";
-
-import { SxProps, Theme } from "@mui/material/styles";
-
-// import { KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
-import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
-import { useState } from "react";
-
-// INFO TODO Description and children basically have the same functionality, but description is a string and children is a ReactNode.
-// eventually we should remove description and only use children.
-
-interface ExplanatoryFoldOutProps {
-  title: string;
-  description?: string;
-  sx?: SxProps<Theme>;
-  children?: React.ReactNode;
-}
-
-export function ExplanatoryFoldOut({
-  title,
-  description,
-  sx = [],
-  children,
-}: Readonly<ExplanatoryFoldOutProps>) {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <Box
-      sx={[
-        // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
-    >
-      <Divider textAlign="left">
-        <Chip
-          label={title}
-          size="small"
-          color="primary"
-          onClick={() => setOpen(!open)}
-          icon={open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
-        />
-      </Divider>
-      <Collapse in={open}>
-        {description && (
-          <Typography variant="body2" color={"primary"} sx={{ mt: 1 }}>
-            {description}
-          </Typography>
-        )}
-        {children && <Box sx={{ mt: 1 }}>{children}</Box>}
-      </Collapse>
-    </Box>
-  );
-}

package/src/components/FluidBackground.tsx

@@ -1,204 +0,0 @@
-"use client";
-
-import React, { useState, useEffect, useRef } from "react";
-import { useTheme } from "@mui/material/styles";
-
-function MovingObject({ ObjectSize = 300 }) {
-  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
-  const followerRef = useRef<SVGSVGElement | null>(null);
-
-  const theme = useTheme();
-
-  // Function to handle mouse movement
-  const handleMouseMove = (event: MouseEvent) => {
-    const { clientX, clientY } = event;
-    setMousePosition({ x: clientX, y: clientY });
-  };
-
-  // Function to update the animation frame
-  const updateFollowerPosition = () => {
-    if (followerRef.current) {
-      followerRef.current.style.position = "absolute";
-      followerRef.current.style.top = `${mousePosition.y}px`;
-      followerRef.current.style.left = `${mousePosition.x}px`;
-      // followerRef.current.style.transform = `translate(${mousePosition.x}px, ${mousePosition.y}px)`;
-    }
-    requestAnimationFrame(updateFollowerPosition);
-  };
-
-  useEffect(() => {
-    // Attach the mouse move listener
-    window.addEventListener("mousemove", handleMouseMove);
-
-    // Start the animation
-    requestAnimationFrame(updateFollowerPosition);
-
-    // Cleanup on component unmount
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-    };
-  }, [mousePosition]);
-
-  return (
-    <svg
-      id="object"
-      ref={followerRef}
-      width={`${ObjectSize}px`}
-      height={`${ObjectSize}px`}
-      style={{
-        position: "absolute",
-        // top: `${objectY}px`,
-        // left: `${objectX}px`,
-        transform: "translate(-50%, -50%)",
-      }}
-    >
-      <defs>
-        <mask id="radial-gradient-mask">
-          <radialGradient
-            id="gradient"
-            cx="50%"
-            cy="50%"
-            r="50%"
-            fx="50%"
-            fy="50%"
-          >
-            <stop offset="0%" stopColor="white" />
-            <stop offset="100%" stopColor="black" />
-          </radialGradient>
-          <rect width="100%" height="100%" fill="url(#gradient)" />
-        </mask>
-      </defs>
-      <rect
-        width="100%"
-        height="100%"
-        fill={theme.palette.primary.main}
-        mask="url(#radial-gradient-mask)"
-        style={{ filter: `opacity(.5)` }}
-      />
-    </svg>
-  );
-}
-
-function FluidBackground() {
-  const [ObjectSize, setObjectSize] = useState<number>(300);
-
-  const theme = useTheme();
-
-  // setting up all the initial values
-  useEffect(() => {
-    setObjectSize(
-      Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 1.3
-    );
-  }, []);
-
-  return (
-    <div
-      style={{
-        position: "fixed",
-        top: 0,
-        left: 0,
-        width: "100vw",
-        height: "100vh",
-        zIndex: -1,
-        pointerEvents: "none",
-        isolation: "isolate",
-      }}
-    >
-      <div
-        id="background"
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          display: "Block",
-          width: "100%",
-          height: "100%",
-          background: theme.palette.background.paper,
-          zIndex: -1,
-        }}
-      />
-      <MovingObject ObjectSize={ObjectSize} />
-
-      <svg
-        id="foreground"
-        style={{
-          position: "absolute",
-        }}
-        preserveAspectRatio="xMidYMid slice"
-        width="100%"
-        height="100%"
-        viewBox="0 0 7680 4320 "
-      >
-        <defs>
-          <mask id="mask">
-            <rect width={"100%"} height={"100%"} fill="white" />
-            <text
-              transform="translate(-1000 200) rotate(-15)"
-              style={{
-                fill: "#000",
-                fontFamily: "Merriweather-Bold, Merriweather",
-                fontSize: "360px",
-                fontWeight: 700,
-                letterSpacing: ".055em",
-              }}
-            >
-              <tspan x="0" y="0">
-                JELLE PAULUS IS A TALENTED WEB DEVELOPER AND{" "}
-              </tspan>
-              <tspan x="0" y="432">
-                DESIGNER WITH A PASSION FOR CREATING VISUALLY{" "}
-              </tspan>
-              <tspan x="0" y="864">
-                STUNNING AND USER-FRIENDLY WEBSITES. WITH A{" "}
-              </tspan>
-              <tspan x="0" y="1296">
-                KEEN EYE FOR DETAIL AND A FOCUS ON CREATING{" "}
-              </tspan>
-              <tspan x="0" y="1728">
-                CLEAN, FUNCTIONAL DESIGNS, JELLE HAS A{" "}
-              </tspan>
-              <tspan x="0" y="2160">
-                REPUTATION FOR DELIVERING HIGH-QUALITY WORK{" "}
-              </tspan>
-              <tspan x="0" y="2592">
-                THAT EXCEEDS HIS CLIENTS&apos; EXPECTATIONS. HE HAS A{" "}
-              </tspan>
-              <tspan x="0" y="3024">
-                DEEP UNDERSTANDING OF THE LATEST WEB{" "}
-              </tspan>
-              <tspan x="0" y="3456">
-                DEVELOPMENT TECHNOLOGIES, AND IS ABLE TO{" "}
-              </tspan>
-              <tspan x="0" y="3888">
-                SEAMLESSLY INTEGRATE FUNCTIONALITY AND{" "}
-              </tspan>
-              <tspan x="0" y="4320">
-                AESTHETICS TO CREATE WEBSITES THAT ARE BOTH{" "}
-              </tspan>
-              <tspan x="0" y="4752">
-                FUNCTIONAL AND VISUALLY APPEALING. WHETHER{" "}
-              </tspan>
-              <tspan x="0" y="5184">
-                YOU&apos;RE LOOKING TO ESTABLISH AN ONLINE PRESENCE{" "}
-              </tspan>
-              <tspan x="0" y="5616">
-                OR REVAMP AN EXISTING WEBSITE, JELLE HAS THE{" "}
-              </tspan>
-              <tspan x="0" y="6048">
-                SKILLS AND EXPERTISE TO BRING YOUR VISION TO LIFE.
-              </tspan>
-            </text>
-          </mask>
-        </defs>
-        <rect
-          width={"100%"}
-          height={"100%"}
-          fill={theme.palette.background.default}
-          mask="url(#mask)"
-        ></rect>
-      </svg>
-    </div>
-  );
-}
-
-export default FluidBackground;

package/src/components/Logo.tsx

@@ -1,55 +0,0 @@
-import React from "react";
-import Link from "next/link";
-import { Box, Typography } from "@mui/material";
-
-function MountainIcon(props: any) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="m8 3 4 8 5-5 5 15H2L8 3z" />
-    </svg>
-  );
-}
-
-interface LogoProps {
-  text?: string;
-  dark?: boolean;
-}
-
-export function Logo({
-  text = "Logo Text",
-  dark = false,
-}: Readonly<LogoProps>) {
-  return (
-    <Link href="/" style={{ textDecoration: "none" }}>
-      <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-        <MountainIcon
-          style={{
-            width: 24,
-            height: 24,
-            color: "#ec4899", // pink-500 equivalent
-          }}
-        />
-        <Typography
-          variant="h6"
-          sx={{
-            fontWeight: "semibold",
-            color: dark ? "white" : "text.primary",
-          }}
-        >
-          {text}
-        </Typography>
-      </Box>
-    </Link>
-  );
-}

package/src/components/LogoutButton.tsx

@@ -1,36 +0,0 @@
-"use client";
-import React from "react";
-import { logoutAction } from "../data/actions/auth-actions";
-import Button from "@mui/material/Button";
-import Skeleton from "@mui/material/Skeleton";
-import LogoutIcon from "@mui/icons-material/Logout";
-
-interface LogoutButtonProps {
-  text: string;
-  variant?: "text" | "outlined" | "contained";
-  /* loadingText: string;
-  loading?: boolean; */
-}
-
-//
-function LogoutButton({
-  text = "Log out",
-  variant = "text",
-}: Readonly<LogoutButtonProps>) {
-  return (
-    <form action={logoutAction}>
-      <Button
-        type="submit"
-        // aria-disabled={status.pending || loading}
-        // disabled={status.pending || loading}
-        startIcon={<LogoutIcon />}
-        variant={variant}
-      >
-        {/*{status.pending || loading ? <Loader text={loadingText} /> : text}*/}{" "}
-        {text}
-      </Button>
-    </form>
-  );
-}
-
-export default LogoutButton;

package/src/components/ScrollLink.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import Link, { LinkProps } from "next/link";
-import React, { PropsWithChildren } from "react";
-import { useTheme } from "@mui/material/styles";
-
-// mirror the props of next/link component
-type AnchorProps = Omit<
-  React.AnchorHTMLAttributes<HTMLAnchorElement>,
-  keyof LinkProps
->;
-type ScrollLinkProps = AnchorProps & LinkProps & PropsWithChildren;
-// component definition
-const ScrollLink = ({ children, ...props }: ScrollLinkProps) => {
-  const handleScroll = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-    //e.preventDefault();
-
-    // remove everything before the hash
-    const targetId = e.currentTarget.href.replace(/.*\#/, "");
-    const elem = document.getElementById(targetId);
-    const scrollDistance = elem
-      ? window.scrollY + elem?.getBoundingClientRect().top
-      : 0;
-
-    window.scrollTo({
-      top: scrollDistance,
-      behavior: "smooth",
-    });
-  };
-
-  const theme = useTheme();
-
-  return (
-    <Link
-      {...props}
-      onClick={handleScroll}
-      style={{
-        color: theme.palette.primary.contrastText,
-        textDecoration: "none",
-        cursor: "pointer",
-      }}
-    >
-      {children}
-    </Link>
-  );
-};
-
-export default ScrollLink;

package/src/components/StrapiErrors.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import Alert from "@mui/material/Alert";
-
-interface StrapiErrorsProps {
-  message: string | null;
-  name: string;
-  status: string | null;
-}
-
-export function StrapiErrors({
-  error,
-}: {
-  readonly error: StrapiErrorsProps | null;
-}) {
-  if (!error?.message) return null;
-  return <Alert severity="error">{error.message}</Alert>;
-}

package/src/components/StrapiImage.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-import Image from "next/image";
-import { getStrapiMedia } from "../lib/utils";
-import { StrapiImageProps } from "../types/StrapiImageProps";
-
-export function StrapiImage({
-  id,
-  url,
-  alternativeText = "",
-  height,
-  width,
-  fill = false,
-  style = {},
-}: Readonly<StrapiImageProps>) {
-  if (!url) return null;
-  const imageUrl = getStrapiMedia(url);
-  const imageFallback = `https://placehold.co/${width}x${height}`;
-
-  return (
-    <Image
-      id={id}
-      src={imageUrl ?? imageFallback}
-      alt={alternativeText}
-      fill={fill}
-      height={height}
-      width={width}
-      style={style}
-    />
-  );
-}

package/src/components/StyledLink.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import NextLink from "next/link";
-import Link from "@mui/material/Link";
-import { SxProps, Theme } from "@mui/material/styles";
-
-interface StyledLinkProps {
-  href: string;
-  sx?: SxProps<Theme>;
-  children: React.ReactNode | string;
-  target?: string;
-}
-
-export function StyledLink({
-  href,
-  sx = [],
-  children,
-  target,
-}: StyledLinkProps) {
-  return (
-    <NextLink href={href} passHref legacyBehavior>
-      <Link
-        target={target || "_blank"}
-        sx={[
-          // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
-      >
-        {children}
-      </Link>
-    </NextLink>
-  );
-}

package/src/components/SubmitButton.tsx

@@ -1,40 +0,0 @@
-"use client";
-import React from "react";
-import { useFormStatus } from "react-dom";
-import Button from "@mui/material/Button";
-import { ComponentsProps, SxProps, Theme } from "@mui/material/styles";
-import { ButtonProps } from "@mui/material/Button";
-
-interface SubmitButtonProps extends ButtonProps {
-  text: string;
-  loadingText: string;
-  loading?: boolean;
-  sx?: SxProps<Theme>;
-}
-
-// TODO at props so disabled can be set from the outside
-
-export function SubmitButton({
-  text,
-  loadingText,
-  loading,
-  sx = {},
-  ...props
-}: Readonly<SubmitButtonProps>) {
-  const status = useFormStatus();
-  return (
-    <Button
-      type="submit"
-      aria-disabled={status.pending || loading}
-      disabled={status.pending || loading}
-      variant={"outlined"}
-      sx={[
-        // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
-      {...props}
-    >
-      {status.pending || loading ? loadingText : text}
-    </Button>
-  );
-}

package/src/components/WebsitePlaceholder.tsx

@@ -1,159 +0,0 @@
-"use client";
-
-import React, { useState, useEffect, ReactNode } from "react";
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import { useTheme } from "@mui/material/styles";
-import Image from "next/image";
-
-interface WebsitePlaceholderProps {
-  title: string;
-  announcement: string;
-  logo: {
-    url: string;
-    alternativeText?: string;
-    width?: string;
-    height?: string;
-  };
-  lmBackgroundUrl: string;
-  dmBackgroundUrl: string;
-  children: ReactNode;
-}
-
-const WebsitePlaceholder: React.FC<WebsitePlaceholderProps> = ({
-  title,
-  announcement,
-  logo,
-  lmBackgroundUrl,
-  dmBackgroundUrl,
-  children,
-}) => {
-  const theme = useTheme();
-
-  const [visible, setVisible] = useState(true);
-
-  let keysPressed: { [key: string]: boolean } = {};
-
-  /**
-   * Handles the key down event.
-   * @param {React.KeyboardEvent} event - The keyboard event object.
-   */
-  const keyDownHandler = (event: KeyboardEvent) => {
-    keysPressed = { ...keysPressed, [event.key]: true };
-
-    if (
-      keysPressed["w"] === true &&
-      keysPressed["a"] === true &&
-      keysPressed["s"] === true &&
-      keysPressed["d"] === true
-    ) {
-      setVisible(!visible);
-    }
-  };
-
-  const keyUpHandler = (event: KeyboardEvent) => {
-    keysPressed[event.key] = false;
-  };
-
-  useEffect(() => {
-    document.addEventListener("keydown", keyDownHandler);
-    document.addEventListener("keyup", keyUpHandler);
-
-    return () => {
-      document.removeEventListener("keydown", keyDownHandler);
-      document.removeEventListener("keyup", keyUpHandler);
-    };
-  }, []);
-
-  return (
-    <Box
-      sx={[
-        visible && {
-          display: "grid",
-          justifyItems: "center",
-          alignItems: "center",
-          backgroundColor: theme.palette.primary.main,
-          backgroundImage: `url(${
-            theme.palette.mode === "light" ? lmBackgroundUrl : dmBackgroundUrl
-          })`,
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-          height: "100vh",
-          maxHeight: "100vh",
-          width: "100vw",
-          overflow: "hidden",
-          position: "fixed",
-          top: 0,
-          left: 0,
-          zIndex: 9000,
-          isolation: "isolate",
-          p: 2,
-        },
-      ]}
-    >
-      {visible && (
-        <>
-          <Button
-            sx={{
-              position: "absolute",
-              top: 0,
-              left: 0,
-              width: "100px",
-              height: "100px",
-              opacity: 0,
-            }}
-            onClick={() => setVisible(false)}
-          >
-            Close
-          </Button>
-          <Typography
-            variant="h1"
-            align="center"
-            sx={{
-              [theme.breakpoints.down("sm")]: {
-                fontSize: "2rem",
-              },
-              [theme.breakpoints.up("sm")]: {
-                fontSize: "4rem",
-              },
-              [theme.breakpoints.up("lg")]: {
-                fontSize: "6rem",
-              },
-            }}
-          >
-            {title}
-          </Typography>
-          {logo?.url && (
-            <Image
-              src={logo.url}
-              alt={logo.alternativeText || "logo"}
-              width={300}
-              height={300}
-            />
-          )}
-          <Typography
-            variant="h3"
-            align="center"
-            sx={{
-              [theme.breakpoints.down("sm")]: {
-                fontSize: "1.5rem",
-              },
-              [theme.breakpoints.up("sm")]: {
-                fontSize: "2rem",
-              },
-              [theme.breakpoints.up("lg")]: {
-                fontSize: "3rem",
-              },
-            }}
-          >
-            {announcement}
-          </Typography>
-        </>
-      )}
-      {!visible && <>{children}</>}
-    </Box>
-  );
-};
-
-export default WebsitePlaceholder;